/* @import url("https://fonts.googleapis.com/css?family=Mitr:200,300,400,500&subset=latin-ext,thai,vietnamese");

@font-face {
  font-family: NotoserifThai;
  font-display: swap;
  src: url(../static/font/Notoserif/NotoSerifThai-Regular.eot);
  src: url(../static/font/Notoserif/NotoSerifThai-Regular.woff2) format("woff2"),
    url(../static/font/Notoserif/NotoSerifThai-Regular.woff) format("woff"),
    url(../static/font/Notoserif/NotoSerifThai-Regular.ttf) format("truetype"),
    url(../static/font/Notoserif/NotoSerifThai-Regular.svg#NotoSerifThai-Regular)
      format("svg");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: NotoserifThai-bold;
  font-display: swap;
  src: url(../static/font/Notoserif/NotoSerifThai-Bold.eot);
  src: url(../static/font/Notoserif/NotoSerifThai-Bold.woff2) format("woff2"),
    url(../static/font/Notoserif/NotoSerifThai-Bold.woff) format("woff"),
    url(../static/font/Notoserif/NotoSerifThai-Bold.ttf) format("truetype"),
    url(../static/font/Notoserif/NotoSerifThai-Bold.svg#NotoSerifThai-Bold)
      format("svg");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: NotosansThai;
  font-display: swap;
  src: url(../static/font/Notosans/NotoSansThai-Regular.eot);
  src: url(../static/font/Notosans/NotoSansThai-Regular.woff2) format("woff2"),
    url(../static/font/Notosans/NotoSansThai-Regular.woff) format("woff"),
    url(../static/font/Notosans/NotoSansThai-Regular.ttf) format("truetype"),
    url(../static/font/Notosans/NotoSansThai-Regular.svg#NotoSansThai-Regular)
      format("svg");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: NotosansThai-Medium;
  font-display: swap;
  src: url(../static/font/Notosans/NotoSansThai-Medium.eot);
  src: url(../static/font/Notosans/NotoSansThai-Medium.woff2) format("woff2"),
    url(../static/font/Notosans/NotoSansThai-Medium.woff) format("woff"),
    url(../static/font/Notosans/NotoSansThai-Medium.ttf) format("truetype"),
    url(../static/font/Notosans/NotoSansThai-Medium.svg#NotoSansThai-Medium)
      format("svg");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: NotosansThai-bold;
  font-display: swap;
  src: url(../static/font/Notosans/NotoSansThai-Bold.eot);
  src: url(../static/font/Notosans/NotoSansThai-Bold.woff2) format("woff2"),
    url(../static/font/Notosans/NotoSansThai-Bold.woff) format("woff"),
    url(../static/font/Notosans/NotoSansThai-Bold.ttf) format("truetype"),
    url(../static/font/Notosans/NotoSansThai-Bold.svg#NotoSansThai-Bold)
      format("svg");
  font-weight: 700;
  font-style: normal;
} */

@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch&display=swap');

@font-face {
  font-family: 'Omyim';
  font-display: swap;
  src: url(../../assets/custom/font/PSLxOmyim.ttf) format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Iconic';
  font-display: swap;
  src: url(../../assets/custom/font/FC\ Iconic\ Regular.ttf) format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Iconic-bold';
  font-display: swap;
  src: url(../../assets/custom/font/FC\ Iconic\ Bold.ttf) format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Omyim-bold';
  font-display: swap;
  src: url(../../assets/custom/font/PSLxOmyim\ Bold.ttf) format('truetype');
  font-weight: 700;
}

@font-face {
  font-family: 'Kittithada';
  font-display: swap;
  src: url(../../assets/custom/font/PSLxKittithada.ttf) format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Kittithada-bold';
  font-display: swap;
  src: url(../../assets/custom/font/PSLxKittithada\ Bold.ttf) format('truetype');
  font-weight: 700;
  font-style: normal;
}

/* Start Customize Theme Section */
:root {
  --main-font-family: 'Iconic', sans-serif;
  --sub-font-family: 'Kittithada', sans-serif;
  --text-title-color: black;
  --text-sub-title-color: #2f0504;

  --text-primary-color: #000;
  --bg-primary-color: #1d9d2c;
  --border-primary-color: #ffc107;
  --text-on-bg-primary-color: #fff;

  --card-main-bg-color: rgb(208, 45, 31);
  --card-main-text-color: #4e2d80;

  --text-secondary-color: #faab18;
  --bg-secondary-color: #faab18;
  --border-secondary-color: #fdf689;
  --text-on-bg-secondary-color: #4e2d80;

  --bg-dark-color: #000;
  --border-dark-color: #391274;
  --text-on-bg-dark-color: #ffffff;

  --link-text-color: white;
  --link-hover-text-color: #000;

  --card-header-bg-color: #75853e;
  --card-header-text-color: #ffffff;
  --card-header-border-color: #e5a405;

  --card-main-money-text-color: #faab18;

  --main-background: #000;
  --main-gradient-color: #c1c1c1;

  --text-result: #383838 --;
}

/* End Customize Theme Section */

/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #dad4d4;
  border-radius: 10px;
}

a:hover {
  text-decoration: none;
  color: black;
}

/* test */
/* Handle */
::-webkit-scrollbar-thumb {
  background: #888888;
  border-radius: 8px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

* {
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  min-height: 100%;
  position: relative;
}

html,
body {
  font-family: var(--main-font-family);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  font-size: 1.2rem;
  line-height: 1;
}

textarea,
input[type],
button[type],
select {
  font-size: 1.2rem;
  line-height: 1;
  /* height: auto; */
}

button[type] {
  font-size: 1.2rem;
  line-height: 1;
}

.btn {
  line-height: 1.2;
  font-size: 1.2rem;
}

a {
  font-size: 1.2rem;
  line-height: 1;
}

.dvImageTextBox {
  position: relative;
}

.dvImageTextBox img {
  filter: brightness(0%);
}

.dvImageTextBox input::placeholder {
  color: #000; /* Set the desired color */
}

.dvImageTextBox input {
  background: white;
  display: block;
  width: 100%;
  padding-inline-start: 42px;
  color: #000;
}

.dvImageTextBox img {
  position: absolute;
  top: 18px;
  left: 7px;
  height: 31%;
  margin: 3px;
  padding: 1px;
}

.dvImageTextBox i {
  position: absolute;
  top: 6px;
  left: 7px;
  height: 50%;
  color: #000;
  font-size: 0.8rem;
}

.form-control {
  height: fit-content !important;
  color: black;
}

.form-control.form-control-deposit[readonly] {
  background-color: transparent;
}

.form-control::placeholder {
}

.fixed-bg {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: -1;
  top: 0;
  left: 0;
  background: url(../images/bg-black.jpg) no-repeat top center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/bg-black.jpg', sizingMethod='scale');
  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/bg-black.jpg', sizingMethod='scale')";
}

.padding-game-main {
  padding-bottom: 10%;
}

.bg-red-menu {
  background: #083359 0% 0% no-repeat padding-box;
  align-items: center;
  border-radius: 11px;
}

.icon-dd-bottom {
  width: 2.5rem;
  border-radius: 50%;
  border: 3px solid #c93fed;
}

.provider-name-head-main {
  background: #d55d0d 0% 0% no-repeat padding-box;
  border-radius: 29px 29px 0px 0px;
  color: #fff;
  width: 30%;
  text-align: center;
  padding: 3px;
}

@media screen and (max-width: 768px) {
  .provider-name-head-main {
    width: 58%;
    padding: 2px;
  }

  .icon-dd-bottom {
    border: 2px solid red;
  }

  .bg-red-menu {
    background: transparent linear-gradient(270deg, #1ea4d9 0%, #083359 100%) 0% 0% no-repeat
      padding-box;
    box-shadow: inset 0px 3px 6px #00000029;
    border: 2px solid #debb84;
    border-radius: 11px;
  }

  .dvImageTextBox input {
    background: transparent linear-gradient(180deg, #fff 0%, #fff 100%) 0% 0% no-repeat padding-box;
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding-inline-start: 37px;
    color: #000;
  }

  .dvImageTextBox img {
    top: 12px;
  }

  .padding-game-main {
    padding-bottom: 30%;
  }

  .bg-login-m {
    /*border-radius: 30px;*/
    /*background: url(../custom/main-bg-mobile.jpg) no-repeat top;*/
    /*order-radius: 46px;*/
    /*margin-top: -23px;*/
    /*z-index: 1000;*/
    /*position: relative;*/
    /*background-size: cover;*/
  }

  .fixed-bg {
    width: 100vw;
  }

  html,
  body {
    font-size: 1.1rem;
  }

  .input-price {
    font-size: 1rem !important;
  }
}

/* body:before {
    content: "";
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -10;
    background: url(../images/bg-black.jpg) repeat-x top center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  } */
/* h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Mitr", sans-serif;
} */

.navbar {
  width: 100%;
  height: auto;
  background: var(--bg-primary-color);
  /* background-color: #790000; */
  /* background-image: linear-gradient(to right, #ffe66f, #dcab4c, #b37430, #85411a, #551202); */
  /* background-color: #F2AE33; */
  /* background-image: radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%), radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);; */
  color: var(--text-on-bg-primary-color);
  padding: 8px 0;
}

/* notice bar */

/* .notice-bar {
    border-radius: 10px;
    padding: 2px;
    background: #b90504;
    height: 24px;
    width: 100%;
}

.label-notice {
    border-radius: 9px;
    background: white;
    height: 20px;
    color: #28a745;
    font-size: 14px;
    line-height: 20px;
    padding: 0px 8px;
    width: auto;
    white-space: nowrap
} */

.notice-bar {
  border-radius: 12px;
  padding: 2px;
  /* background: #b90504; */
  background: black;
  height: 30px;
  width: auto;
  display: inline-flex;
}

.label-notice {
  /* border-radius: 20px; */
  /* background: white;  */
  height: 24px;
  /* color: var(--bg-primary-color); */
  color: #28a745;
  font-size: 14px;
  line-height: 24px;
  /* padding: 0px 8px; */
  width: auto;
  white-space: nowrap;
  display: flex;
  flex-direction: row;
  margin-right: 5px;
}

.label-notice .online {
  width: auto;
  border-radius: 20px;
  background: #28a745;
  height: 24px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  color: white;
  padding: 8px 2px 8px 8px;
  display: inline-flex;
  margin-right: 0px;
  line-height: 1;
  align-items: center;
  font-size: 12px;
}

.label-notice .numonline {
  width: auto;
  border-radius: 20px;
  background: white;
  height: 24px;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  color: #28a745;
  padding: 8px 8px 8px 5px;
  display: inline-flex;
  font-weight: bold;
  white-space: nowrap;
  margin-left: 0px;
  text-align: center;
  line-height: 1;
  align-items: center;
  border: #28a745 2px solid;
}

@media screen and (max-width: 376px) {
  .label-notice i {
    display: none !important;
  }
}

.txt-notice {
  line-height: 25px;
  font-size: 16px;
  color: #fff;
  width: 100%;
  display: inline-flex;
}

/* notice bar */

/* error form */
.has-error {
  text-align: left;
}

.has-error input,
.has-error select,
.has-error textarea,
.has-error small {
  color: red !important;
}

.has-error input,
.has-error select,
.has-error textarea {
  border: 1px solid red !important;
  color: red !important;
}

.has-success input,
.has-success select,
.has-success textarea,
.has-success small {
  color: green !important;
}

.has-success input,
.has-success select,
.has-success textarea {
  border: 1px solid green !important;
  color: green !important;
}

/* error form */

.indexlogo {
  width: 100%;
  text-align: left;
}

/* .logoindex{
    background: url(../images/lottery.svg) no-repeat top center;
    background-size: cover;
    width: 40px;
    height: 40px;
    margin: 0 auto;
    position: relative;
    display: inline-block;
    vertical-align: middle;
} */
.logoindex {
  /* background: url(../images/logo-fifalotto-white.png) no-repeat top center; */
  background-size: cover;
  width: 208px;
  height: 40px;
  margin: 0 auto;
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.logoindex img {
  width: 100%;
  height: auto;
  max-height: 55px !important;
  /* margin-top: -0.9rem; */
}

.txtindex {
  display: inline-block;
  vertical-align: middle;
  color: #790000;
  font-size: 2em;
  text-shadow: #fff 1px 1px 0px;
}

.bgwhitealpha {
  /* background: rgba(179, 227, 236, 0.6); */
  background: rgba(255, 255, 255, 0.9);
  margin-bottom: 10px;
  border: rgba(255, 255, 255, 1) 2px solid;
}

.bgwhitealpha h6 {
  color: var(--text-title-color) !important;
  margin: 5px;
  margin-bottom: 10px;
  text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.3);
  font-size: 110%;
}

.bgwhitealpha h6.text-danger {
  color: var(--text-title-color) !important;
  margin: 5px;
  margin-bottom: 10px;
  text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.3);
  font-size: 110%;
}

.bgwhitealpha h6 span {
  text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5);
  font-weight: 400;
  font-size: 14px;
}

.bgwhitealpha .card-header {
  font-weight: 400;
  /* font-family: "Mitr", sans-serif; */
}

.bgwhitealpha .card-theme-header {
  font-weight: 400;
  /* font-family: "Mitr", sans-serif; */
}

.bgwhitealpha .border-card-right {
  border-right: 2px solid rgba(0, 0, 0, 0.125);
  border-top: none;
  border-bottom: none;
  border-left: none;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  /* border-radius: 0px; */
}

.bgwhitealpha .border-card-right:last-child {
  border-right: none !important;
  border-top: none;
  border-bottom: none;
  border-left: none;
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;

  /* border-radius: 0px; */
}

.bgwhitealpha .sub-card-header {
  font-size: 80%;
  /* line-height: 25px; */
  line-height: 1;
  padding: 5px 0px !important;
  vertical-align: middle;
  min-height: 25px;
  /* font-family: 'NotosansThai', sans-serif !important; */
}

.bgwhitealpha .bg-danger {
  border-radius: 3px;
}

.card-theme-header {
  padding: 0.75rem 1.25rem;
  margin-bottom: 0;
  color: var(--card-header-text-color);
  background-color: var(--card-header-bg-color);
  border-bottom: 1px solid var(--card-header-border-color);
}

.card-header-text {
  color: var(--text-secondary-color);
}

.border-active {
  border: var(--bg-primary-color) 2px solid;
  /* background: rgba(38, 166, 91, 0.6); */
  background: rgba(151, 2, 21, 0.5);
  /* transition: border 0.5s linear; */
  transition:
    border 0.5s,
    opacity 0.8s linear;
}

.border-active h6 {
  color: #fff;
  margin: 5px;
  margin-bottom: 10px;
  text-shadow: 1px 1px 1px #790000;
  font-size: 110%;
  font-weight: 400;
}

.border-active h6 span.badge-dark {
  text-shadow: 0px 0px 1px rgba(0, 0, 0, 0);
  /* color: var(--bg-primary-color); */
  /* color: #049372; */
  /* background: white; */

  color: #fff;
  background-color: #dc3545;

  font-weight: 400;
  font-size: 14px;
}

.border-active .btn-dark {
  color: #fff;
  background-color: #dc3545;
  border-color: #dc3545;
}

/************************/
.border-active .nav-slide .active,
.border-active .nav-slide-yeekee .active {
  background-color: #fff;
  -webkit-box-shadow: inset 0px 0px 0px 2px #d53529;
  -moz-box-shadow: inset 0px 0px 0px 2px #d53529;
  box-shadow: inset 0px 0px 0px 2px #d53529;
}

.border-active .nav-slide li,
.border-active .nav-slide-yeekee li {
  color: white !important;
  text-shadow: black 1px 1px 0px;
  background-color: rgba(0, 0, 0, 0.5);
}

.border-active .nav-slide li.active,
.border-active .nav-slide-yeekee li.active {
  color: #790000 !important;
  text-shadow: #fff 1px 1px 0px;
  background-color: #fff;
}

/*************************/

.carousel-view ol {
  margin-top: 0;
  margin-bottom: 0rem;
}

.carousel-view {
  display: none;
  margin-bottom: 0rem;
  position: relative;
}

@media screen and (max-width: 768px) {
  .logoindex img {
    max-height: 76px !important;
  }
  .carousel-view {
    display: block;
  }

  .pc-view {
    display: none !important;
  }

  .nav-slide li {
    position: relative;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    /* display: inline-block; */
    /* width: 24% !important; */
    /* width: 32.4% !important; */
    width: 47.5% !important;
    height: auto !important;
    padding: 3px 0;
    text-align: center;
    vertical-align: top;
    margin-right: 1.5px;
    margin-left: 1.5px;
    text-indent: 0px !important;
  }

  .nav-slide {
    position: relative;
    flex-wrap: wrap;
    right: 0;
    bottom: 0;
    left: 0;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    /* display: inline-block; */
    padding-left: 0;
    margin-right: 0;
    margin-left: 0;
    list-style: none;
  }

  .nav-slide-yeekee li {
    position: relative;
    -ms-flex: none;
    flex: none;
    /* display: inline-block; */
    width: 11.3% !important;
    height: auto !important;
    padding: 3px 0;
    text-align: center;
    vertical-align: top;
    margin-right: 1.5px;
    margin-left: 1.5px;
    margin-bottom: 3px;
    text-indent: 0px;
  }

  .nav-slide-yeekee {
    position: relative;
    right: 0;
    bottom: 0;
    left: 0;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    /* display: inline-block; */
    padding-left: 0;
    margin-right: 0;
    margin-left: 0;
    list-style: none;
  }

  .nav-slide li,
  .nav-slide-yeekee li {
    cursor: pointer;
    background-color: rgba(45, 28, 75, 0.2);
    font-size: 14px;
    font-weight: 400;
    text-shadow: none;
    border-radius: 2px;
  }
}

@media screen and (max-width: 321px) {
  .nav-slide li {
    width: 32% !important;
    font-size: 11.5px;
  }
}

/********************** end carousel slide ****************/

/********* end index **********/

/********* member ************/
.border-top-navbar {
  background: transparent linear-gradient(180deg, #fefc74 0%, #c67b36 100%) 0% 0% no-repeat
    padding-box;
  padding-top: 14px;
}

.topnavbar {
  width: 100%;
  height: auto;
  color: var(--text-on-bg-primary-color);
  background: transparent linear-gradient(180deg, #025e09 0%, #22742c 50%, #025e09 100%) 0% 0%
    no-repeat padding-box;
  padding-bottom: 0px;
  padding-top: 7px;
}

.topnavbar.sticky-top {
  z-index: 998;
}

.botnavbar {
  width: 100%;
  height: auto;
  /*background: #b90504;
    color: white;*/
  /* background: #f8f9fa; */
  /* background:#ccc; */
  background: #ececec;
  /* border-top: 1px #fcfcfc solid; */
  /* padding: 8px 0; */
}

.botnavbar.fixed-bottom {
  z-index: 998;
}

.memberlogo {
  width: auto;
  text-align: left;
}

.logomember {
  /* background: url(../images/lottery.svg) no-repeat top center; */
  background-size: cover;
  width: auto;
  height: 56px;
  margin: 0 auto;
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

#logosymbol {
  display: none;
}

.line-app-balance {
  background: #fff;
  border-radius: 2px;
  width: 3px;
  margin: 3px 1px 7px 10px;
}

.line-mobile-balance {
  background: #f4a642 0% 0% no-repeat padding-box;
  border-radius: 3px;
  width: 8px;
  height: 90%;
  margin: 1px 0px 0px 10px;
}

.line-mobile-bt-app {
  background: #fff 0% 0% no-repeat padding-box;
  border-radius: 3px;
  width: 2px;
  height: 70%;
  margin: 8px 0px 0px -2px;
}

.line-mobile-balance-green {
  background: white;
  border-radius: 2px;
  width: 4px;
  height: 57%;
  margin-left: 37%;
  z-index: 1000;
  float: right;
  margin-top: -5%;
  position: absolute;
}

.line-mobile-balance-green2 {
  margin-left: 15%;
}

@media screen and (max-width: 765px) {
  .line-mobile-balance {
    width: 4px;
  }
  .logomember {
    margin-left: 0px;
    display: flex;
    align-items: center;
  }

  .topnavbar {
    padding-bottom: 0px;
    height: 50px;
    padding-top: 0px;
  }
}

@media screen and (max-width: 321px) {
  .logomember {
    width: 35px;
    height: 35px;
    margin-top: 0px;
  }

  #logosymbol {
    display: inline-block;
    width: auto;
    border-radius: 2px;
    box-shadow: #333 0px 0px 1px;
  }

  #logofull {
    display: none;
  }
}

.logomember img {
  height: 81% !important;
  width: auto;
  margin-top: 6px;
}

.txtlogomember {
  display: inline-block;
  vertical-align: middle;
  color: #fff;
  font-size: 1em;
  text-shadow: #790000 1px 1px 0px;
}

#menu-profile {
  /*margin-left: 5px;*/
  padding-right: 20px;
  display: flex;
  align-items: center;
  cursor: pointer;
}

#menu-profile.dropdown-toggle::after {
  display: block;
  position: absolute;
  top: 50%;
  right: 0px;
  transform: translateY(-50%);
}

#menu-profile-dropdown > .dropdown-item:hover {
  background-color: #eee !important;
}

/* menu-pc */
#menu-pc {
  vertical-align: middle;
  display: flex;
  align-items: center;
}

#menu-pc a {
  color: white;
  text-decoration: none;
  display: inline-block;
  margin-top: 2px;
  padding: 0 10px;
  font-size: 24px;
  vertical-align: middle;
  font-weight: bold;
  /*text-shadow: 1px 1px 0 var(--border-secondary-color);*/
}

#menu-pc img {
  height: 2.1rem;
}

#menu-pc a:hover,
#menu-pc a:active,
#menu-pc a.active {
  transform: scale(1.05);
}

.pc-view .bootstrap-select a,
.mobile-view .bootstrap-select a {
  font-size: initial;
  text-shadow: initial;
  color: initial;
}

.pc-view .bootstrap-select,
.mobile-view .bootstrap-select {
  background: transparent;
  height: auto;
}

.pc-view .bootstrap-select .btn-sm {
  background: rgba(0, 0, 0, 0.2);
}

.mobile-view .bootstrap-select .btn-block {
  background: rgba(0, 0, 0, 0);
}

.pc-view .bootstrap-select .filter-option-inner {
  min-width: 20px;
  max-width: 20px;
}

.pc-view .bootstrap-select .filter-option-inner span,
.mobile-view .bootstrap-select .filter-option-inner span {
  border-radius: 1px;
}

.pc-view .bootstrap-select > .dropdown-toggle,
.mobile-view .bootstrap-select > .dropdown-toggle {
  padding-right: 22px;
}

/* menu-mobile */
#menu-mobile {
  vertical-align: middle;
}

#menu-mobile a {
  text-decoration: none;
  display: inline-block;
  /* margin-top:2px;
    padding: 0 10px; */
  font-size: 24px;
  vertical-align: middle;
  padding: 8px 0;
  text-align: center;
  border-left: 1px #ececec solid;
  border-right: 1px #ececec solid;
  border-top: #cecece 1px solid;
}

#menu-mobile a:hover,
#menu-mobile a:active,
#menu-mobile a.active {
  background: rgba(0, 0, 0, 0.1);
  border-left: rgba(0, 0, 0, 0.1) 1px solid;
  border-right: rgba(255, 255, 255, 0.9) 1px solid;
  box-shadow: inset 0 -5px 0 #500202;
  border-top: #aeaeae 1px solid;
}

#menu-mobile a:hover:last-child,
#menu-mobile a:active:last-child {
  background: rgba(0, 0, 0, 0.1);
  border-left: rgba(0, 0, 0, 0.1) 1px solid;
  border-right: rgba(0, 0, 0, 0.05) 1px solid;
  /* border-right: rgba(255,255,255,0.6) 1px solid; */
}

#menu-mobile i {
  text-decoration: none;
  display: inline-block;
  /* margin-top:2px;
    padding: 0 10px; */
  font-size: 24px;
  vertical-align: middle;
  /* text-shadow: 1px 1px 0 #fff; */

  background-color: #565656;
  color: transparent;
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.4);
  -webkit-background-clip: text;
  /*-moz-background-clip: text;*/
  /*background-clip: text;*/
}

#menu-mobile a:hover i,
#menu-mobile a:active i,
#menu-mobile a.active i {
  color: #500202;
  text-shadow: #fff 1px 1px 0px;
}

#menu-mobile ul li {
  background: #ccc;
  display: inline-block;
}

/* #menu-mobile .support {
    background: #343a40;
    color: #fff;
    box-shadow: inset 0px 5px 0px #555;
}

#menu-mobile .support i {
    text-decoration: none;
    display: inline-block;
    font-size: 24px;
    vertical-align: middle;

    background-color: #222;
    color: transparent;
    text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.8);
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
} */

#menu-mobile .support {
  background: #28a745;
  color: #fff;
  box-shadow: inset 0px 5px 0px #555;
}

#menu-mobile .support i {
  text-decoration: none;
  display: inline-block;
  /* margin-top:2px;
    padding: 0 10px; */
  font-size: 24px;
  vertical-align: middle;
  /* text-shadow: 1px 1px 0 #fff; */

  background-color: #222;
  color: transparent;
  text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.8);
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
}

#menu-mobile a.support.active i,
#menu-mobile a.support:active i,
#menu-mobile a.support:hover i {
  color: #28a745;
  text-shadow: #fff 1px 1px 0px;
}

#menu-mobile a.support:hover,
#menu-mobile a.support:active,
#menu-mobile a.support.active {
  background: rgba(0, 0, 0, 0.1);
  border-left: rgba(0, 0, 0, 0.1) 1px solid;
  border-right: rgba(255, 255, 255, 0.9) 1px solid;
  box-shadow: inset 0 -5px 0 #28a745;
  border-top: #aeaeae 1px solid;
}

/* Sidebar */
.linemenu-x {
  border-right: 1px solid rgba(0, 0, 0, 0.2);
  font-size: 24px;
  min-height: 24px;
  height: auto;
  display: inline-block;
  margin-left: 5px;
  margin-right: 15px;
  margin-top: 0;
}

.line {
  width: 100%;
  height: 1px;
  border-bottom: 1px dashed #ddd;
  /* margin: 40px 0; */
}

/* ---------------------------------------------------
    SIDEBAR STYLE
----------------------------------------------------- */
#sidebarCollapsePC {
  cursor: pointer;
  vertical-align: middle;
  display: inline-block;
  padding: 0px;
}

#sidebarCollapse {
  cursor: pointer;
  vertical-align: middle;
  display: inline-block;
  font-size: 24px;
  line-height: 24px;
}

#sidebarCollapse i {
  line-height: 24px;
  margin-top: 2.5px;
  padding-right: 0px;
}

#sidebarCollapse i.fas.fa-bars {
  color: #fff;
}

#sidebar {
  width: min-content;
  position: fixed;
  top: 0;
  left: -294px;
  height: 100vh;
  z-index: 1023;
  background: #16324e 0% 0% no-repeat padding-box;
  color: #888;
  transition: all 0.3s;
  overflow-y: scroll;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
}

#sidebar.active {
  left: -10px;
}

.mobile-view {
  display: none !important;
}

#dismiss {
  color: var(--text-on-bg-primary-color);
  text-align: center;
  position: absolute;
  top: 0px;
  left: 10px;
  cursor: pointer;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  font-size: 36px;
  z-index: 999;
}

#dismiss:hover {
  color: var(--text-primary-color);
}

.overlay {
  display: none;
  position: fixed;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.7);
  z-index: 998;
  opacity: 0;
  transition: all 0.5s ease-in-out;
}

.overlay.active {
  display: block;
  opacity: 1;
}

#sidebar .sidebar-header {
  padding: 20px;
  /* background: #f6f6f6; */
  background: var(--bg-primary-color);
  font-size: 16px !important;
  box-shadow: #c1c1c1 0 1px 3px;
  z-index: 998;
  position: relative;
  color: var(--text-on-bg-primary-color);
}

#sidebar .sidebar-header img {
  border: 3px solid white;
  background: white;
  box-shadow: #500202 0px 2px 1px;
}

#sidebar ul.components {
  padding: 0px 0;
  border-bottom: 1px solid #ddd;
  background: #ececec;
  z-index: 997;
  position: relative;
}

#sidebar ul p {
  color: #f8f9fa;
  padding: 10px;
}

#sidebar ul li a {
  padding: 10px;
  font-size: 1.1em;
  display: block;
  text-decoration: none;
  color: #555;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

#sidebar ul li a:hover {
  color: var(--text-primary-color);
  /* background: #f8f9fa; */
  background: white;
  border-bottom: #f8f9fa 1px dashed;
}

/* #sidebar ul li:last-child a {
  border-bottom: #fff 1px solid;
} */

#sidebar ul li.active > a,
#sidebar a[aria-expanded='true'] {
  color: var(--text-primary-color);
  /* background: #f8f9fa; */
  background: var(--text-on-bg-primary-color);
}

#sidebar a[data-toggle='collapse'] {
  position: relative;
}

#sidebar ul ul a {
  font-size: 0.9em !important;
  padding-left: 30px !important;
  background: #f8f9fa;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

#sidebar ul.CTAs {
  padding: 10px 20px;
}

#sidebar ul.CTAs a {
  text-align: center;
  font-size: 0.9em !important;
  display: block;
  border-radius: 5px;
  margin-bottom: 5px;
}

#sidebar ul.CTAs a:hover {
  border: var(--border-primary-color) solid 1px;
}

a.download {
  background: #f8f9fa;
  color: var(--text-primary-color);
}

a.article,
a.article:hover {
  background: var(--bg-primary-color) !important;
  color: var(--text-on-bg-primary-color) !important;
}

a.logout {
  background: #ff0000 0% 0% no-repeat padding-box;
  box-shadow: inset 0px 3px 6px #00000029;
  border-radius: 15px;
  color: white !important;
  text-shadow: none !important;
  text-align: center;
  width: 100%;
  padding: 10px;
  justify-content: space-between;
  display: flex;
}

a.logout:hover {
  background: #ddb050 0% 0% no-repeat padding-box;
  color: var(--text-primary-color) !important;
  border: var(--border-primary-color) solid 1px;
}

#re-credit {
  display: inline-block;
  cursor: pointer !important;
  font-size: 18px;
  vertical-align: middle;
  padding: 0;
}

#re-credit span {
  border: 2px solid var(--bg-primary-color);
  transition: all 0.5s;
  color: var(--border-primary-color) !important;
  background: var(--text-on-bg-primary-color) !important;
  transition:
    all 0.5s linear,
    color 0.1s linear;
}

#re-credit:hover span {
  transition: all 0.5s;
  border: 2px solid var(--bg-primary-color);
  cursor: pointer;

  background: var(--border-primary-color);
  color: var(--text-on-bg-primary-color);
  transition:
    all 0.5s linear,
    color 0.1s linear;
}

#re-credit.active span {
  /* color: #fff;
    background-color: var(--bg-primary-color); */
  transition: all 0.5s;
  border: 2px solid var(--bg-primary-color);
  cursor: pointer;

  background: var(--border-primary-color) !important;
  color: var(--text-on-bg-primary-color) !important;
  transition:
    all 0.5s linear,
    color 0.1s linear;
}

#re-credit i,
#re-credit span {
  display: inline-block;
  vertical-align: middle;
  line-height: 18px;
  margin-left: 0;
}

#re-credit i {
  font-size: 18px;
  background: var(--bg-primary-color);
  border-radius: 18px;
}

.refresh-icon.fa-spin {
  color: var(--border-primary-color);
  /* transform: rotate(180deg);
    transition: transform 0.5s linear, color 0.1s linear; */
  transition:
    all 0.5s linear,
    color 0.1s linear;
}

.refresh-icon {
  transition: color 0.1s linear;
}

/* ---------------------------------------------------
    CARD STYLE
----------------------------------------------------- */
.card-main {
  border-radius: 10px;
  margin: 20px 0px;
  background: var(--card-main-bg-color);
  color: var(--card-main-text-color);
  border: var(--border-primary-color) 1px solid;
  height: auto;
}

.card-main h2 {
  margin-bottom: -7px;
  /* font-family: 'NotosansThai', sans-serif; */
  font-weight: 300;
  text-shadow: var(--border-primary-color) 1px 1px 0;
  transform: scaleX(0.85);
}

.card-sub {
  border-radius: 50px;
  margin: 20px;
  margin-top: 5px;
  background: rgba(255, 255, 255, 1);
  border: #fff 1px solid;
  height: auto;
  margin-bottom: -20px;
  z-index: 100;
  position: relative;
}

.btn-credit {
  border-radius: 50px;
}

.text-black {
  color: black;
}

.menu-grid {
  overflow: hidden;
}

a.menu-grid.disabled {
  /* Make the disabled links grayish*/
  color: gray;
  /* And disable the pointer events */
  pointer-events: none;
}

.btn-red {
  color: var(--text-on-bg-primary-color);
  background-color: var(--bg-primary-color) !important;
  border-color: var(--bg-primary-color) !important;
}

.btn-red:hover,
.btn-red:active {
  color: var(--text-on-bg-primary-color);
  background-color: var(--bg-primary-color) !important;
  border-color: var(--bg-primary-color) !important;
}

a.menu-grid.hot {
  overflow: hidden;
  /* border: 1px solid #dab3b0; */
  border: 1px solid var(--border-primary-color);
  color: var(--text-primary-color);
  box-shadow: inset 0 -0px 10px rgba(255, 155, 155, 0.2);
}

a.menu-grid {
  padding: 10px;
  display: inline-block;
  text-align: center;
  min-width: 100px;
  width: 100%;
  border-radius: 3px;
  border: 1px solid var(--border-primary-color);
  margin-top: 5px;
  margin-bottom: 5px;
  color: #555;
  text-decoration: none;
  text-shadow: var(--text-on-bg-primary-color) 1px 1px 0;
  line-height: 1.2;
}

.menu-grid i {
  font-size: 30px;
}

a.menu-grid:hover,
a.menu-grid:active {
  color: var(--border-primary-color);

  background: #eee;
  border: 1px solid #e5e5e5;
}

.row .col-3 a.menu-grid,
.row .col-md-1 a.menu-grid,
.row .col-lg-1 a.menu-grid {
  padding: 0px;
  padding-top: 10px;
  padding-bottom: 8px;
  width: 100%;
  font-size: 14px;
  min-width: 50px;
  line-height: 1.5;
}

.row .col-3 .menu-grid i,
.row .col-md-1 .menu-grid i {
  font-size: 30px;
}

.row .col-4 .menu-grid i.sn-icon,
.row .col-md-1 .menu-grid i.sn-icon {
  font-size: 35px !important;
  line-height: 0.9 !important;
}

a.menu-grid.powerball {
  line-height: 1.2 !important;
}

.row-menu-grid .row .col-4,
.row-menu-grid .row .col-6,
.row-menu-grid .row .col-3 {
  /* padding-right:0px !important; */
  padding-right: 8px;
  padding-left: 8px;
}

.main-content {
  margin-top: 0px;
  border-radius: 0px;
  /* margin-bottom: 60px; */
}

.row-menu-grid {
  border-radius: 25px;
  /*margin-bottom: 60px;*/
}

.menu-grid.menu-money {
  background: var(--bg-dark-color);
  color: var(--text-on-bg-primary-color);
  text-shadow: var(--border-dark-color) 1px 1px 0;
  border-radius: 0px;
  box-shadow: inset 10px -0px 0px var(--border-primary-color);
  min-height: 60px;
  padding: 15px;
  padding-right: 5px;
}

.menu-grid.menu-money i {
  color: var(--text-primary-color);
  text-shadow: #222 1px 1px 0;
}

/************ribbon****************/
/* @import url(https://fonts.googleapis.com/css?family=Lato:700); */

/* common */
.ribbon {
  width: 50px;
  height: 50px;
  overflow: hidden;
  position: absolute;
}

.ribbon::before,
.ribbon::after {
  position: absolute;
  z-index: -1;
  content: '';
  display: block;
  border: 5px solid var(--border-primary-color);
}

.ribbon span {
  position: absolute;
  display: block;
  width: 80px;
  padding: 2px 0;
  background-color: var(--bg-primary-color);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  color: var(--text-on-bg-primary-color);
  /* font: 500 10px/1 "Lato", sans-serif !important; */
  font-size: 10px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  text-transform: uppercase;
  text-align: center;
}

/* soon ribbon */

.ribbon-soon {
  width: 50px;
  height: 50px;
  overflow: hidden;
  position: absolute;
}

.ribbon-soon::before,
.ribbon-soon::after {
  position: absolute;
  z-index: -1;
  content: '';
  display: block;
  border: 5px solid #333;
}

.ribbon-soon span {
  position: absolute;
  display: block;
  width: 80px;
  padding: 2px 0;
  background-color: #555;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  color: #fff;
  font:
    500 8px/1 'NotosansThai',
    sans-serif !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  text-transform: uppercase;
  text-align: center;
}

/* top left*/
.ribbon-top-left {
  top: 5px;
  left: 0px;
}

.ribbon-top-left::before,
.ribbon-top-left::after {
  border-top-color: transparent;
  border-left-color: transparent;
}

.ribbon-top-left::before {
  top: 0;
  right: 0;
}

.ribbon-top-left::after {
  bottom: 0;
  left: 0;
}

.ribbon-top-left span {
  right: -3px;
  top: 6px;
  transform: rotate(-45deg);
}

/************ribbon****************/

.box-news {
  width: 100%;
  display: flex;
}

.h-box-news {
  line-height: 0.9;
  background: #500202;
  color: #fff;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  padding: 10px 15px;
  width: 100%;
  display: flex;
}

.h-box-news span b {
  /* font-family: Mitr; */
  font-weight: 400;
}

.h-box-news .icon-news {
  display: inline-block;
  padding-left: 20px;
  padding-right: 10px;
  box-shadow: inset 7px 0px 0px var(--bg-primary-color);
  height: 100%;
  min-height: 35px;
}

.h-box-news .icon-news i {
  font-size: 35px;
  color: #dc3545;
}

.h-box-news .txt-h {
  display: inline-block;
}

.txt-box-news {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  padding: 10px;
  background: #fff;
  border: #e0e0e0 1px solid;
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  justify-content: center;
  align-items: stretch;
}

.txt-box-news a {
  color: #343a40;
  text-decoration: none;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 100%;
}

.txt-box-news a:hover {
  color: #000;
}

.txt-box-news a img {
  border-radius: 5px;
  margin-right: 10px;
  width: 120px;
  object-fit: contain;
  align-self: center;
  flex: 0 0 auto;
  transition: all 0.3s;
}

.txt-box-news a:hover img,
.txt-box-news a:focus img {
  object-position: 50% 50%;
  transform: scale(1.1);
  transition: all 0.3s;
}

.txt-box-news .text-news {
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
  overflow: hidden;
  height: auto;
  align-self: center;
  width: 100%;
  word-wrap: break-word;
}

.txt-box-news a .text-news p {
  line-height: 1.3;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  margin-bottom: 0;
  word-wrap: break-word;
  font-size: 14px;
}

.txt-box-news a .text-news span {
  /* font-family: tahoma; */
  font-size: 12px;
  font-weight: 400;
  background: #aaa;

  width: auto;
  flex: 0 0 auto;
}

.txt-box-news a:hover .text-news span {
  background: #555;
}

.txt-box-news a .text-news h1 {
  line-height: 1.5;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  margin-bottom: 0;
  font-size: 14px;
  word-wrap: break-word;
}

.txt-box-news a:hover .text-news h1 {
  color: var(--text-primary-color);
}

/****************************/

.txt-box-news1 a {
  color: #343a40;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  width: 100%;
}

.txt-box-news1 a:hover {
  color: #000;
}

.txt-box-news1 a img {
  border-radius: 5px;
  margin: 5px;
  margin-top: 0px;
  object-fit: contain;
  align-self: center;
  flex: 0 0 auto;
  transition: all 0.3s;
}

.txt-box-news1 a:hover img,
.txt-box-news1 a:focus img {
  object-position: 50% 50%;
  transform: scale(0.95);
  transition: all 0.3s;
}

.txt-box-news1 .text-news {
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
  overflow: hidden;
  height: auto;
  align-self: center;
  width: 100%;
  word-wrap: break-word;
}

.txt-box-news1 a .text-news p {
  line-height: 1.3;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  margin-bottom: 0;
  word-wrap: break-word;
  font-size: 14px;
}

.txt-box-news1 a .text-news span {
  /* font-family: tahoma; */
  font-size: 12px;
  font-weight: 400;
  background: #aaa;

  width: auto;
  flex: 0 0 auto;
}

.txt-box-news1 a:hover .text-news span {
  background: #555;
}

.txt-box-news1 a .text-news h6 {
  line-height: 1.5;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  margin-bottom: 0;
  font-size: 14px;
  word-wrap: break-word;
}

.txt-box-news1s a:hover .text-news h6 {
  color: var(--text-primary-color);
}

/* .img-news{
    width: 100%;
    max-width: 600px;
    margin: 10px;
    float: left;
}
.news-detail{
    float: left;
} */

.title-news-hilight {
  font-size: 130%;
  display: block;
  width: 100%;
  text-align: center;
  position: relative;
  margin-bottom: 10px;
  background: white;
}

.title-news-hilight span {
  background-color: #fff;
  padding: 0 10px;
  position: relative;
  z-index: 1;
}

.title-news-hilight::before {
  content: '';
  display: block;
  height: 4px;
  background: #ddd;
  position: absolute;
  top: 50%;
  margin-top: -2px;
  left: 10px;
  right: 10px;
}

/*--------------bubble-------------------*/

/* remimder bubble styling */

.bubblechat blockquote {
  margin: 10px 10px 0;
  background: #efefef;
  padding: 20px 60px;
  position: relative;
  border: none;
  border-radius: 8px;
  text-align: center;
}

.bubblechat blockquote:before,
.bubblechat blockquote:after {
  content: '\201C';
  position: absolute;
  font-size: 80px;
  line-height: 1;
  /* color: #757f9a; */
  color: lightcoral;
  font-style: normal;
  /* font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif; */
}

.bubblechat blockquote:before {
  top: -8px;
  left: 3px;
}

.bubblechat blockquote:after {
  content: '\201D';
  right: 0px;
  bottom: -0.5em;
}

.bubblechat div.bubble-arrow {
  width: 0;
  height: 0;
  border-left: 0 solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid #efefef;
  margin: 0 0 0 60px;
}

.bubblechat {
  position: fixed;
  left: 5px;
  bottom: 10px;
  max-width: 250px;
  z-index: 1031;
}

.bubblechat p {
  margin: 8px 0 0 20px;
  text-align: left;
  color: #fff;
}

.bubblechat .boxclose {
  background: #fff !important;
  border: none;
  position: absolute;
  z-index: 1032;
  text-align: center;
  right: 15px;
  top: 15px;
  border-radius: 20px;
  border: 5px solid #fff;
  display: block;
  width: 25px;
  height: 25px;
  line-height: 0.8 !important;
  padding: 0px 0px;
  font-size: 15px;
  cursor: pointer;
  color: lightcoral;
}

.bubblechat a {
  color: #500202;
  text-decoration: none;
}

.bubblechat a:hover {
  color: #b90504;
}

.bar-powerball {
  width: 100%;
  background-color: #151515;
  color: var(--text-on-bg-primary-color);
  display: inline-block;
  padding: 5px 0;
  line-height: 20px;
  font-size: 20px;
  text-align: center;
  border-bottom: var(--bg-primary-color) 2px solid;
  display: none;
}

.bar-powerball i {
  font-size: 28px;
  line-height: 20px;
  vertical-align: middle;
}

.bar-powerball-pc {
  width: auto;
  /* background-color: #151515; */
  color: white;
  display: inline-block;
  padding: 5px 0;
  line-height: 20px;
  font-size: 20px;
  text-align: center;
  margin-left: 10px;
}

.bar-powerball-pc i {
  font-size: 28px;
  line-height: 20px;
  vertical-align: middle;
}

/*****************************/

.ribbonbar {
  font-weight: 600;
  color: #fff;
  background: #dc3545;
  padding-top: 0px;
  font-size: 18px;
  line-height: 20px;
  /* width: max-content; */
  width: auto;
  position: relative;
  text-align: center;
  height: 27px;
  /* margin: 3em auto 0 auto; */
  filter: drop-shadow(0 6px 3px rgba(0, 0, 0, 0.1));
  border-right: 2px solid #dc3545;
  border-left: 2px solid #dc3545;
  margin-left: 20px;
  text-shadow: #500202 1px 1px 0;
  text-align: center;
  display: inline-block;
  vertical-align: middle;
}

.ribbonbar:after,
.ribbonbar:before {
  content: '';
  position: relative;
  display: inline-block;
  border: 13.5px solid #dc3545;
  height: 27px;
}

.ribbonbar:before {
  left: -20px;
  border-right-width: 5px;
  border-left-color: transparent;
  filter: drop-shadow(-6px 6px 3px rgba(0, 0, 0, 0.04));
  position: relative;
}

.ribbonbar:after {
  right: -20px;
  border-left-width: 5px;
  border-right-color: transparent;
  filter: drop-shadow(6px 6px 3px rgba(0, 0, 0, 0.04));
  position: relative;
}

.ribbonbar .odometer {
  line-height: 1;
  margin-top: -15px;
  margin-left: -20px;
  margin-right: -20px;
  min-width: 50px;
}

/* end bubble chat */
/* -----------------------lotto card-------------------- */
.ribbon-lotto {
  background: rgba(0, 0, 0, 0.3);
  height: 30px;
  width: auto;
  display: inline-block;
  position: absolute;
  color: #fff;
  line-height: 30px;
  padding: 0px 10px;
  margin-top: 5px;
  border-left: rgba(0, 0, 0, 0.3) 1px solid;
}

.ribbon-lotto:after {
  content: '';
  position: absolute;
  display: inline-block;
  bottom: 0;
  border: 15px solid rgba(0, 0, 0, 0.3);
  right: -15px;
  height: 30px;
  border-left-width: 0px;
  border-right-color: transparent;
  filter: drop-shadow(6px 6px 3px rgba(0, 0, 0, 0.04));
}

.ribbon-lotto-img {
  height: 30px;
  width: auto;
  display: inline-block;
  /* position: absolute; */
  color: #fff;
  line-height: 30px;
  margin-top: 5px;
}

ul.countdown {
  list-style: none;
  margin: 0px 0;
  padding: 0px 0px;
  text-align: center;
  position: relative;
  display: flex;
  overflow: hidden;
  height: 30px;
  align-items: center;
}

ul.countdown li {
  display: inline-flex;
  margin: 0px;
}

ul.countdown li span {
  font-size: 30px;
  font-weight: 300;
  line-height: 30px;
}

ul.countdown li.seperator {
  font-size: 20px;
  line-height: 30px;
  vertical-align: middle;
}

ul.countdown li p {
  color: #a7abb1;
  font-size: 14px;
}

.lotto-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  height: 100%;
}

a .lotto-card {
  border: 2px solid white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: rgba(255, 255, 255, 0.5) 0 0 10px;
}

a .lotto-card:hover,
a.lotto-card:focus {
  box-shadow: #555 0px 0px 10px;
  /* border: 2px solid rgba(0,0,0,0.5); */
}

.lotto-head {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  padding: 5px;
  color: white;
  text-align: right;
  text-shadow: rgba(0, 0, 0, 0.3) 1px 1px 0;
}

.lotto-head-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary-color);
}

.lotto-head > div {
  flex-grow: 1;
}

.lotto-head .lotto-name {
  font-weight: 400 !important;
  text-align: right;
  margin-bottom: 0px;
  /* font-size: 12px; */
  -webkit-text-stroke: 0.1px rgb(156, 154, 154); /* width and color */
}

@media only screen and (min-width: 740px) {
  .lotto-head .lotto-name {
    /* font-size: 16px; */
  }
}

.lotto-head.lotto-government {
  background-color: #17a2b8;
  border: #108496 1px solid;
}

.lotto-head.lotto-thaistock {
  background-color: #007bff;
  border: #0364cc 1px solid;
}

.lotto-head.lotto-foreignstock {
  background-color: #6610f2;
  border: #4f06c5 1px solid;
}

.lotto-head.lotto-la {
  background-color: #fd7e14;
  border: #c45b06 1px solid;
}

.lotto-head.lotto-vn {
  background-color: #e83e8c;
  border: #b1185f 1px solid;
}

.lotto-head.lotto-my {
  background-color: #28a745;
  border: #1c8b36 1px solid;
}

.lotto-head.lotto-sg {
  background-color: #65b1c4;
  border: #5996a5 1px solid;
}

.lotto-head.lotto-gsb {
  background-color: #f90a86;
  border: #ff1d92 1px solid;
}

.ribbon-lotto-img {
  display: inline-block;
  /* position: absolute; */
  color: #fff;
  line-height: 20px;
  padding: 0px 5px;
  margin-top: 5px;
}

.ribbon-lotto-img img {
  height: 50px;
}

.ribbon-lotto-img span {
  height: 50px;
  font-size: 50px;
  background-size: cover;
  margin-left: -5px;
}

@media screen and (max-width: 420px) {
  .ribbon-lotto-img {
    display: inline-block;
    /* position: absolute; */
    color: #fff;
    line-height: 20px;
    padding: 0px 5px;
    margin-top: 5px;
  }

  .ribbon-lotto-img img {
    height: 40px !important;
  }

  .ribbon-lotto-img span {
    height: 40px;
    font-size: 40px !important;
    background-size: cover;
  }
}

.lotto-head.lotto-baac {
  background-color: #13007d;
  border: #0e005c 1px solid;
}

.lotto-time {
  width: 100%;
  display: flex;
  border-radius: 40px;
  padding: 5px;
  background: white;
  border: #ccc 1px solid;
  border-top: none;
  text-align: right;
  font-size: 27px;
  line-height: 30px;
  color: #bbb;
  flex-direction: row;
  justify-content: space-between;
}

.lotto-time i {
  /* float: left; */
  display: inline-flex;
  margin-top: 3px;
}

.tanghuay-time {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 5px;
  padding-bottom: 0px;
  background: rgba(0, 0, 0, 0.1);
  border: #ccc 1px solid;
  text-align: right;
  font-size: 18px;
  line-height: 20px;
  /* color: #dc3545; */
  color: var(--text-primary-color);
  text-shadow: var(--text-on-bg-primary-color) 1px 1px 0;
  border-radius: 5px;
  overflow: hidden;
}

.tanghuay-time_day {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 5px;
  padding-bottom: 0px;
  background: rgba(0, 0, 0, 0.1);
  border: #ccc 1px solid;
  text-align: right;
  font-size: 15px;
  line-height: 20px;
  /* color: #dc3545; */
  color: var(--border-primary-color);
  text-shadow: var(--text-on-bg-primary-color) 1px 1px 0;
  border-radius: 5px;
  overflow: hidden;
}

.lotto-time span {
  font-size: 77%;
  white-space: nowrap;
}

@media screen and (max-width: 413px) {
  .lotto-time span {
    font-size: 77%;
  }
}

@media screen and (max-width: 376px) {
  .time-government span {
    text-align: center !important;
    width: 100% !important;
  }

  .time-government {
    vertical-align: middle;
    /* height: 100%; */
  }
}

@media screen and (max-width: 321px) {
  .time-government span {
    font-size: 70%;
  }
}

.tanghuay-time i {
  margin-right: 5px;
  display: inline-flex;
}

.tanghuay-time ul li span {
  font-weight: bold !important;
}

.tanghuay-time ul li.seperator {
  font-weight: bold !important;
}

.tanghuay-time_day i {
  margin-right: 5px;
  display: inline-flex;
}

.tanghuay-time_day ul li span {
  font-weight: bold !important;
}

.tanghuay-time_day ul li.seperator {
  font-weight: bold !important;
}

@media screen and (max-width: 376px) {
  .tanghuay-time i {
    display: none;
  }

  .tanghuay-time span {
    font-size: 75%;
  }
}

@media screen and (max-width: 321px) {
  .tanghuay-time span {
    font-size: 75%;
  }
}

@media screen and (max-width: 321px) {
  .tanghuay-time_day i {
    display: none;
  }

  .tanghuay-time_day {
    font-size: 10px;
  }

  .tanghuay-h4 {
    font-size: 80%;
  }
}

@media screen and (min-width: 321px) and (max-width: 430px) {
  .tanghuay-time_day i {
    display: none;
  }

  .tanghuay-time_day {
    font-size: 15px;
  }

  .tanghuay-h4 {
    font-size: 100%;
  }
}

@media only screen and (min-width: 480px) {
  .tanghuay-time_day {
    font-size: 20px;
  }
}

.bar-back-lottery {
  line-height: 20px;
  /*padding: 10px;*/
  font-size: 20px;
  /*border: 1px solid #FFFFFF;*/
  /*border-radius: 5px;*/
  color: white !important;
  /*background: url("../custom/back-custom.svg") no-repeat center center rgba(0, 0, 0, 0.5);*/
}

.bar-back-lottery img {
  height: 2rem;
}

.bar-back a {
  color: #aaa;
  text-decoration: none;
}

.bar-back a.btn {
  color: white;
}

.bar-back a.btn:hover,
.bar-back a.btn:focus {
  color: white;
}

.bar-back a.btn-outline-secondary {
  color: #555;
}

.bar-back a.btn-outline-secondary:hover,
.bar-back a.btn-outline-secondary:focus {
  color: #fff;
}

.bar-back a:hover,
.bar-back a:focus {
  color: var(--text-primary-color);
}

.col-lotto .row .col-6,
.col-lotto .row .col-4,
.col-lotto .row .col-3 {
  margin-bottom: 5px;
  padding: 0 5px;
}

/* .col-lotto .row .col-4 .btn,.col-lotto .row .col-6 .btn{
    line-height: 1.2;
    overflow: hidden;
} */
.col-lotto .bg-btn {
  background: white;
  border-radius: 5px;
  border: 1px solid white;
  box-shadow: rgba(255, 255, 255, 0.5) 0 0 3px;
  width: auto;
}

.bg-option {
  background: rgba(0, 0, 0, 0.2);
  color: white;
  /*text-shadow: #eee 1px 1px 0px;*/
}

.flex-fill .bg-btn {
  margin: 2.5px;
}

.btn-tanghuay {
  line-height: 1;
}

.btn-panghuay {
  line-height: 1;
}

.row-btn-tanghuay .btn.active .badge {
  background: rgba(0, 0, 0, 0.5) !important;
  outline: 1px dashed black;
}

.row-btn-tanghuay .btn div:first-child {
  margin-left: -8px;
  margin-top: -5px;
  margin-bottom: -5px;
  padding: 5px;
  padding-top: 8px;
  border-radius: 0px;
  vertical-align: middle;
  color: #fff;
}

.row-btn-tanghuay .col-6 button div:first-child {
  width: 80%;
}

.row-btn-tanghuay .btn span {
  /* font-family: Arial, Helvetica, sans-serif; */
  /* font-weight: 400; */
}

.row-btn-tanghuay .btn div:first-child i {
  font-size: 1.3rem;
  font-style: normal;
  text-align: center;
}

.reward-jubwin-badge {
  font-size: 1.3rem;
}

@media screen and (max-width: 768px) {
  .logomember img {
    margin-left: 0px !important;
    height: 89% !important;
    margin-top: -4px;
  }

  .topnavbar .justify-content-between .logomember img {
    margin-left: 11px !important;
    height: 67% !important;
    margin-top: -3px;
  }

  .row-btn-tanghuay .btn div:first-child i {
    font-size: 1rem;
  }

  .reward-jubwin-badge {
    font-size: 1rem;
  }
}

@media (min-width: 640px) {
  .row-btn-tanghuay .btn div:first-child i {
    font-size: 22px;
  }
}

.row-btn-tanghuay .btn div:last-child {
  font-style: normal;
  text-align: center;
  width: 25%;
  padding: 10px;
  border-radius: 3px;
  background: #242424;
  color: white;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.row-btn-tanghuay.btn-new3-dream .btn.new-3-btn div:last-child {
  background: transparent;
  margin: 0px;
}

.row-btn-tanghuay.row-btn-tanghuay-jubwin .btn div:last-child {
  width: 34%;
}

.fill-price-equal,
.search-name-poy {
  font-size: 1rem !important;
  height: 100% !important;
}

@media screen and (max-width: 768px) {
  .row-btn-tanghuay .btn div:last-child {
    width: 31%;
  }

  .fill-price-equal,
  .search-name-poy {
    font-size: 0.875rem !important;
    height: 100% !important;
  }
}

.row-btn-tanghuay .flex-fill {
  margin: 2.5px;
  width: auto;
}

.new-3-btn .btn.active div:first-child {
  background: transparent !important;
}

.option-special-bg {
  background: #2e2e2e;
}

.nav-justified {
  border-bottom: 1px solid black;
}

.nav-item {
  padding: 10px;
  position: relative;
}

.nav-justified .nav-panghuay-tab.active ~ .nav-item.nav-jubwin-tab::before {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background-color: #000;
  margin-bottom: 10px;
}

/*a#nav-keyboard-tab.active ~ a#nav-jubwin-tab::after {*/
/*  content: "";*/
/*  position: absolute;*/
/*  right: 0;*/
/*  top: 50%;*/
/*  transform: translateY(-50%);*/
/*  width: 2px;*/
/*  height: 50%;*/
/*  background-color: #70BEA7;*/
/*}*/

.option-special-bg-list-select {
  background: #d8ab28;
  border-radius: 3px;
}

.option-special-bg-txt {
  text-align: center;
  color: white;
  background: #252525;
  padding: 10px;
}

.row-btn-tanghuay.dash .btn.active {
  outline: 1px dashed white;
  outline-offset: 2px;
}

.btn-outline-red {
  color: #b27f30;
  background-color: rgba(255, 0, 0, 0.1);
  background-image: none;
  border-color: #b27f30;
}

.btn-outline-red.active {
  color: #fff;
  background-color: #dc3545;
  border-color: #dc3545;
}

.btn-outline-blue {
  color: #f2c659;
  /* background-color: transparent; */
  background-color: rgba(0, 89, 255, 0.05);
  background-image: none;
  border-color: #b27f31;
}

btn-outline-primary-jubwin:active,
.btn-outline-blue.active {
  color: #fff;
  background-color: #dba438;
  border-color: #b78432;
}

.btn-outline-green {
  color: #28a745;
  /* background-color: transparent; */
  background-color: rgba(0, 255, 106, 0.1);
  background-image: none;
  border-color: #28a745;
}

.btn-outline-green.active {
  color: #fff;
  background-color: #28a745;
  border-color: #28a745;
}

.bg-button-option-jubwin {
  background-color: #d3982c;
}

.lotto-title h4 {
  font-family: inherit !important;
  color: black;
  line-height: 1;
  margin-bottom: 0px;
  font-size: 1.4rem;
}

.lotto-close {
  -webkit-filter: opacity(100%) grayscale(100%);
  /* Safari */
  filter: opacity(100%) grayscale(100%);
}

.lotto-close .ribbon-lotto {
  background: rgba(0, 0, 0, 1);
  border-left: rgba(0, 0, 0, 1) 1px solid;
  vertical-align: top;
}

.lotto-close .ribbon-lotto:after {
  content: '';
  position: absolute;
  display: block;
  bottom: 0;
  border: 15px solid rgba(0, 0, 0, 1);
  right: -15px;
  height: 30px;
  border-left-width: 0px;
  border-right-color: transparent;
  filter: drop-shadow(6px 6px 3px rgba(0, 0, 0, 0.04));
}

/**********************************************/

.btn-move {
  padding: 0px;
  /* border: var(--bg-primary-color) 1px solid; */
  background: var(--bg-primary-color);
  font-size: 16px;
  line-height: 30px;
  height: 30px !important;
  margin-bottom: 0px;
  color: var(--text-on-bg-primary-color);
  cursor: pointer;
  vertical-align: middle;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  transition: 1s;
}

.btn-move a {
  color: white;
  transition: 1s;
}

#hide-list-huay,
#show-list-huay {
  overflow: hidden;
  width: 50%;
  margin-bottom: 2px;
}

@media screen and (max-width: 767px) {
  #hide-list-huay,
  #show-list-huay {
    overflow: hidden;
    width: 100%;
    margin-bottom: 2px;
  }
}

#hide-list-huay {
  transition: all 1s;
}

#show-list-huay {
  transition: all 1s;
}

.btn-move span {
  display: inline-block;
  width: 100%;
  text-align: center;
  overflow: hidden;
  transition: all 1s;
  height: 100%;
  vertical-align: middle;
}

span.btn-move {
  display: inline-flex;
  width: 100%;
  text-align: center;
  overflow: hidden;
  height: 100%;
  transition: all 1s;
  vertical-align: middle;
  margin-bottom: 0px;
  margin-right: 2px;
  white-space: nowrap;
}

.btn-move-left:before,
.btn-move-right:after {
  content: '';
  position: relative;
  height: 30px;
  display: flex;
}

.btn-move-left {
  color: #fff !important;
  background: transparent linear-gradient(180deg, #c78d36 0%, #f4d751 100%) 0% 0% no-repeat
    padding-box;
  margin-left: 15px !important;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}

.btn-move-right {
  color: #fff !important;
  background: transparent linear-gradient(180deg, #c78d36 0%, #f4d751 100%) 0% 0% no-repeat
    padding-box;
  margin-right: 15px !important;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}

.btn-move-left:before {
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-right: 15px solid #d8aa40;
  margin-left: -15px;
}

.btn-move-right:after {
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 15px solid #d8aa40;
  margin-right: -15px;
}

.sidebar-tanghuay {
  width: 100%;
  padding-left: 7px;
}

#sidebar-huay {
  display: flex;
  flex-flow: column;
  justify-content: start;
  align-items: stretch;
  overflow: hidden;
  transition: all 1s;
}

#show_poy_list {
  opacity: 1;
  width: 55%;
  transition: all 1s;
}

#numpage_2 h3.mb-0 {
  font-family: inherit;
  font-size: 125%;
}

#numpage_1,
#numpage_2 {
  transition: all 1s;
}

.sidebar-huay {
  width: 100%;
  padding: 3px;
  height: 60vmin;
  transition: 1s;
  background: transparent linear-gradient(180deg, #393939 0%, #000000 100%) 0% 0% no-repeat
    padding-box;
  border-radius: 5px;
}

.sidebar-huay .btn {
  margin-bottom: -5px;
}

.sidebar-huay .title-huay {
  color: var(--text-on-bg-dark-color);
  font-family: inherit;
  /* background: #790000; */
  height: 25px;
  line-height: 1;
  width: 100%;
  padding-left: 5px;
  border-bottom: #333 1px dashed;
}

.sidebar-huay .title-huay i {
  font-size: 1.3rem;
}

.sidebar-huay .list-huay {
  overflow-x: hidden;
  color: black;
  height: 100vmin;
  background-color: none;
  border-radius: 5px;
}

.sidebar-huay .list-huay ol.num-huay {
  list-style: none;
  counter-reset: number;
  border-radius: 5px;
  overflow: hidden;
  color: #cd8b3e;
  text-align: center;
}

.count-tang {
  background: #c6c6c6;
}

ol.num-huay li {
  counter-increment: number;
}

ol.num-huay li::before {
  content: counter(number) '. ';
  font-weight: bold;
  width: 1.5em;
  text-align: left;
  display: inline-block;
  color: #000;
  padding-left: 3px;
  font-size: 80%;
  align-self: center;
  background: #c6c6c6;
  text-align: center;
}

.list-huay::-webkit-scrollbar {
  width: 8px;
  background: transparent;
  margin-left: 3px;
}

.list-huay::-webkit-scrollbar-track {
  border-radius: 6px;
  background: white;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

.list-huay::-webkit-scrollbar-thumb {
  border-radius: 6px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
  background: #d6a148;
}

.num-pad {
  width: 100%;
}

.num-pad h4 {
  font-family: inherit;
  color: white !important;
}

.label-number {
  text-align: center;
  width: 100%;
}

label.number {
  display: inline-block;
  width: 50px;
  height: 50px;
  margin: 0px 5px;
  font-size: 40px;
  font-weight: bold;
  text-align: center;
  line-height: 50px;
  border: solid 1px #fff;
  color: #fc5540;
  border-radius: 2px;
  position: relative;
  vertical-align: middle;
  background-color: none;
}

label.number-tang {
  color: white;
  background: none;
  border: 2px solid #ffffff;
  border-radius: 5px;
  margin: 0px;
  font-size: 2rem;
  width: 30%;
  height: 68px;
  padding-top: 2%;
}

.number-jubwin {
  color: white;
  background: none;
  border: 2px solid #ffffff;
  border-radius: 5px;
  margin: 0px;
  font-size: 2rem;
}

label.number span {
  background: rgba(152, 59, 59, 0.8);
  width: 2px;
  height: 70%;
  position: absolute;
  top: 15%;
  left: 50%;
  animation-name: blink;
  animation-duration: 800ms;
  animation-iteration-count: infinite;
  opacity: 1;
}

.key-pad > .row > .col-3 {
  padding-left: 2px;
  padding-right: 2px;
  padding-bottom: 4px;
}

.key-pad > .row > .col-3 .btn {
  font-size: 20px;
  padding-left: 0px;
  padding-right: 0px;
}

.key-pad > .row > .col-3 .btn-blank {
  color: #fff;
  background-color: #ccc;
  background-image: none;
  border-color: #bbb;
  width: 100%;
  height: 100%;
}

.key-pad > .row > .col-4 .btn-blank {
  color: #fff;
  background-color: #ccc;
  background-image: none;
  border-color: #bbb;
  width: 100%;
  height: 100%;
}

.key-pad > .row > .col-3 .btn-reset,
.key-pad > .row > .col-3 .btn-cancel {
  /* font-size: 16px; */
  font-size: 1.1rem;
  line-height: 1;
  height: 100%;
  word-break: break-all;
}

.box__condition-info h3 {
  /* font-size: 18px; */
  font-size: 1.2rem;
  border-radius: 5px;
  background: #a1441a 0% 0% no-repeat padding-box;
  padding: 5px 10px;
  color: #ffffff;
  font-weight: normal;
}

.box__condition-info h2 {
  font-family: inherit;
  color: #022223;
  border-bottom: black 1px solid;
  font-size: 1.3rem;
}

.box__condition-info {
  background: #c1c1c1 0% 0% no-repeat padding-box;
  border-radius: 5px;
  padding: 5px;
  line-height: 1.2;
}

.box__condition-info p {
  padding: 0 5px;
  margin-bottom: 0px;
  color: #022223;
}

.bet_num_count {
  font-size: 90%;
  text-align: center;
  line-height: 1;
  margin-bottom: 5px;
  font-weight: 500;
  text-shadow: #000 1px 1px 0px;
  color: #fff;
}

.g3-huay {
  width: auto !important;
}

@keyframes blink {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@media screen and (max-width: 992px) {
  .sidebar-huay {
    width: auto;
    /* min-width: 300px; */
    min-width: 20%;
    height: 100vmin;
  }
}

@media screen and (max-width: 768px) {
  .g3-huay {
    width: 100% !important;
  }

  .sidebar-tanghuay > .d-flex > .flex-fill {
    display: inline-flex;
    flex: 1 0 26% !important;
  }

  .sidebar-huay .title-huay {
    font-size: 1.2rem;
    height: 20px;
  }

  .sidebar-huay .title-huay i {
    font-size: 1.3rem !important;
  }

  .sidebar-huay {
    width: auto;
    min-width: 20%;
  }

  #show_poy_list {
    opacity: 1;
    width: 48%;
    transition: all 1s;
  }
}

@media screen and (max-width: 415px) {
  .sidebar-huay {
    width: auto;
    min-width: 80px;
    height: 100%;
  }

  .sidebar-huay .title-huay {
    font-size: 14px;
  }

  .sidebar-huay .title-huay i {
    font-size: 10px !important;
    display: none;
  }

  .num-huay {
    font-size: 22px;
  }

  .key-pad > .row > .col-3 .btn-reset,
  .key-pad > .row > .col-3 .btn-cancel {
    font-size: 14px;
    line-height: 1;
    height: 100%;
    word-break: break-all;
  }
}

@media screen and (max-width: 376px) {
  .btn-tanghuay {
    font-size: 10px;
  }

  .row .col-3 a.menu-grid,
  .row .col-md-1 a.menu-grid,
  .row .col-lg-1 a.menu-grid,
  .row .col-4 a.menu-grid {
    padding: 0px;
    padding-top: 10px;
    padding-bottom: 8px;
    width: 100%;
    font-size: 16px;
    min-width: 50px;
    line-height: 1.5;
  }

  .sidebar-huay {
    height: 80%;
  }

  .key-pad > .row > .col-3 .btn-reset,
  .key-pad > .row > .col-3 .btn-cancel {
    font-size: 16px;
    line-height: 1;
    height: 100%;
  }
}

@media screen and (max-width: 321px) {
  .key-pad > .row > .col-3 .btn-reset,
  .key-pad > .row > .col-3 .btn-cancel {
    /* font-size: 10px; */
    line-height: 1;
    height: 100%;
    /* word-break: break-all; */
  }

  .key-pad > .row > .col-3 .btn-reset span,
  .key-pad > .row > .col-3 .btn-cancel span {
    display: block;
  }

  .lotto-title > h4 {
    font-size: 18px;
  }

  ul.countdown {
    font-size: 18px !important;
  }

  .row-btn-tanghuay .btn div:first-child i {
    font-size: 14px;
    font-style: normal;
    height: 100%;
  }

  .row-btn-tanghuay .btn span {
    /* font-family: Arial, Helvetica, sans-serif; */
    /* font-weight: 400; */
    font-size: 10px;
  }

  .btn-tanghuay {
    font-size: 16px !important;
    padding-right: 2px !important;
  }

  .btn-panghuay {
    font-size: 16px !important;
    padding-right: 2px !important;
  }
}

label.number {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/**********************************************/

@keyframes border-flicker {
  0% {
    opacity: 0.1;
    -webkit-box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73);
    -moz-box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73);
    box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73);
  }

  2% {
    opacity: 1;
    -webkit-box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73);
    -moz-box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73);
    box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73);
  }

  4% {
    opacity: 0.1;
    -webkit-box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73);
    -moz-box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73);
    box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73);
  }

  8% {
    opacity: 1;
    -webkit-box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73);
    -moz-box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73);
    box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73);
  }

  70% {
    opacity: 0.7;
    -webkit-box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73);
    -moz-box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73);
    box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73);
  }

  100% {
    opacity: 1;
    -webkit-box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73);
    -moz-box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73);
    box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73);
  }
}

@keyframes letter-flicker {
  0% {
    opacity: 0.1;
    text-shadow: 0px 0px 29px rgba(22, 242, 59, 1);
  }

  2% {
    opacity: 0.1;
    text-shadow: 0px 0px 29px rgba(22, 242, 59, 1);
  }

  4% {
    opacity: 1;
    text-shadow: 0px 0px 29px rgba(22, 242, 59, 1);
  }

  19% {
    opacity: 1;
    text-shadow: 0px 0px 29px rgba(22, 242, 59, 1);
  }

  21% {
    opacity: 0.1;
    text-shadow: 0px 0px 29px rgba(22, 242, 59, 1);
  }

  23% {
    opacity: 1;
    text-shadow: 0px 0px 29px rgba(22, 242, 59, 1);
  }

  80% {
    opacity: 1;
    text-shadow: 0px 0px 29px rgba(22, 242, 59, 1);
  }

  83% {
    opacity: 0.4;
    text-shadow: 0px 0px 29px rgba(22, 242, 59, 1);
  }

  87% {
    opacity: 1;
    text-shadow: 0px 0px 29px rgba(22, 242, 59, 1);
  }
}

.js-odoo {
  text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
  fill: #fff;
  transform: scaleX(0.85);
}

span.js-odoo g {
  font-weight: 300;
  /* font-family: "Mitr", sans-serif; */
}

span.js-odoo g text {
  margin-right: 10px;
}

.js-odoo svg {
  transform: scaleX(0.85);
}

/* ---------------------------------------------------
    CONTENT STYLE
----------------------------------------------------- */

#content {
  width: 100%;
  padding: 0px;
  min-height: 100vh;
  transition: all 0.3s;
  position: absolute;
  top: 0;
  right: 0;
  /* padding-bottom: 56px; */
}

@media screen and (max-width: 992px) {
  .row-menu-grid {
    border-radius: 0px;
    margin-bottom: 50px;
  }

  .main-content {
    border-radius: 0px;
    /* margin-bottom: 50px; */
  }

  .txt-box-news {
    flex-wrap: nowrap;
    flex-direction: column;
  }

  .txt-box-news .d-flex {
    margin-bottom: 8px;
    padding-bottom: 10px !important;
    border-bottom: #ccc dashed 1px;
  }

  .bar-powerball {
    display: block !important;
  }

  .bar-powerball-pc {
    display: none;
  }

  .ribbonbar .odometer {
    line-height: 1;
    margin-top: -20px;
    margin-left: -20px;
    margin-right: -20px;
    min-width: 50px;
  }
}

.option2btn:active,
.option2btn.active,
.option2btn.focus {
  /*background: black !important;*/
  outline: #fff 1px dashed !important;
  outline-offset: 1px !important;
}

@media screen and (max-width: 768px) {
  .mobile-view {
    display: flex !important;
    justify-content: center;
    align-items: center;
  }

  .container-fluid {
    padding: 0px;
    height: auto;
    /* margin-bottom: 52px; */
    z-index: 1;
  }

  .row-menu-grid {
    border-radius: 0px;
    /* margin-bottom: 50px; */
  }

  .main-content {
    border-radius: 0px;
    /* margin-bottom: 50px; */
  }

  .txt-box-news {
    flex-wrap: nowrap;
    flex-direction: column;
  }

  .txt-box-news .d-flex {
    margin-bottom: 8px;
    padding-bottom: 10px !important;
    border-bottom: #ccc dashed 1px;
  }

  .bubblechat {
    display: none;
  }

  ul.countdown {
    list-style: none;
    margin: 0px 0;
    padding: 0;
    display: flex;
    text-align: right;
    overflow: hidden;
    height: 25px;
  }

  ul.countdown li {
    display: inline-block;
  }

  ul.countdown li span {
    font-size: 25px;
    font-weight: 300;
    line-height: 25px;
  }

  ul.countdown li.seperator {
    font-size: 15px;
    line-height: 30px;
    vertical-align: middle;
  }

  ul.countdown li p {
    color: #a7abb1;
    font-size: 14px;
  }

  .lotto-head > h5 {
    font-weight: 400 !important;
    text-align: right;
    margin-bottom: 0px;
    font-size: 14px;
  }

  .ribbon-lotto {
    background: rgba(0, 0, 0, 0.3);
    height: 20px;
    width: auto;
    display: inline-block;
    position: absolute;
    color: #fff;
    line-height: 20px;
    padding: 0px 5px;
    margin-top: 5px;
    border-left: rgba(0, 0, 0, 0.3) 1px solid;
    font-size: 16px;
  }

  .ribbon-lotto i {
    font-size: 14px;
  }

  .ribbon-lotto:after {
    content: '';
    position: absolute;
    display: block;
    bottom: 0;
    border: 10px solid rgba(0, 0, 0, 0.3);
    right: -10px;
    height: 20px;
    border-left-width: 0px;
    border-right-color: transparent;
    filter: drop-shadow(6px 6px 3px rgba(0, 0, 0, 0.04));
  }

  .lotto-close .ribbon-lotto:after {
    content: '';
    position: absolute;
    display: block;
    bottom: 0;
    border: 10px solid rgba(0, 0, 0, 1);
    right: -10px;
    height: 20px;
    border-left-width: 0px;
    border-right-color: transparent;
    filter: drop-shadow(6px 6px 3px rgba(0, 0, 0, 0.04));
  }

  .lotto-close .ribbon-lotto span.round {
    color: black;
    background: rgba(255, 255, 255, 0.5);
    padding: 0px 2px;
    padding-bottom: 2px;
  }

  .bg-option > .d-flex > .flex-fill {
    flex: 1 0 21% !important;
  }

  .bg-option .bg-btn button {
    padding: 5px;
  }

  .option2btn:active,
  .option2btn.active,
  .option2btn.focus {
    /*background: black !important;*/
    outline: #fff 1px dashed !important;
    outline-offset: 1px !important;
  }

  .bar-powerball {
    display: block;
  }

  .bar-powerball-pc {
    display: none;
  }

  .btn-tanghuay {
    font-size: 1.1rem;
    /* padding-right: 4px; */
  }

  .btn-panghuay {
    font-size: 1.2rem;
    padding-right: 4px;
  }
}

/********* end member ********/

/*************page loading *****************/
#app {
  position: relative;
  opacity: 1;
  transition: all 0.3s;
  min-height: 75vh;
}

#loading {
  background: url('../images/loading-dots.gif') no-repeat center center rgba(0, 0, 0, 0.5);
  background-size: 100px;
  position: fixed;
  height: 100vh;
  width: 100%;
  z-index: 9999;
}

/* Animation */

@-webkit-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-moz-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-o-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/******************bank***********************/
.icon-bank {
  padding: 10px 40px;
  border-radius: 5px;
  width: 100%;
}

img.icon-bank {
  width: 100%;
  height: auto;
  min-height: 50px;
  min-width: 50px;
}

.icon-kbank {
  background: #138f2d;
}

.icon-scb {
  background: #4e2e7f;
}

.icon-ktb {
  background: #1ba5e1;
}

.icon-bbl {
  background: #1e4598;
}

.icon-bay {
  background: #fec43b;
}

.icon-cimb {
  background: #7e2f36;
}

.icon-ibank {
  background: #184615;
}

.icon-kk {
  background: #199cc5;
}

.icon-lhb {
  background: #373e48;
}

.icon-sc {
  background: #0f6ea1;
}

.icon-tbnk {
  background: #fc4f1f;
}

.icon-tisco {
  background: #12549f;
}

.icon-tmb {
  background: #1279be;
}

.icon-uob {
  background: #0b3979;
}

/* #firsttime label::before, #secondtime label::before{
    content:"\f22d";
    font-family: "Font Awesome 5 Pro";
    position: relative;
    margin-right: 5px;
} */

.input-hidden {
  position: absolute;
  left: -9999px;
}

input[type='radio']:checked + label > img {
  border: 1px solid #fff;
  box-shadow: 0 0 3px 3px #090;
}

input[type='radio']:checked + label {
  background: #090;
  color: white;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

input[type='radio'] + label {
  margin-bottom: 15px !important;
}

input[type='radio'] + label > span {
  font-weight: normal;
  text-align: center;
  margin: 0 5px;
  font-weight: normal;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: all 0.3s;
}

input[type='radio'] + label > span.badge {
  margin: 0 5px 5px 5px;
}

input[type='radio']:checked + label > span.badge {
  margin: 0 5px 5px 5px;
}

input[type='radio']:checked + label > span {
  margin: 0 5px;
  font-weight: normal;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  text-align: right;
  transition: all 0.3s;
}

input[type='radio'] + label::before {
  content: '';
  display: none;
}

/* Stuff after this is only to make things more pretty */
input[type='radio'] + label > img {
  border: 1px solid #444;
  width: 100%;
  transition: 500ms all;
}

input[type='radio']:checked + label > img {
  transform: none;
  /* rotateZ(-10deg)
      rotateX(10deg); */
}

.detail-bank {
  padding: 10px 10px;
}

@media screen and (max-width: 768px) {
  .icon-bank {
    padding: 5px 20px;
  }

  .detail-bank {
    padding: 5px 5px;
  }

  input[type='radio'] + label {
    font-size: 85%;
  }

  input[type='radio'] + label > span.badge {
    margin: 0 3px 2px 3px;
  }

  input[type='radio']:checked + label > span.badge {
    margin: 0 3px 2px 3px;
  }

  input[type='radio'] + label > span {
    margin: 0 3px 2px 3px;
  }

  input[type='radio']:checked + label > span {
    margin: 0 3px 2px 3px;
  }
}

.fromacc::after {
  content: '';
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 20px solid #b8daff;

  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  font-size: 80px;
  color: #212529;
  position: absolute;
  top: 50%;
  margin-top: -25px;
  right: -15px;
  z-index: 10;
  color: lightseagreen;
}

.dataTables_wrapper.form-inline {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.dataTables_wrapper {
  padding: 10px;
}

.dataTables_wrapper > .row {
  width: 100%;
}

.dataTables_wrapper > .row > .col-sm-12 {
  padding: 0 5px;
}

.dataTables_length label {
  display: inline-block;
  margin-bottom: 5px;
  width: auto;
}

.dataTables_length label span {
  display: inline-block;
  line-height: 1;
  vertical-align: middle;
  font-size: 90%;
}

.dataTables_filter label {
  display: inline-block;
  margin-bottom: 5px;
  width: auto;
}

.datatable th.datetime {
  width: 25%;
  text-align: center;
}

.datatable th.datetime span {
  display: inline-block;
}

.datatable th.option {
  width: 8%;
  text-align: center;
}

.datatable th.totalbet {
  width: 15%;
  text-align: center;
}

.datatable th.totalbet span {
  display: inline-block;
}

.datatable th,
.datatable td {
  vertical-align: middle !important;
}

.datatable th:first-child,
.datatable td:first-child {
  padding-left: 10px;
}

.dataTables_paginate .page-item.active .page-link {
  z-index: 1;
  color: #fff;
  background-color: #dc3545;
  border-color: #dc3545;
}

@media screen and (max-width: 768px) {
  .fromacc::after {
    content: '';
    /* display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center; */

    width: 0;
    height: 0;
    border-right: 30px solid transparent;
    border-top: 30px solid #b8daff;
    border-left: 30px solid transparent;

    display: block;
    text-align: center;
    position: relative;
    font-size: 80px;
    color: #212529;
    top: 0;
    left: 50%;
    bottom: 0;
    margin-top: -16px;
    right: 0;
    margin-left: -35px;

    z-index: 10;
    color: lightseagreen;
    margin-bottom: 0px !important;
  }

  .toacc {
    margin-top: -40px;
  }

  .datatable th,
  .datatable td,
  .datatable .btn i {
    font-size: 16px;
  }

  .datatable .btn {
    padding: 0px 5px;
  }

  .dataTables_filter label input {
    width: 100% !important;
  }

  .dataTables_filter label {
    padding-right: 5px !important;
  }

  .dataTables_length {
    text-align: left !important;
  }

  .dataTables_length label {
    padding-left: 5px !important;
    vertical-align: middle;
  }

  .dataTables_wrapper {
    padding: 0px;
  }

  div.dataTables_wrapper div.dataTables_paginate ul.pagination {
    margin: 2px 0;
    white-space: nowrap;
    justify-content: center;
  }

  .datatable th.datetime {
    width: 33%;
  }

  .datatable th.option {
    width: 10%;
  }

  .datatable th.totalbet {
    width: 25%;
  }
}

ol.list-numsets {
  list-style: none;
  counter-reset: my-awesome-counter;
}

ol.list-numsets li {
  counter-increment: my-awesome-counter;
  position: relative;
}

ol.list-numsets li::before {
  position: absolute;
  content: counter(my-awesome-counter) '. ';
  background: #d6d8db;
  padding: 2px 5px;
  border-radius: 3px;
  font-weight: bold;
  margin-left: -60px;
  min-width: 50px;
  text-align: center;
}

/************ add bank status **************/
.addbankstatus {
  width: 100%;
  display: block;
  margin: 10px 0;
}

.addbankstatus .status {
  display: flex;
  flex-direction: column;
  text-align: center;
  padding: 5px 0px;
  min-width: 140px;
}

.addbankstatus .status small {
  color: black;
  font-weight: bold;
}

.addbankstatus .status.wait {
  background: #1ba5e1;
  color: white;
}

.addbankstatus .status.confirm {
  background: #28a745;
  color: white;
}

.addbankstatus .status.cancel {
  background: #dc3545;
  color: white;
}

/*******************poyyyyyyyyyyyyyyyy*******************/
.btn-poy {
  padding-top: 10px;
  padding-left: 5px;
  padding-right: 5px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  transform: all 0.5s;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  width: 99%;
  margin-top: 2px;
}

.btn-poy.active,
.btn-poy:hover {
  border-left: 1px solid rgba(255, 255, 255, 0.5) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.5) !important;
  border-top: rgba(255, 255, 255, 0.5) 5px solid !important;
  transform: all 0.5s;
}

.btn-poy span {
  display: inline-block;
  line-height: 1.2;
}

.btn-poy div {
  height: 100%;
  text-align: left;
}

.btn-poy i {
  font-size: 120%;
  margin-right: 5px;
  vertical-align: middle;
  display: inline-block;
  line-height: 1;
  margin-top: -8px;
}

@media screen and (max-width: 992px) {
  .btn-poy {
    font-size: 75%;
    line-height: 1.2;
    vertical-align: middle;
  }

  .btn-poy span {
    display: block;
  }

  .btn-poy i {
    font-size: 180%;
    margin-right: 5px;
    vertical-align: middle;
    display: inline-block;
  }
}

@media screen and (max-width: 320px) {
  .btn-poy i {
    display: none;
  }
}

.poy-content {
  height: 0px;
  width: 100%;
  opacity: 0;
  position: absolute;
  overflow: hidden;
  transition: all 0s;
}

.poy-content.active {
  max-height: 100%;
  display: block;
  position: relative;
  padding: 10px !important;
  z-index: 1 !important;
  height: 100%;
  width: 100%;
  opacity: 1;
  transition: all 0.5s;
}

.poy-list {
  width: 100%;
  height: auto;
  overflow: hidden;
  border-radius: 5px;
  border: #111 1px solid;
  margin-bottom: 5px;
  display: inline-block;
  margin-left: 2.5px;
  margin-right: 2.5px;
}

.poy-list {
  width: 32.6% !important;
}

@media screen and (max-width: 1199.98px) {
  .poy-list {
    width: 49% !important;
  }
}

@media screen and (max-width: 991.98px) {
  .poy-list {
    width: 48.8% !important;
  }
}

@media screen and (max-width: 767.98px) {
  .poy-list {
    width: 99% !important;
  }
}

.poy-list-content {
  background: white;
  padding: 5px 10px;
  color: #6c757d;
}

.poy-list-content .row .col .ribbon-lotto i {
  font-size: 14px !important;
}

.poy-list-content .row .col .ribbon-lotto {
  background: rgba(0, 0, 0, 0.3);
  height: 20px;
  width: auto;
  display: inline-block;
  position: absolute;
  color: #fff;
  line-height: 20px;
  padding: 0px 5px;
  margin-top: 5px;
  border-left: rgba(0, 0, 0, 0.3) 1px solid;
  font-size: 16px;
}

.poy-list-content .row .col .ribbon-lotto:after {
  content: '';
  position: absolute;
  display: block;
  bottom: 0;
  border: 10px solid rgba(0, 0, 0, 0.3);
  right: -10px;
  height: 20px;
  border-left-width: 0px;
  border-right-color: transparent;
  filter: drop-shadow(6px 6px 3px rgba(0, 0, 0, 0.04));
}

.poy-list-head {
  width: 100%;
  min-height: 30px;
  line-height: 1;
  border-bottom: #111 1px solid;
  padding: 6px 10px 0px 10px;
  vertical-align: middle;
  background: #fff;
  overflow: hidden;
}

.poy-government small,
.poy-thaistock small,
.poy-foreignstock small,
.poy-yeekee small {
  font-weight: normal !important;
}

.poy-type {
  font-weight: lighter;
  padding: 5px;
  border-radius: 3px;
  line-height: 1.2;
  text-align: right;
  background: #eee;
  color: #000;
}

.poy-type h3 {
  line-height: 1;
  margin-bottom: 0;
}

.number-win {
  color: cadetblue;
  font-size: 170%;
  line-height: 1;
}

.poy-government {
  background: #17a2b8;
}

.poy-thaistock {
  background: #007bff;
}

.poy-foreignstock {
  background: #6610f2;
}

.poy-yeekee {
  background: #dc3545;
}

.poy-list-head .poy-status {
  display: block;
  float: right;
  margin-top: -6px;
  margin-right: -10px;
  width: auto;
  min-height: 30px;
  /* box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: 4px solid rgba(255, 255, 255, 0.5); */
  color: #000;
  font-size: 80%;
  /* padding-top: 12px; */
  padding-top: 8px;
  overflow: hidden;
  padding-left: 5px;
  padding-right: 5px;
}

/* .poy-status::before{
    content: "Status";
    font-size: 50% !important;
    line-height: 1;
    display: block;
    position: relative;
    margin-top: -9px;
    color: rgba(0, 0, 0, 0.4);
    border-bottom: rgba(0, 0, 0, 0.1) 1px solid;
} */
.poy-list-head .poy-status.notyet {
  background: #ffc107;
}

.poy-list-head .poy-status.success {
  background: #3ac028;
  color: white;
}

.poy-list-head .poy-status.win {
  background: #3ac028;
  color: white;
}

.poy-list-head .poy-status.lost {
  background: #dc3545;
  color: white;
}

.poy-list-head .poy-status.close {
  background: #b3b1b1;
  color: black;
}

/*******************accordion********************/
.accordion .card {
  margin: 5px 0 0;
}

.accordion .card-header {
  font-family: inherit;
  font-weight: normal;
  color: #111;
  background: #fff;
  outline: 0;
  cursor: pointer;
  padding: 0;
}

.accordion .card-header h4 {
  font-family: inherit;
}

.accordion .card-header:hover {
  background: #eee;
}

.accordion .card-body {
  position: relative;
  margin: 0 0 0;
  padding: 10px;
  color: #fff;
  background: #333;
}

.accordion .card-body a {
  color: lightcoral;
}

.accordion .card-body:after {
  position: absolute;
  top: -14px;
  left: 25px;
  display: block;
  width: 0;
  height: 0;
  margin-left: -7px;
  border-width: 7px;
  border-style: solid;
  border-color: transparent transparent #333 transparent;
  content: '';
}

/************* tab ***************/
#menucredit .nav-tabs {
  border-bottom: 1px solid white;
}

#menucredit .nav-link {
  color: #000;
  background: #dee2e6;
  border: white 1px solid;
}

#menucredit .nav-link.active {
  color: var(--text-on-bg-primary-color);
  background: var(--bg-primary-color);
  border: var(--border-primary-color) 1px solid;
}

/*****************profile setting***************/

.button-upload-file {
  overflow: hidden;
  position: relative;
  width: 80px;
  height: 80px;
  cursor: pointer;
}

.button-upload-file input {
  width: 2000px;
  height: 2000px;
  display: block;
  position: absolute;
  top: -100%;
  left: -100%;
}

.button-upload-file .preview {
  position: relative;
  z-index: 2;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
  width: 80px;
  height: 80px;
  display: block;
  overflow: hidden;
}

.button-upload-file img {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.button-upload-file .icon {
  height: 32px;
  width: 32px;
  background: #3b5898;
  position: absolute;
  z-index: 2;
  bottom: 0px;
  right: 0px;
  text-align: center;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
  padding: 5px 0px 0px 1px;
}

.button-upload-file .icon i {
  color: #fff;
}

.profilesetting .col-12 {
  margin-bottom: 10px;
}

/***************** btn-af ***************/

.btn-af i {
  font-size: 150%;
  line-height: 1;
}

.btn-af {
  padding-left: 0px;
  padding-right: 0px;
  background: white;
  border-radius: 0.25rem;
}

@media screen and (max-width: 321px) {
  .btn-af {
    font-size: 90%;
  }
}

/********** btn-hand ***************/
.btn-hand {
  padding: 5px 25px;
}

.text-user {
  width: 100%;
  word-wrap: none;
  padding: 0 2px;
}

@media screen and (max-width: 321px) {
  .btn-hand {
    font-size: 80%;
    padding: 5px 20px;
    padding-bottom: 0px;
  }

  .text-user {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 60px;
    font-size: 80%;
    padding: 0 2px;
  }
}

#contentbox {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

.box-list-jackpot {
  width: 100%;
  height: 140px;
  overflow-y: scroll;
  overflow-x: hidden;
  padding-right: 5px;
}

.btn-line {
  background: url(../images/line-contact-icon-white.png) center center no-repeat;
  background-size: cover;
  height: 32px;
  width: 32px;
  line-height: 0;
  border-radius: 5px;
  vertical-align: middle;
  margin-top: 3px;
  margin-left: 5px;
  margin-right: 5px;
}

/***********************************/

.btn:focus,
.btn.focus {
  outline: 0;
  box-shadow: 0 0 0 0rem rgba(0, 123, 255, 0.25);
}

.box__keyboard .btn-outline-primary.active,
.box__keyboard .btn-outline-primary:active {
  color: #fff;
  background-color: #b27f31;
  border-color: #b27f31;
  text-decoration: none !important;
}

.btn-outline-primary:hover {
  color: #007bff;
  background-color: unset;
  border-color: #007bff;
  text-decoration: none !important;
}

.btn-outline-primary-jubwin {
  color: #b27f31;
  background-color: unset;
  border-color: #b27f31;
  text-decoration: none !important;
}

.mobileHoverFix:hover,
.mobileHoverFix.hover {
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}

/************************************/

.spinner {
  margin: 0 auto;
  margin-top: 100px;
  width: 100px;
  height: 100px;
  text-align: center;
  font-size: 10px;
  z-index: 88;
}

.spinner > div {
  background-color: #a0171d;
  height: 100%;
  width: 10px;
  display: inline-block;
  -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
  animation: sk-stretchdelay 1.2s infinite ease-in-out;
}

.spinner .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
  margin-left: 4px;
}

.spinner .rect3 {
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
  margin-left: 4px;
}

.spinner .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
  margin-left: 4px;
}

.spinner .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
  margin-left: 4px;
}

@-webkit-keyframes sk-stretchdelay {
  0%,
  40%,
  100% {
    -webkit-transform: scaleY(0.4);
  }
  20% {
    -webkit-transform: scaleY(1);
  }
}

@keyframes sk-stretchdelay {
  0%,
  40%,
  100% {
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }
  20% {
    transform: scaleY(1);
    -webkit-transform: scaleY(1);
  }
}

/***************************/
small.smallspan {
  display: flex;
  flex-direction: column;
}

@media screen and (max-width: 575px) {
  small.smallspan {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
  }

  small.smallspan span:first-child {
    margin-right: 5px;
  }
}

@media screen and (min-width: 1012px) {
  small.smallspan {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    margin-top: 3px;
  }

  small.smallspan span:first-child {
    margin-right: 5px;
  }
}

.txt-app span {
  display: inline-block;
}

.img-app {
  width: 100%;
  max-width: 600px;
}

.bt-room input[type='radio'] {
  visibility: hidden;
  height: 0;
  width: 0;
}

.bt-room label {
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  cursor: pointer;
  background-color: #454545;
  color: white;
  /* padding: 5px 10px; */
  padding: 5px 5px;
  border-radius: 3px;
  width: 100%;
  margin-bottom: 0px !important;
}

.bt-room input[type='radio'] + .bt-room label {
  margin-bottom: 0px !important;
  display: inline-block;
}

.bt-room input[type='radio']:checked + label.bt-diamond span,
.bt-room input[type='radio']:checked + label.bt-platinum span,
.bt-room input[type='radio']:checked + label.bt-vip span {
  text-align: right;
}

.bt-room input[type='radio']:checked + label.bt-diamond span.badge,
.bt-room input[type='radio']:checked + label.bt-platinum span.badge,
.bt-room input[type='radio']:checked + label.bt-vip span.badge {
  text-align: center;
}

.bt-room input[type='radio']:checked + label.bt-diamond {
  background: url(../images/diamond-bg.gif) center center;
  text-align: right;
}

.bt-room input[type='radio']:checked + label.bt-platinum {
  background: url(../images/diamond-bg.gif) top center;
  text-align: right;
}

.bt-room input[type='radio']:checked + label.bt-vip {
  background-color: #790000;
  text-align: right;
}

.bt-room input[type='radio']:checked + label.bt-vip::after,
.bt-room input[type='radio']:checked + label.bt-diamond::after,
.bt-room input[type='radio']:checked + label.bt-platinum::after {
  content: '';
  border: none;
  background: none;
}

.bt-room input[type='radio']:checked + label.bt-vip::before {
  content: '\f587';
  font-family: 'Font Awesome 5 Pro';
  position: absolute;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  margin-top: -15px;
  margin-left: 0px;
  color: #c70039;
  background: white;
  padding: 1px;
  padding-left: 2px;
  padding-top: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  line-height: 1;
  font-weight: bold;
  font-size: 14px;
  border: #c70039 2px solid;
  /* text-align: center; */
  /* text-align: right; */
}

.bt-room input[type='radio']:checked + label.bt-diamond::before {
  content: '\f3a5';
  font-family: 'Font Awesome 5 Pro';
  position: absolute;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  margin-top: -15px;
  margin-left: 0px;
  color: #006ee3;
  background: white;
  padding: 1px;
  padding-top: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  line-height: 1;
  font-weight: bold;
  font-size: 14px;
  border: #006ee3 2px solid;
  /* text-align: center; */
  /* text-align: right; */
}

.bt-room input[type='radio']:checked + label.bt-platinum::before {
  content: '\f6cf';
  font-family: 'Font Awesome 5 Pro';
  position: absolute;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  margin-top: -15px;
  margin-left: 0px;
  color: #a000dc;
  background: white;
  padding: 1px;
  padding-top: 2px;
  padding-left: 2.5px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  line-height: 1;
  font-weight: bold;
  font-size: 14px;
  border: #a000dc 2px solid;
  /* text-align: center; */
  /* text-align: right; */
}

.videoWrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  padding-top: 25px;
  height: 0;
}

.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#accordionExample .card-header button.btn-link {
  color: darkred;
  white-space: normal;
  width: 100%;
  text-align: left;
}

#accordionExample.accordion .card-header:hover {
  background: darkred;
  color: #fff;
}

#accordionExample .card-header:hover button.btn-link {
  color: #fff;
}

.text-header {
  font-size: 2rem;
  color: #fff;
  text-align: center;
  align-self: center;
  width: 90%;
}

.text-center-form-img {
  text-align: center;
  align-self: center;
  width: 90%;
}

.btn-contactbox {
  width: 100%;
  text-align: center;
  max-height: 100px;
  height: 4.7rem;
}

.btn-contactbox i {
  font-size: 50px;
}

.btn-contactbox span {
  display: block;
}

.dd-box {
  /* width:256px; */
  width: auto;
  height: auto;
}

.dd-gold {
  /* font: bold 16px/36px sans-serif; */
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  line-height: 40px;
  text-align: center;
  /* color:#3c2e09; */
  color: lightgoldenrodyellow;
  text-shadow: 0 1px #000;
  /* text-shadow:0 1px #fe98; */
  border-radius: 4px;
  box-sizing: border-box;
  border: 1px solid #ffa3;
  background:
    radial-gradient(
      ellipse farthest-corner at right bottom,
      #fedb37 0%,
      #fdb931 8%,
      #9f7928 30%,
      #8a6e2f 40%,
      transparent 80%
    ),
    radial-gradient(
      ellipse farthest-corner at left top,
      #ffffff 0%,
      #ffffac 8%,
      #d1b464 25%,
      #5d4a1f 62.5%,
      #5d4a1f 100%
    );
  box-shadow:
    0 0 0 1px #0003,
    0 2px 2px #0003;
}

.dd-box .badge {
  text-shadow: #000 1px 1px 0px;
  background: #6a2e04;
  color: lightgoldenrodyellow;
  font-size: 100%;
  border: yellow 2px dotted;
  border-radius: 50px;
  padding-left: 20px;
  padding-right: 20px;
}

@media screen and (max-width: 766px) {
  .dd-gold {
    line-height: 24px;
    padding-top: 5px;
  }
}

h1.circular {
  -webkit-text-stroke: 1px black;
  color: white;
  text-shadow:
    3px 3px 0 #000,
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
}

.dd-gold {
  /* font: bold 16px/36px sans-serif; */
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  line-height: 40px;
  text-align: center;
  /* color:#3c2e09; */
  color: lightgoldenrodyellow;
  text-shadow: 0 1px #000;
  /* text-shadow:0 1px #fe98; */
  border-radius: 4px;
  box-sizing: border-box;
  border: 1px solid #ffa3;
  background:
    radial-gradient(
      ellipse farthest-corner at right bottom,
      #fedb37 0%,
      #fdb931 8%,
      #9f7928 30%,
      #8a6e2f 40%,
      transparent 80%
    ),
    radial-gradient(
      ellipse farthest-corner at left top,
      #ffffff 0%,
      #ffffac 8%,
      #d1b464 25%,
      #5d4a1f 62.5%,
      #5d4a1f 100%
    );
  box-shadow:
    0 0 0 1px #0003,
    0 2px 2px #0003;
}

.recommendnumber {
  display: block;
  text-align: center;
  font-size: 1.5em;
  margin: 5px auto;
  padding: 10px;
  width: 100%;
  color: #fff !important;
  text-shadow: 0px 0px 5px black;
  border-radius: 5px;
  text-decoration: none;
  border: 2px gray solid;
  height: auto;
  background-color: #e74c3c;
  position: relative;
  -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
  -webkit-animation-iteration-count: infinite; /* Safari 4.0 - 8.0 */
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  line-height: 1.2;
}

.recommendnumber span,
.recommendnumber small {
  display: inline-flex;
}

.recommendnumber:hover {
  border-color: crimson;
}

a.recomnum {
  text-decoration: none !important;
}

.returnbtn {
  display: block;
  text-align: center;
  font-size: 1.5em;
  margin: 5px auto;
  padding: 10px;
  width: 100%;
  text-decoration: none;
  border: 2px black solid;
  background: gray;
  color: white;
  line-height: 1.2;
  border-radius: 5px;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
  0% {
    background-color: #c0392b;
  }
  25% {
    background-color: #f1c40f;
  }
  50% {
    background-color: #5dade2;
  }
  75% {
    background-color: #27ae60;
  }
  100% {
    background-color: #c0392b;
  }
}

/* Standard syntax */
@keyframes example {
  0% {
    background-color: #c0392b;
  }
  25% {
    background-color: #f1c40f;
  }
  50% {
    background-color: #5dade2;
  }
  75% {
    background-color: #27ae60;
  }
  100% {
    background-color: #c0392b;
  }
}

/************ button recom ***************/
.tab-recom {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.btn-recom {
  text-align: center;
  color: white;
  margin: 2px;
  flex: 0 0 48%;
  max-width: 50%;
  position: relative;
}

.btn-recom a {
  color: white;
}

.twonum {
  border: #006ee3 2px solid;
  background: #3498db;
}

.twonum.active {
  background: #0d41ff !important;
  border: white 2px dashed !important;
}

.threenum {
  border: #c0392b 2px solid;
  background: #ec7063;
}

.threenum.active {
  background: #c0392b !important;
  border: white 2px dashed !important;
}

.livebtn {
  display: block;
  text-align: center;
  font-size: 1em;
  margin: 0px auto;
  padding: 5px;
  width: 100%;
  color: #fff !important;
  text-shadow: 0px 0px 5px black;
  border-radius: 5px;
  text-decoration: none;
  border: 1px #555 solid;
  height: auto;
  background-color: #e74c3c;
  position: relative;
  -webkit-animation-name: examplez; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
  -webkit-animation-iteration-count: infinite; /* Safari 4.0 - 8.0 */
  animation-name: examplez;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  line-height: 1;
  text-decoration: none;
}

.livebtn small {
  display: flex;
  justify-content: center;
  align-items: center;
  color: lightgoldenrodyellow;
}

.livebtn i {
  font-size: 0.9em;
  vertical-align: top;
}

.livebtn span {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: lightgoldenrodyellow;
}

.livebtn:hover {
  border-color: crimson;
  text-decoration: none !important;
}

a:hover .livebtn {
  text-decoration: none !important;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes examplez {
  0% {
    background-color: #c0392b;
  }
  50% {
    background-color: #641e16;
  }
  100% {
    background-color: #c0392b;
  }
}

/* Standard syntax */
@keyframes examplez {
  0% {
    background-color: #c0392b;
  }
  50% {
    background-color: #641e16;
  }
  100% {
    background-color: #c0392b;
  }
}

.lotto-head.lotto-vn-vip {
  background-color: rgb(150, 99, 196);
  border: rgb(109, 40, 170) 1px solid;
}

.lotto-head.lotto-vn-vip2 {
  background-color: rgb(61, 88, 196);
  border: rgb(38, 0, 232) 1px solid;
}

/* ****************************** */
.btn-outline-danger:not(:disabled):not(.disabled).active {
  color: #fff !important;
  background-color: #dc3545 !important;
  border-color: #dc3545 !important;
}

.btn-outline-danger {
  color: #dc3545 !important;
  background-color: white !important;
  background-image: none;
  border-color: #dc3545 !important;
  word-wrap: break-word;
  overflow: hidden;
}

@media screen and (max-width: 320px) {
  .btn-af.btn-outline-danger {
    font-size: 80%;
  }
}

.btn-outline-danger:hover {
  color: white !important;
  background-color: #dc3545 !important;
  background-image: none;
  border-color: #dc3545 !important;
}

.page-link:hover {
  z-index: 2;
  color: #dca235;
  text-decoration: none;
  background-color: #e9ecef;
  border-color: #dee2e6;
}

.page-link {
  z-index: 2;
  color: #333;
  text-decoration: none;
}

.btn-rood {
  padding: 5px;
  border-radius: 0;
  border-right: 0;
  width: 100%;
}

.btn-group-toggle:last-child > .btn-rood {
  border-right: solid 1px;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}

.btn-group-toggle:first-child > .btn-rood {
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}

.txt-num {
  /* font-family: "Mitr", cursive; */
}

.btn-group-toggle > .btn-outline-danger.focus,
.btn-group-toggle > .btn-outline-danger:hover {
  background: none !important;
  color: var(--text-primary-color) !important;
}

.btn-group-toggle > .btn-outline-danger.focus.active,
.btn-group-toggle > .btn-outline-danger.active {
  color: white !important;
  background: var(--bg-primary-color) !important;
}

.btn-closenum {
  /* border: #dc3545 1px solid;
    color: #dc3545; */
  border: #5a5959 1px solid;
  color: #5a5959;
  font-weight: bold;
}

.btn-group-toggle > .btn-closenum.focus,
.btn-group-toggle > .btn-closenum:hover {
  background: none !important;
  /* color: #dc3545 !important; */
  color: #383737 !important;
}

.btn-group-toggle > .btn-closenum.focus.active,
.btn-group-toggle > .btn-closenum.active {
  color: white !important;
  /* background: #dc3545 !important; */
  background: #383737 !important;
}

.btn-limitnum {
  border: #ffcc00 1px solid;
  color: #ffcc00;
  font-weight: bold;
}

.border-active .bg-danger {
  background-color: rgba(255, 255, 255, 1) !important;
  border-radius: 3px;
  color: var(--text-primary-color) !important;
}

.bglogin {
  /* background: #e8e8e8;
    border-radius: 5px;
    border: #790000 2px solid;
    border-bottom: none;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    box-shadow: #d53529 0 0 3px;
    margin-top: 10px; */
  background: #e8e8e8;
  border-radius: 5px;
  border: var(--border-primary-color) 2px solid;
  border-bottom: none;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  box-shadow: var(--bg-primary-color) 0 0 3px;
  margin-top: 10px;
}

.subbglogin {
  /* background: var(--bg-primary-color);
    border-radius: 5px;
    border: #790000 2px solid;
    border-top: #790000 1px solid;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    box-shadow: #d53529 0 0 3px;
    margin-bottom: 10px;
    vertical-align: middle; */
  background: #e8e8e8;
  border-radius: 5px;
  border: var(--border-primary-color) 2px solid;
  border-top: var(--border-primary-color) 1px solid;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  box-shadow: var(--bg-primary-color) 0 0 3px;
  margin-bottom: 10px;
  vertical-align: middle;
}

.subbglogin .rule a {
  color: var(--link-text-color);
  text-decoration: underline;
  line-height: 30px;
}

.subbglogin .rule a:hover {
  color: var(--link-hover-text-color);
  /* text-shadow: var(--link-hover-text-color) 1px 1px 0px; */
}

.subbglogin .rule {
  text-align: right;
}

.subbglogin .submenulogin {
  text-align: right;
}

.subbglogin .submenulogin .btoutline {
  background: white;
  border-radius: 5px;
}

.form-middle {
  vertical-align: middle;
  font-size: 12px;
  line-height: 10px;
}

.form-middle label {
  font-size: 13px;
  vertical-align: -webkit-baseline-middle;
  /*font-family: tahoma;*/
  /* font-family: Mitr; */
  line-height: 0px;
}

.form-middle .remember {
  text-align: right;
  color: #051f34;
  line-height: 20px;
  margin-bottom: 2px;
  /*text-shadow: #dbf7ff 1px 1px 0px;*/
}

.form-middle .forgot {
  font-size: 13px;
  text-align: right;
  /*font-family: tahoma;*/
  /* font-family: Mitr; */
  line-height: 0px;
  margin-top: -5px;
}

.form-middle .forgot a {
  color: var(--text-primary-color);
  /* text-shadow: #07396f 1px 1px 0px; */
  text-decoration: none;
}

.form-middle .forgot a:hover {
  color: #051f34;
  text-shadow: #dbf7ff 1px 1px 0px;
}

footer.bg-danger div.footer-copyright a:hover {
  color: #fff;
  text-decoration: none;
}

footer.bg-danger div.footer-copyright div.footer-text {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.page-footer,
footer.bg-danger div.footer-copyright {
  color: #fff;
  height: 100%;
  font-size: 26px !important;
  vertical-align: middle;
  background: transparent linear-gradient(180deg, #025e09 0%, #22742c 50%, #025e09 100%) 0% 0%
    no-repeat padding-box;
}

#footer-member.bg-danger div.footer-copyright a {
  color: var(--text-on-bg-secondary-color);
  text-decoration: none;
}

#footer-member.bg-danger div.footer-copyright a:hover {
  color: var(--border-secondary-color);
  text-decoration: none;
}

#footer-member.bg-danger div.footer-copyright {
  color: var(--text-on-bg-secondary-color);
  text-shadow: 1px 1px 0 #000;
  font-size: 26px !important;
}

#footer-member.bg-danger {
  background: #101010 !important;
}

@media (hover: none) {
  body {
    background-attachment: initial;
  }
}

@media screen and (max-width: 768px) {
  .form-middle {
    background: url(../custom/login-bg.jpg) no-repeat center;
    background-size: cover;
  }
  .indexlogo {
    text-align: center;
    margin-bottom: 24px;
  }

  .form-middle .remember {
    text-align: left;
    line-height: 12px;
    vertical-align: middle;
  }

  .form-middle label {
    font-size: 14px;
  }

  .form-middle .forgot {
    line-height: 20px;
    font-size: 14px;
    margin-top: 0;
  }

  .subbglogin .rule {
    text-align: center;
  }
}

@media (min-width: 576px) {
  .bgwhitealpha .card-columns {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 0.5em !important;
    -moz-column-gap: 0.5em !important;
    column-gap: 0.5em !important;
    orphans: 1;
    widows: 1;
  }

  /* .bgwhitealpha .sub-card-header {
    font-family: "NotosansThai", sans-serif !important;
  } */
}

@media (min-width: 768px) {
  .bgwhitealpha .card-columns {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
    -webkit-column-gap: 0.5em !important;
    -moz-column-gap: 0.5em !important;
    column-gap: 0.5em !important;
    orphans: 1;
    widows: 1;
  }

  /* .bgwhitealpha .sub-card-header {
    font-family: "Mitr", sans-serif !important;
  } */
}

/************* button-select-category ***********/

.button-select-category .dropdown-menu .dropdown-item {
  padding: 5px 10px;
  border-top: 1px solid #d7eff3;
}

.button-select-category .dropdown-menu .dropdown-item:first-child {
  border-top: 1px solid white;
}

.dropdown-menu.dropdown-menu-app-hg {
  background: #16324e 0% 0% no-repeat padding-box;
  border-radius: 10px;
  max-height: 95vh;
  overflow-y: scroll;
  max-width: min-content;
}

#dismiss:hover {
  color: white;
}

.col-27p {
  position: relative;
  width: 100%;
  min-height: 1px;
  flex: 0 0 27%;
  max-width: 27%;
}

.dropdown-menu {
  width: 15rem !important;
  background-color: #c6b200;
}

.dropdown-menu.show {
  max-height: 1000px !important;
}

.side-line-bg {
  box-shadow:
    inset 0px 3px 6px #00000029,
    0px 3px 3px #00000029;
  border-radius: 5px;
  background: #3c4240 0% 0% no-repeat padding-box;
}

.side-line-style {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: white;
}

.dropdown-menu.dropdown-menu-app-hg::-webkit-scrollbar {
  display: none;
}

.dropdown-item:hover {
  background-color: #cc682e;
}

.dropdown-menu.dropdown-menu-white {
  background: white !important;
}

.button-select-category .dropdown-toggle::before,
.button-select-category .dropdown-toggle::after {
  /* display: none;  */
  visibility: hidden;
  opacity: 0;
  transition:
    visibility 0s,
    opacity 0.5s linear;
}

.button-select-category {
  /* display: none; */

  visibility: hidden;
  opacity: 0;
  transition:
    visibility 0s,
    opacity 0.5s linear;

  position: fixed;
  right: 10px;
  bottom: 70px;
  z-index: 15;
  text-align: center;

  position: fixed;
  right: 10px;
  bottom: 10px;
  z-index: 15;
  text-align: center;
}

.button-select-category i.fa-times {
  display: none;
  font-style: normal;
}

.button-select-category a {
  color: black !important;
  display: block;
  cursor: pointer;
  font-size: 14px;
}

.button-select-category a.text-dark {
  color: var(--text-on-bg-primary-color) !important;
  background: var(--bg-primary-color) !important;
  display: block;
  cursor: pointer;
  font-size: 14px;
}

.button-select-category a.text-dark:active {
  color: var(--text-on-bg-primary-color) !important;
  background: var(--bg-primary-color) !important;
  display: block;
  cursor: pointer;
  font-size: 14px;
}

.button-select-category a:active {
  color: var(--text-on-bg-primary-color) !important;
  background: var(--bg-primary-color) !important;
  display: block;
  cursor: pointer;
  font-size: 14px;
}

.button-select-category.show i.fa-times {
  display: block;
}

.button-select-category.show i.fa-search {
  display: none;
}

.button-select-category button {
  width: 47px;
  height: 47px;
  line-height: 24px;
  padding: 9px 10px;
  text-align: center;
  color: var(--text-primary-color);
  border-radius: 47px;
  background-color: #fff;
  border: 3px solid var(--border-primary-color);
  -webkit-box-shadow: 0 2px 2px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 2px 2px rgba(0, 0, 0, 0.2);
}

.button-select-category button i {
  /* color: #fff; */
  color: var(--text-primary-color);
  font-size: 24px;
  vertical-align: middle;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .button-select-category button {
    margin-bottom: 60px;
  }
}

/************* end button-select-category ***********/

/********************** carousel slide ****************/

.carousel-inner {
  height: auto;
  width: 100%;
}

/* Count nav-pills */
.nav-slide {
  position: relative;
  right: 0;
  bottom: 0;
  left: 0;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  padding-left: 0;
  margin-right: 0;
  margin-left: 0;
  list-style: none;
}

.nav-slide {
  width: 100%;
  counter-reset: number;
}

.nav-slide > li > span:before {
  content: counter(number);
  counter-increment: number;
  display: inline-block;
}

#nav1.nav-slide > li > span:before {
  content: counter(number);
  counter-increment: none;
  display: inline-block;
  visibility: hidden;
}

#nav1.nav-slide > li > .flag-icon {
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
  vertical-align: middle;
  float: left;
  margin-left: 5px !important;
  margin-top: 3px !important;
}

.card-header .flag-icon {
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
  vertical-align: middle;
  float: left;
  margin-left: 5px !important;
  margin-top: 3px !important;
}

.card--theme-header .flag-icon {
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
  vertical-align: middle;
  float: left;
  margin-left: 5px !important;
  margin-top: 3px !important;
}

.nav-slide .active {
  background-color: #fff;
  -webkit-box-shadow: inset 0px 0px 0px 2px var(--bg-primary-color);
  -moz-box-shadow: inset 0px 0px 0px 2px var(--bg-primary-color);
  box-shadow: inset 0px 0px 0px 2px var(--bg-primary-color);
}

.nav-slide li {
  position: relative;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
  width: auto !important;
  height: auto !important;
  padding: 5px;
  text-align: center;
  margin-right: 2px;
  margin-left: 2px;
  margin-bottom: 3px;
  text-indent: 0px !important;
  cursor: pointer;
}

.nav-slide-yeekee li {
  position: relative;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
  width: auto !important;
  min-width: 30px;
  height: auto !important;
  padding: 5px;
  text-align: center;
  margin-right: 2px;
  margin-left: 2px;
  margin-bottom: 3px;
  text-indent: 0px !important;
  cursor: pointer;
}

.nav-slide-yeekee {
  width: 100%;
  flex-wrap: wrap;
  position: relative;
  right: 0;
  bottom: 0;
  left: 0;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  padding-left: 0;
  margin-right: 0;
  margin-left: 0;
  list-style: none;
}

.nav-slide-yeekee {
  width: 100%;
  counter-reset: number;
}

.nav-slide-yeekee > li > span:before {
  content: counter(number);
  counter-increment: number;
  display: inline-block;
}

.nav-slide-yeekee .active {
  background-color: #fff;
  -webkit-box-shadow: inset 0px 0px 0px 2px var(--bg-primary-color);
  -moz-box-shadow: inset 0px 0px 0px 2px var(--bg-primary-color);
  box-shadow: inset 0px 0px 0px 2px var(--bg-primary-color);
  font-weight: bold;
}

/************************/
.nav-slide li,
.nav-slide-yeekee li {
  background-color: rgba(255, 255, 255, 0.5);
  font-size: 16px !important;
  color: var(--text-primary-color) !important;
  text-shadow: #fff 1px 1px 0px;
}

/************************/
.border-active .nav-slide .active,
.border-active .nav-slide-yeekee .active {
  background-color: #fff;
  -webkit-box-shadow: inset 0px 0px 0px 2px #d53529;
  -moz-box-shadow: inset 0px 0px 0px 2px #d53529;
  box-shadow: inset 0px 0px 0px 2px #d53529;
}

.border-active .nav-slide li,
.border-active .nav-slide-yeekee li {
  color: white !important;
  text-shadow: black 1px 1px 0px;
  background-color: rgba(0, 0, 0, 0.5);
}

.border-active .nav-slide li.active,
.border-active .nav-slide-yeekee li.active {
  color: #790000 !important;
  text-shadow: #fff 1px 1px 0px;
  background-color: #fff;
}

/*************************/

.carousel-view ol {
  margin-top: 0;
  margin-bottom: 0rem;
}

.carousel-view {
  display: none;
  margin-bottom: 0rem;
  position: relative;
}

@media screen and (max-width: 768px) {
  .carousel-view {
    display: block;
  }

  .pc-view {
    display: none !important;
  }

  .nav-slide li {
    position: relative;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    /* display: inline-block; */
    /* width: 24% !important; */
    /* width: 32.4% !important; */
    width: 47.5% !important;
    height: auto !important;
    padding: 3px 0;
    text-align: center;
    vertical-align: top;
    margin-right: 1.5px;
    margin-left: 1.5px;
    text-indent: 0px !important;
  }

  .nav-slide {
    position: relative;
    flex-wrap: wrap;
    right: 0;
    bottom: 0;
    left: 0;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    /* display: inline-block; */
    padding-left: 0;
    margin-right: 0;
    margin-left: 0;
    list-style: none;
  }

  .nav-slide-yeekee li {
    position: relative;
    -ms-flex: none;
    flex: none;
    /* display: inline-block; */
    width: 11.3% !important;
    height: auto !important;
    padding: 3px 0;
    text-align: center;
    vertical-align: top;
    margin-right: 1.5px;
    margin-left: 1.5px;
    margin-bottom: 3px;
    text-indent: 0px;
  }

  .nav-slide-yeekee {
    position: relative;
    right: 0;
    bottom: 0;
    left: 0;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    /* display: inline-block; */
    padding-left: 0;
    margin-right: 0;
    margin-left: 0;
    list-style: none;
  }

  .nav-slide li,
  .nav-slide-yeekee li {
    cursor: pointer;
    background-color: rgba(45, 28, 75, 0.2);
    font-size: 14px;
    font-weight: 400;
    text-shadow: none;
    border-radius: 2px;
  }
}

@media screen and (max-width: 321px) {
  .nav-slide li {
    width: 32% !important;
    font-size: 11.5px;
  }
}

/********************** end carousel slide ****************/

/********* end index **********/

/********* member ************/

.botnavbar {
  width: 100%;
  height: auto;
  /*background: #b90504;
    color: white;*/
  /* background: #f8f9fa; */
  /* background:#ccc; */
  background: #ececec;
  /* border-top: 1px #fcfcfc solid; */
  /* padding: 8px 0; */
}

.botnavbar.fixed-bottom {
  z-index: 998;
}

.memberlogo {
  width: auto;
  text-align: left;
}

.pc-view .bootstrap-select,
.mobile-view .bootstrap-select {
  background: transparent;
  height: auto;
}

a.menu-grid:hover,
a.menu-grid:active {
  color: var(--border-primary-color);

  background: #eee;
  border: 1px solid #e5e5e5;
}

.row .col-3 a.menu-grid,
.row .col-md-1 a.menu-grid,
.row .col-lg-1 a.menu-grid {
  padding: 0px;
  padding-top: 10px;
  padding-bottom: 8px;
  width: 100%;
  font-size: 14px;
  min-width: 50px;
  line-height: 1.5;
}

.row .col-4 .menu-grid i.sn-icon,
.row .col-md-1 .menu-grid i.sn-icon {
  font-size: 35px !important;
  line-height: 0.9 !important;
}

a.menu-grid.powerball {
  line-height: 1.2 !important;
}

.menu-grid.menu-money {
  background: var(--bg-dark-color);
  color: var(--text-on-bg-primary-color);
  text-shadow: var(--border-dark-color) 1px 1px 0;
  border-radius: 0px;
  box-shadow: inset 10px -0px 0px var(--border-primary-color);
  min-height: 60px;
  padding: 15px;
  padding-right: 5px;
}

.menu-grid.menu-money i {
  color: var(--text-primary-color);
  text-shadow: #222 1px 1px 0;
}

.menu-grid.menu-money:hover,
.menu-grid.menu-money:active {
  background: var(--border-dark-color);
  color: var(--text-on-bg-dark-color);
  text-shadow: var(--border-dark-color) 1px 1px 0;
  border-radius: 0px;
  box-shadow: inset 10px -0px 0px var(--bg-primary-color);
}

.menu-grid.menu-money:hover i,
.menu-grid.menu-money:active i {
  color: var(--bg-primary-color);
  text-shadow: var(--border-dark-color) 1px 1px 0;
}

.lotto-head span {
  font-weight: 400;
}

.ribbon-lotto span.round {
  font-size: 12px;
  line-height: 10px;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  background: rgba(0, 0, 0, 0.5);
  color: rgba(255, 255, 255, 0.8);
  border-radius: 2px;
  padding: 1px 2px;
  padding-bottom: 3px;
  margin-top: -2px;
  margin-right: 2px;
  /* font-family: tahoma; */
  transform: scaleX(0.9);
}

.lotto-head.lotto-foreignstock {
  background-color: #6610f2;
  border: #4f06c5 1px solid;
}

.lotto-head.lotto-yeekee {
  /* background-color: #dc3545; */
  /* border: #aa1423 1px solid; */
  display: flex;
  flex-direction: column;
}

/* .lotto-head.lotto-jetsadabet {
    background-color: #fd7e14;
    border: #c45b06 1px solid;
}

.lotto-head.lotto-jetsadavip {
    background-color: #e83e8c;
    border: #b1185f 1px solid;
} */

.lotto-head.lotto-la {
  background-color: #fd7e14;
  border: #c45b06 1px solid;
}

.lotto-head.lotto-vn {
  background-color: #e83e8c;
  border: #b1185f 1px solid;
}

.lotto-head.lotto-my {
  background-color: #28a745;
  border: #1c8b36 1px solid;
}

.lotto-head.lotto-sg {
  background-color: #65b1c4;
  border: #5996a5 1px solid;
}

.lotto-head.lotto-gsb {
  background-color: #f90a86;
  border: #ff1d92 1px solid;
}

.ribbon-lotto-img {
  display: inline-block;
  /* position: absolute; */
  color: #fff;
  line-height: 20px;
  padding: 0px 5px;
  margin-top: 5px;
}

.ribbon-lotto-img img {
  height: 50px;
}

.ribbon-lotto-img span {
  height: 50px;
  font-size: 50px;
  background-size: cover;
  margin-left: -5px;
}

@media screen and (max-width: 420px) {
  .ribbon-lotto-img {
    display: inline-block;
    /* position: absolute; */
    color: #fff;
    line-height: 20px;
    padding: 0px 5px;
    margin-top: 5px;
  }

  .ribbon-lotto-img img {
    height: 40px !important;
  }

  .ribbon-lotto-img span {
    height: 40px;
    font-size: 40px !important;
    background-size: cover;
  }
}

.lotto-head.lotto-baac {
  background-color: #13007d;
  border: #0e005c 1px solid;
}

.tanghuay-time_day {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 5px;
  padding-bottom: 0px;
  background: rgba(0, 0, 0, 0.1);
  border: #ccc 1px solid;
  text-align: right;
  font-size: 15px;
  line-height: 20px;
  /* color: #dc3545; */
  color: var(--border-primary-color);
  text-shadow: var(--text-on-bg-primary-color) 1px 1px 0;
  border-radius: 5px;
  overflow: hidden;
}

.lotto-time span {
  font-size: 80%;
}

@media screen and (max-width: 413px) {
  .lotto-time span {
    font-size: 70%;
  }
}

.tanghuay-time i {
  margin-right: 5px;
  display: inline-flex;
}

.tanghuay-time ul li span {
  font-weight: bold !important;
}

.tanghuay-time ul li.seperator {
  font-weight: bold !important;
}

.tanghuay-time_day i {
  margin-right: 5px;
  display: inline-flex;
}

.tanghuay-time_day ul li span {
  font-weight: bold !important;
}

.tanghuay-time_day ul li.seperator {
  font-weight: bold !important;
}

@media screen and (max-width: 376px) {
  .tanghuay-time i {
    display: none;
  }

  .tanghuay-time span {
    font-size: 75%;
  }
}

@media screen and (max-width: 321px) {
  .tanghuay-time span {
    font-size: 75%;
  }
}

@media screen and (max-width: 321px) {
  .tanghuay-time_day i {
    display: none;
  }

  .tanghuay-time_day {
    font-size: 10px;
  }

  .tanghuay-h4 {
    font-size: 80%;
  }
}

@media screen and (min-width: 321px) and (max-width: 430px) {
  .tanghuay-time_day i {
    display: none;
  }

  .tanghuay-time_day {
    font-size: 15px;
  }

  .tanghuay-h4 {
    font-size: 100%;
  }
}

@media only screen and (min-width: 480px) {
  .tanghuay-time_day {
    font-size: 20px;
  }
}

.bar-back {
  line-height: 20px;
  padding: 10px;
  background: white;
  font-size: 20px;
  border-radius: 10px 10px 0px 0px;
}

.bar-back-custom {
  padding: 2px;
}

.bar-back a {
  color: #aaa;
  text-decoration: none;
}

.bar-back a.btn {
  color: white;
}

.bar-back a.btn:hover,
.bar-back a.btn:focus {
  color: white;
}

.bar-back a.btn-outline-secondary {
  color: #555;
}

.bar-back a.btn-outline-secondary:hover,
.bar-back a.btn-outline-secondary:focus {
  color: #fff;
}

.bar-back a:hover,
.bar-back a:focus {
  color: var(--text-primary-color);
}

.col-lotto .row .col-6,
.col-lotto .row .col-4,
.col-lotto .row .col-3 {
  margin-bottom: 5px;
  padding: 0 5px;
}

/* .col-lotto .row .col-4 .btn,.col-lotto .row .col-6 .btn{
    line-height: 1.2;
    overflow: hidden;
} */
.col-lotto .bg-btn {
  background: white;
  border-radius: 5px;
  border: 1px solid white;
  box-shadow: rgba(255, 255, 255, 0.5) 0 0 3px;
  width: auto;
}

.flex-fill .bg-btn {
  margin: 2.5px;
}

.btn-tanghuay {
  line-height: 1;
}

.row-btn-tanghuay .btn span {
  /* font-family: Arial, Helvetica, sans-serif; */
  /* font-weight: 400; */
}

.row-btn-tanghuay .btn div:first-child i {
  font-size: 1.3rem;
  font-style: normal;
  text-align: center;
}

.reward-jubwin-badge {
  font-size: 1.3rem;
}

@media screen and (max-width: 768px) {
  .row-btn-tanghuay .btn div:first-child i {
    font-size: 1rem;
  }

  .reward-jubwin-badge {
    font-size: 1rem;
  }
}

@media (min-width: 640px) {
  .row-btn-tanghuay .btn div:first-child i {
    font-size: 22px;
  }
}

.fill-price-equal,
.search-name-poy {
  font-size: 1rem !important;
  height: 100% !important;
}

@media screen and (max-width: 768px) {
  .row-btn-tanghuay .btn div:last-child {
    width: 31%;
  }

  .fill-price-equal,
  .search-name-poy {
    font-size: 0.875rem !important;
    height: 100% !important;
  }
}

.btn-outline-red.active {
  color: #fff;
  background-color: #dc3545;
  border-color: #dc3545;
}

.btn-outline-green {
  color: #28a745;
  /* background-color: transparent; */
  background-color: rgba(0, 255, 106, 0.1);
  background-image: none;
  border-color: #28a745;
}

#hide-list-huay,
#show-list-huay {
  overflow: hidden;
  width: 50%;
  margin-bottom: 2px;
}

@media screen and (max-width: 767px) {
  #hide-list-huay,
  #show-list-huay {
    overflow: hidden;
    width: 100%;
    margin-bottom: 2px;
  }
}

#hide-list-huay {
  transition: all 1s;
}

#show-list-huay {
  transition: all 1s;
}

span.btn-move {
  display: inline-flex;
  width: 100%;
  text-align: center;
  overflow: hidden;
  height: 100%;
  transition: all 1s;
  vertical-align: middle;
  margin-bottom: 0px;
  margin-right: 2px;
  white-space: nowrap;
}

.btn-move-right {
  color: #fff !important;
  background: transparent linear-gradient(180deg, #c78d36 0%, #f4d751 100%) 0% 0% no-repeat
    padding-box;
  margin-right: 15px !important;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}

.btn-move-right:after {
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 15px solid #d8aa40;
  margin-right: -15px;
}

.sidebar-tanghuay {
  width: 100%;
  padding-left: 7px;
}

#show_poy_list {
  opacity: 1;
  width: 55%;
  transition: all 1s;
}

#numpage_2 h3.mb-0 {
  font-family: inherit;
  font-size: 125%;
}

#numpage_1,
#numpage_2 {
  transition: all 1s;
}

.sidebar-huay .btn {
  margin-bottom: -5px;
}

.sidebar-huay .title-huay {
  color: var(--text-on-bg-dark-color);
  font-family: inherit;
  /* background: #790000; */
  height: 25px;
  line-height: 1;
  width: 100%;
  padding-left: 5px;
  border-bottom: #333 1px dashed;
}

.sidebar-huay .title-huay i {
  font-size: 1.3rem;
}

ol.num-huay li {
  counter-increment: number;
}

.list-huay::-webkit-scrollbar {
  width: 8px;
  background: transparent;
  margin-left: 3px;
}

.num-pad {
  width: 100%;
}

.label-number {
  text-align: center;
  width: 100%;
}

.key-pad > .row > .col-3 .btn-reset,
.key-pad > .row > .col-3 .btn-cancel {
  /* font-size: 16px; */
  font-size: 1.1rem;
  line-height: 1;
  height: 100%;
  word-break: break-all;
}

.box__condition-info {
  background: #ead0ae 0% 0% no-repeat padding-box;
  border-radius: 5px;
  padding: 5px;
  line-height: 1.2;
}

.box__condition-info p {
  padding: 0 5px;
  margin-bottom: 0px;
  color: #022223;
}

.bet_num_count {
  font-size: 90%;
  text-align: center;
  line-height: 1;
  margin-bottom: 5px;
  font-weight: 500;
  text-shadow: #000 1px 1px 0px;
  color: #fff;
}

.g3-huay {
  width: auto !important;
}

@keyframes blink {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@media screen and (max-width: 992px) {
  .sidebar-huay {
    width: auto;
    /* min-width: 300px; */
    min-width: 20%;
    height: 100vmin;
  }
}

@media screen and (max-width: 768px) {
  .g3-huay {
    width: 100% !important;
  }

  .sidebar-tanghuay > .d-flex > .flex-fill {
    display: inline-flex;
    flex: 1 0 26% !important;
  }

  .sidebar-huay .title-huay {
    font-size: 1.2rem;
    height: 20px;
  }

  .sidebar-huay .title-huay i {
    font-size: 1.3rem !important;
  }

  .sidebar-huay {
    width: auto;
    min-width: 20%;
  }

  #show_poy_list {
    opacity: 1;
    width: 48%;
    transition: all 1s;
  }
}

@media screen and (max-width: 415px) {
  .sidebar-huay {
    width: auto;
    min-width: 80px;
    height: 100%;
  }

  .sidebar-huay .title-huay {
    font-size: 14px;
  }

  .key-pad > .row > .col-3 .btn-reset,
  .key-pad > .row > .col-3 .btn-cancel {
    font-size: 14px;
    line-height: 1;
    height: 100%;
    word-break: break-all;
  }
}

@media screen and (max-width: 376px) {
  .btn-tanghuay {
    font-size: 10px;
  }

  .row .col-3 a.menu-grid,
  .row .col-md-1 a.menu-grid,
  .row .col-lg-1 a.menu-grid,
  .row .col-4 a.menu-grid {
    padding: 0px;
    padding-top: 10px;
    padding-bottom: 8px;
    width: 100%;
    font-size: 16px;
    min-width: 50px;
    line-height: 1.5;
  }

  .sidebar-huay {
    height: 100%;
  }

  .key-pad > .row > .col-3 .btn-reset,
  .key-pad > .row > .col-3 .btn-cancel {
    font-size: 16px;
    line-height: 1;
    height: 100%;
  }
}

/**********************************************/
.txt-24 {
  color: #15c296;
  animation: 3s linear infinite;
  display: flex;
  display: -webkit-flex;
  width: 100%;
  flex-direction: row;
  -webkit-justify-content: center;
  justify-content: space-between;
}

.txt-24-yk {
  color: #15c296;
  animation: text-flicker 3s linear infinite;
  display: flex;
  display: -webkit-flex;
  width: 100%;
  flex-direction: row;
  justify-content: center;
  font-size: 1.4rem;
}

.txt-yk-page {
  color: #07b507;
  display: flex;
  display: -webkit-flex;
  width: 100%;
  flex-direction: row;
  justify-content: center;
}

.fa-backspace-size {
  font-size: xx-large;
}

@media screen and (max-width: 768px) {
  .fa-backspace-size {
    font-size: initial;
  }

  .txt-24 {
    justify-content: space-evenly;
  }
}

#offset {
  animation: 2s linear infinite;
}

@keyframes text-flicker {
  0% {
    opacity: 0.1;
    /*text-shadow: 0px 0px 29px rgba(22, 242, 59, 1);*/
  }

  2% {
    opacity: 1;
    /*text-shadow: 0px 0px 29px rgba(22, 242, 59, 1);*/
  }

  8% {
    opacity: 0.1;
    /*text-shadow: 0px 0px 29px rgba(22, 242, 59, 1);*/
  }

  9% {
    opacity: 1;
    /*text-shadow: 0px 0px 29px rgba(22, 242, 59, 1);*/
  }

  12% {
    opacity: 0.1;
    /*text-shadow: 0px 0px rgba(22, 242, 59, 1);*/
  }

  20% {
    opacity: 1;
    /*text-shadow: 0px 0px 29px rgba(22, 242, 59, 1);*/
  }

  25% {
    opacity: 0.3;
    /*text-shadow: 0px 0px 29px rgba(22, 242, 59, 1);*/
  }

  30% {
    opacity: 1;
    /*text-shadow: 0px 0px 29px rgba(22, 242, 59, 1);*/
  }

  70% {
    opacity: 0.7;
    /*text-shadow: 0px 0px 29px rgba(22, 242, 59, 1);*/
  }

  72% {
    opacity: 0.2;
    text-shadow: 0px 0px 29px rgba(22, 242, 59, 1);
  }

  77% {
    opacity: 0.9;
    text-shadow: 0px 0px 29px rgba(22, 242, 59, 1);
  }

  100% {
    opacity: 0.9;
    text-shadow: 0px 0px 29px rgba(22, 242, 59, 1);
  }
}

@keyframes border-flicker {
  0% {
    opacity: 0.1;
    -webkit-box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73);
    -moz-box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73);
    box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73);
  }

  2% {
    opacity: 1;
    -webkit-box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73);
    -moz-box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73);
    box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73);
  }

  4% {
    opacity: 0.1;
    -webkit-box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73);
    -moz-box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73);
    box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73);
  }

  8% {
    opacity: 1;
    -webkit-box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73);
    -moz-box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73);
    box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73);
  }

  70% {
    opacity: 0.7;
    -webkit-box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73);
    -moz-box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73);
    box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73);
  }

  100% {
    opacity: 1;
    -webkit-box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73);
    -moz-box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73);
    box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73);
  }
}

@keyframes letter-flicker {
  0% {
    opacity: 0.1;
    text-shadow: 0px 0px 29px rgba(22, 242, 59, 1);
  }

  2% {
    opacity: 0.1;
    text-shadow: 0px 0px 29px rgba(22, 242, 59, 1);
  }

  4% {
    opacity: 1;
    text-shadow: 0px 0px 29px rgba(22, 242, 59, 1);
  }

  19% {
    opacity: 1;
    text-shadow: 0px 0px 29px rgba(22, 242, 59, 1);
  }

  21% {
    opacity: 0.1;
    text-shadow: 0px 0px 29px rgba(22, 242, 59, 1);
  }

  23% {
    opacity: 1;
    text-shadow: 0px 0px 29px rgba(22, 242, 59, 1);
  }

  80% {
    opacity: 1;
    text-shadow: 0px 0px 29px rgba(22, 242, 59, 1);
  }

  83% {
    opacity: 0.4;
    text-shadow: 0px 0px 29px rgba(22, 242, 59, 1);
  }

  87% {
    opacity: 1;
    text-shadow: 0px 0px 29px rgba(22, 242, 59, 1);
  }
}

.js-odoo {
  text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
  fill: #fff;
  transform: scaleX(0.85);
}

span.js-odoo g {
  font-weight: 300;
  /* font-family: "Mitr", sans-serif; */
}

span.js-odoo g text {
  margin-right: 10px;
}

.js-odoo svg {
  transform: scaleX(0.85);
}

/* ---------------------------------------------------
    CONTENT STYLE
----------------------------------------------------- */

#content {
  width: 100%;
  padding: 0px;
  min-height: 100vh;
  transition: all 0.3s;
  position: absolute;
  top: 0;
  right: 0;
  /* padding-bottom: 56px; */
}

/* #firsttime label::before, #secondtime label::before{
    content:"\f22d";
    font-family: "Font Awesome 5 Pro";
    position: relative;
    margin-right: 5px;
} */

input[type='radio']:checked + label > img {
  border: 1px solid #fff;
  box-shadow: 0 0 3px 3px #090;
}

input[type='radio']:checked + label {
  background: #090;
  color: white;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

input[type='radio'] + label {
  margin-bottom: 15px !important;
}

input[type='radio'] + label > span.badge {
  margin: 0 5px 5px 5px;
}

input[type='radio'] + label::before {
  content: '';
  display: none;
}

/* Stuff after this is only to make things more pretty */
input[type='radio'] + label > img {
  border: 1px solid #444;
  width: 100%;
  transition: 500ms all;
}

input[type='radio']:checked + label > img {
  transform: none;
  /* rotateZ(-10deg)
      rotateX(10deg); */
}

.dataTables_wrapper > .row {
  width: 100%;
}

.dataTables_wrapper > .row > .col-sm-12 {
  padding: 0 5px;
}

.dataTables_length label {
  display: inline-block;
  margin-bottom: 5px;
  width: auto;
}

.dataTables_length label span {
  display: inline-block;
  line-height: 1;
  vertical-align: middle;
  font-size: 90%;
}

.dataTables_filter label {
  display: inline-block;
  margin-bottom: 5px;
  width: auto;
}

.datatable th.datetime {
  width: 25%;
  text-align: center;
}

.datatable th.datetime span {
  display: inline-block;
}

.datatable th.option {
  width: 8%;
  text-align: center;
}

.datatable th.totalbet {
  width: 15%;
  text-align: center;
}

.datatable th.totalbet span {
  display: inline-block;
}

.datatable th,
.datatable td {
  vertical-align: middle !important;
}

.datatable th:first-child,
.datatable td:first-child {
  padding-left: 10px;
}

.dataTables_paginate .page-item.active .page-link {
  z-index: 1;
  color: #fff;
  background-color: #dc3545;
  border-color: #dc3545;
}

@media screen and (max-width: 768px) {
  .toacc {
    margin-top: -40px;
  }

  .datatable th,
  .datatable td,
  .datatable .btn i {
    font-size: 16px;
  }

  .datatable .btn {
    padding: 0px 5px;
  }

  .dataTables_filter label input {
    width: 100% !important;
  }

  .dataTables_filter label {
    padding-right: 5px !important;
  }

  .dataTables_length {
    text-align: left !important;
  }

  .dataTables_length label {
    padding-left: 5px !important;
    vertical-align: middle;
  }

  div.dataTables_wrapper div.dataTables_paginate ul.pagination {
    margin: 2px 0;
    white-space: nowrap;
    justify-content: center;
  }

  .datatable th.datetime {
    width: 33%;
  }

  .datatable th.option {
    width: 10%;
  }

  .datatable th.totalbet {
    width: 25%;
  }
}

ol.list-numsets {
  list-style: none;
  counter-reset: my-awesome-counter;
}

ol.list-numsets li {
  counter-increment: my-awesome-counter;
  position: relative;
}

ol.list-numsets li::before {
  position: absolute;
  content: counter(my-awesome-counter) '. ';
  background: #d6d8db;
  padding: 2px 5px;
  border-radius: 3px;
  font-weight: bold;
  margin-left: -60px;
  min-width: 50px;
  text-align: center;
}

/************ add bank status **************/
.addbankstatus {
  width: 100%;
  display: block;
  margin: 10px 0;
}

.addbankstatus .status {
  display: flex;
  flex-direction: column;
  text-align: center;
  padding: 5px 0px;
  min-width: 140px;
}

.addbankstatus .status small {
  color: black;
  font-weight: bold;
}

.addbankstatus .status.wait {
  background: #1ba5e1;
  color: white;
}

.addbankstatus .status.confirm {
  background: #28a745;
  color: white;
}

.addbankstatus .status.cancel {
  background: #dc3545;
  color: white;
}

/*******************poyyyyyyyyyyyyyyyy*******************/
.btn-poy {
  padding-top: 10px;
  padding-left: 5px;
  padding-right: 5px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  transform: all 0.5s;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  width: 99%;
  margin-top: 2px;
}

.btn-poy.active,
.btn-poy:hover {
  border-left: 1px solid rgba(255, 255, 255, 0.5) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.5) !important;
  border-top: rgba(255, 255, 255, 0.5) 5px solid !important;
  transform: all 0.5s;
}

.btn-poy span {
  display: inline-block;
  line-height: 1.2;
}

.btn-poy div {
  height: 100%;
  text-align: left;
}

.btn-poy i {
  font-size: 120%;
  margin-right: 5px;
  vertical-align: middle;
  display: inline-block;
  line-height: 1;
  margin-top: -8px;
}

@media screen and (max-width: 992px) {
  .btn-poy {
    font-size: 75%;
    line-height: 1.2;
    vertical-align: middle;
  }

  .btn-poy span {
    display: block;
  }

  .btn-poy i {
    font-size: 180%;
    margin-right: 5px;
    vertical-align: middle;
    display: inline-block;
  }
}

@media screen and (max-width: 320px) {
  .btn-poy i {
    display: none;
  }
}

.poy-content {
  height: 0px;
  width: 100%;
  opacity: 0;
  position: absolute;
  overflow: hidden;
  transition: all 0s;
}

.poy-content.active {
  max-height: 100%;
  display: block;
  position: relative;
  padding: 10px !important;
  z-index: 1 !important;
  height: 100%;
  width: 100%;
  opacity: 1;
  transition: all 0.5s;
}

.poy-list {
  width: 100%;
  height: auto;
  overflow: hidden;
  border-radius: 5px;
  border: #111 1px solid;
  margin-bottom: 5px;
  display: inline-block;
  margin-left: 2.5px;
  margin-right: 2.5px;
}

.poy-list {
  width: 32.6% !important;
}

@media screen and (max-width: 1199.98px) {
  .poy-list {
    width: 49% !important;
  }
}

@media screen and (max-width: 991.98px) {
  .poy-list {
    width: 48.8% !important;
  }
}

@media screen and (max-width: 767.98px) {
  .poy-list {
    width: 99% !important;
  }
}

.poy-list-content {
  background: white;
  padding: 5px 10px;
  color: #6c757d;
}

.poy-list-content .row .col .ribbon-lotto i {
  font-size: 14px !important;
}

.poy-list-content .row .col .ribbon-lotto {
  background: rgba(0, 0, 0, 0.3);
  height: 20px;
  width: auto;
  display: inline-block;
  position: absolute;
  color: #fff;
  line-height: 20px;
  padding: 0px 5px;
  margin-top: 5px;
  border-left: rgba(0, 0, 0, 0.3) 1px solid;
  font-size: 16px;
}

.poy-list-content .row .col .ribbon-lotto:after {
  content: '';
  position: absolute;
  display: block;
  bottom: 0;
  border: 10px solid rgba(0, 0, 0, 0.3);
  right: -10px;
  height: 20px;
  border-left-width: 0px;
  border-right-color: transparent;
  filter: drop-shadow(6px 6px 3px rgba(0, 0, 0, 0.04));
}

.poy-list-head {
  width: 100%;
  min-height: 30px;
  line-height: 1;
  border-bottom: #111 1px solid;
  padding: 6px 10px 0px 10px;
  vertical-align: middle;
  background: #fff;
  overflow: hidden;
}

.poy-government small,
.poy-thaistock small,
.poy-foreignstock small,
.poy-yeekee small {
  font-weight: normal !important;
}

.poy-type {
  font-weight: lighter;
  padding: 5px;
  border-radius: 3px;
  line-height: 1.2;
  text-align: right;
  background: #eee;
  color: #000;
}

.poy-type h3 {
  line-height: 1;
  margin-bottom: 0;
}

.number-win {
  color: cadetblue;
  font-size: 170%;
  line-height: 1;
}

.poy-government {
  background: #17a2b8;
}

.poy-thaistock {
  background: #007bff;
}

.poy-foreignstock {
  background: #6610f2;
}

.poy-yeekee {
  background: #dc3545;
}

.poy-list-head .poy-status {
  display: block;
  float: right;
  margin-top: -6px;
  margin-right: -10px;
  width: auto;
  min-height: 30px;
  /* box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: 4px solid rgba(255, 255, 255, 0.5); */
  color: #000;
  font-size: 80%;
  /* padding-top: 12px; */
  padding-top: 8px;
  overflow: hidden;
  padding-left: 5px;
  padding-right: 5px;
}

/* .poy-status::before{
    content: "Status";
    font-size: 50% !important;
    line-height: 1;
    display: block;
    position: relative;
    margin-top: -9px;
    color: rgba(0, 0, 0, 0.4);
    border-bottom: rgba(0, 0, 0, 0.1) 1px solid;
} */
.poy-list-head .poy-status.notyet {
  background: #ffc107;
}

.poy-list-head .poy-status.success {
  background: #3ac028;
  color: white;
}

.poy-list-head .poy-status.win {
  background: #3ac028;
  color: white;
}

.poy-list-head .poy-status.lost {
  background: #dc3545;
  color: white;
}

.poy-list-head .poy-status.close {
  background: #b3b1b1;
  color: black;
}

/*******************accordion********************/
.accordion .card {
  margin: 5px 0 0;
}

.accordion .card-header {
  font-family: inherit;
  font-weight: normal;
  color: #111;
  background: #fff;
  outline: 0;
  cursor: pointer;
  padding: 0;
}

.accordion .card-header h4 {
  font-family: inherit;
}

.accordion .card-header:hover {
  background: #eee;
}

.accordion .card-body {
  position: relative;
  margin: 0 0 0;
  padding: 10px;
  color: #fff;
  background: #333;
}

.accordion .card-body a {
  color: lightcoral;
}

.accordion .card-body:after {
  position: absolute;
  top: -14px;
  left: 25px;
  display: block;
  width: 0;
  height: 0;
  margin-left: -7px;
  border-width: 7px;
  border-style: solid;
  border-color: transparent transparent #333 transparent;
  content: '';
}

/***********************************/

.btn:focus,
.btn.focus {
  outline: 0;
  box-shadow: 0 0 0 0rem rgba(0, 123, 255, 0.25);
}

.box__keyboard .btn-outline-primary.active,
.box__keyboard .btn-outline-primary:active {
  color: #fff;
  background-color: #b27f31;
  border-color: #b27f31;
  text-decoration: none !important;
}

.btn-outline-primary:hover {
  color: #007bff;
  background-color: unset;
  border-color: #007bff;
  text-decoration: none !important;
}

.btn-outline-primary-jubwin {
  color: #b27f31;
  background-color: unset;
  border-color: #b27f31;
  text-decoration: none !important;
}

.mobileHoverFix:hover,
.mobileHoverFix.hover {
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}

/************************************/

.spinner {
  margin: 0 auto;
  margin-top: 100px;
  width: 100px;
  height: 100px;
  text-align: center;
  font-size: 10px;
  z-index: 88;
}

.spinner > div {
  background-color: #a0171d;
  height: 100%;
  width: 10px;
  display: inline-block;
  -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
  animation: sk-stretchdelay 1.2s infinite ease-in-out;
}

.spinner .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
  margin-left: 4px;
}

.spinner .rect3 {
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
  margin-left: 4px;
}

.spinner .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
  margin-left: 4px;
}

.spinner .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
  margin-left: 4px;
}

@-webkit-keyframes sk-stretchdelay {
  0%,
  40%,
  100% {
    -webkit-transform: scaleY(0.4);
  }
  20% {
    -webkit-transform: scaleY(1);
  }
}

@keyframes sk-stretchdelay {
  0%,
  40%,
  100% {
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }
  20% {
    transform: scaleY(1);
    -webkit-transform: scaleY(1);
  }
}

/***************************/
small.smallspan {
  display: flex;
  flex-direction: column;
}

@media screen and (max-width: 575px) {
  small.smallspan {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
  }

  small.smallspan span:first-child {
    margin-right: 5px;
  }
}

@media screen and (min-width: 1012px) {
  small.smallspan {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    margin-top: 3px;
  }

  small.smallspan span:first-child {
    margin-right: 5px;
  }
}

.txt-app span {
  display: inline-block;
}

.btn-app {
  width: 100%;
  /*max-width: 200px;*/
}

.img-app {
  width: 100%;
  max-width: 600px;
}

.bt-room input[type='radio'] {
  visibility: hidden;
  height: 0;
  width: 0;
}

.bt-room label {
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  cursor: pointer;
  background-color: #454545;
  color: white;
  /* padding: 5px 10px; */
  padding: 5px 5px;
  border-radius: 3px;
  width: 100%;
  margin-bottom: 0px !important;
}

.bt-room input[type='radio'] + .bt-room label {
  margin-bottom: 0px !important;
  display: inline-block;
}

.bt-room input[type='radio']:checked + label.bt-diamond span,
.bt-room input[type='radio']:checked + label.bt-platinum span,
.bt-room input[type='radio']:checked + label.bt-vip span {
  text-align: right;
}

.bt-room input[type='radio']:checked + label.bt-diamond span.badge,
.bt-room input[type='radio']:checked + label.bt-platinum span.badge,
.bt-room input[type='radio']:checked + label.bt-vip span.badge {
  text-align: center;
}

.bt-room input[type='radio']:checked + label.bt-diamond {
  background: url(../images/diamond-bg.gif) center center;
  text-align: right;
}

.bt-room input[type='radio']:checked + label.bt-platinum {
  background: url(../images/diamond-bg.gif) top center;
  text-align: right;
}

.bt-room input[type='radio']:checked + label.bt-vip {
  background-color: #790000;
  text-align: right;
}

.bt-room input[type='radio']:checked + label.bt-vip::after,
.bt-room input[type='radio']:checked + label.bt-diamond::after,
.bt-room input[type='radio']:checked + label.bt-platinum::after {
  content: '';
  border: none;
  background: none;
}

.bt-room input[type='radio']:checked + label.bt-vip::before {
  content: '\f587';
  font-family: 'Font Awesome 5 Pro';
  position: absolute;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  margin-top: -15px;
  margin-left: 0px;
  color: #c70039;
  background: white;
  padding: 1px;
  padding-left: 2px;
  padding-top: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  line-height: 1;
  font-weight: bold;
  font-size: 14px;
  border: #c70039 2px solid;
  /* text-align: center; */
  /* text-align: right; */
}

.bt-room input[type='radio']:checked + label.bt-diamond::before {
  content: '\f3a5';
  font-family: 'Font Awesome 5 Pro';
  position: absolute;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  margin-top: -15px;
  margin-left: 0px;
  color: #006ee3;
  background: white;
  padding: 1px;
  padding-top: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  line-height: 1;
  font-weight: bold;
  font-size: 14px;
  border: #006ee3 2px solid;
  /* text-align: center; */
  /* text-align: right; */
}

.bt-room input[type='radio']:checked + label.bt-platinum::before {
  content: '\f6cf';
  font-family: 'Font Awesome 5 Pro';
  position: absolute;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  margin-top: -15px;
  margin-left: 0px;
  color: #a000dc;
  background: white;
  padding: 1px;
  padding-top: 2px;
  padding-left: 2.5px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  line-height: 1;
  font-weight: bold;
  font-size: 14px;
  border: #a000dc 2px solid;
  /* text-align: center; */
  /* text-align: right; */
}

.videoWrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  padding-top: 25px;
  height: 0;
}

.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#accordionExample .card-header button.btn-link {
  color: darkred;
  white-space: normal;
  width: 100%;
  text-align: left;
}

#accordionExample.accordion .card-header:hover {
  background: darkred;
  color: #fff;
}

#accordionExample .card-header:hover button.btn-link {
  color: #fff;
}

.btn-contactbox {
  width: 100%;
  text-align: center;
  max-height: 100px;
}

.btn-contactbox i {
  font-size: 50px;
}

.btn-contactbox span {
  display: block;
}

.dd-box {
  /* width:256px; */
  width: auto;
  height: auto;
}

.dd-gold {
  /* font: bold 16px/36px sans-serif; */
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  line-height: 40px;
  text-align: center;
  /* color:#3c2e09; */
  color: lightgoldenrodyellow;
  text-shadow: 0 1px #000;
  /* text-shadow:0 1px #fe98; */
  border-radius: 4px;
  box-sizing: border-box;
  border: 1px solid #ffa3;
  background:
    radial-gradient(
      ellipse farthest-corner at right bottom,
      #fedb37 0%,
      #fdb931 8%,
      #9f7928 30%,
      #8a6e2f 40%,
      transparent 80%
    ),
    radial-gradient(
      ellipse farthest-corner at left top,
      #ffffff 0%,
      #ffffac 8%,
      #d1b464 25%,
      #5d4a1f 62.5%,
      #5d4a1f 100%
    );
  box-shadow:
    0 0 0 1px #0003,
    0 2px 2px #0003;
}

.dd-box b {
  display: inline;
  color: orange;
  text-shadow: block 1px 1px 0px;
}

h1.circular {
  -webkit-text-stroke: 1px black;
  color: white;
  text-shadow:
    3px 3px 0 #000,
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
}

.imgCnt {
  position: relative;
  width: 40px;
  top: -16px;
}

.imgtop,
.imgbelow {
  position: absolute;
}

.imgtop {
  z-index: 1;
}

.imgbelow {
  z-index: 0;
}

.dd-box {
  /* width:256px; */
  width: auto;
  height: auto;
}

.dd-gold {
  /* font: bold 16px/36px sans-serif; */
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  line-height: 40px;
  text-align: center;
  /* color:#3c2e09; */
  color: lightgoldenrodyellow;
  text-shadow: 0 1px #000;
  /* text-shadow:0 1px #fe98; */
  border-radius: 4px;
  box-sizing: border-box;
  border: 1px solid #ffa3;
  background:
    radial-gradient(
      ellipse farthest-corner at right bottom,
      #fedb37 0%,
      #fdb931 8%,
      #9f7928 30%,
      #8a6e2f 40%,
      transparent 80%
    ),
    radial-gradient(
      ellipse farthest-corner at left top,
      #ffffff 0%,
      #ffffac 8%,
      #d1b464 25%,
      #5d4a1f 62.5%,
      #5d4a1f 100%
    );
  box-shadow:
    0 0 0 1px #0003,
    0 2px 2px #0003;
}

.dd-box img {
  height: 30px;
  margin-bottom: 5px;
}

.livebtn:hover {
  border-color: crimson;
  text-decoration: none !important;
}

a:hover .livebtn {
  text-decoration: none !important;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes examplez {
  0% {
    background-color: #c0392b;
  }
  50% {
    background-color: #641e16;
  }
  100% {
    background-color: #c0392b;
  }
}

/* Standard syntax */
@keyframes examplez {
  0% {
    background-color: #c0392b;
  }
  50% {
    background-color: #641e16;
  }
  100% {
    background-color: #c0392b;
  }
}

.lotto-head.lotto-vn-vip {
  background-color: rgb(150, 99, 196);
  border: rgb(109, 40, 170) 1px solid;
}

.lotto-head.lotto-vn-vip2 {
  background-color: rgb(61, 88, 196);
  border: rgb(38, 0, 232) 1px solid;
}

/* ****************************** */
.btn-outline-danger:not(:disabled):not(.disabled).active {
  color: #fff !important;
  background-color: #dc3545 !important;
  border-color: #dc3545 !important;
}

.btn-outline-danger {
  color: #dc3545 !important;
  background-color: white !important;
  background-image: none;
  border-color: #dc3545 !important;
  word-wrap: break-word;
  overflow: hidden;
}

@media screen and (max-width: 320px) {
  .btn-af.btn-outline-danger {
    font-size: 80%;
  }
}

.btn-outline-danger:hover {
  color: white !important;
  background-color: #dc3545 !important;
  background-image: none;
  border-color: #dc3545 !important;
}

.page-link:hover {
  z-index: 2;
  color: #dca235;
  text-decoration: none;
  background-color: #e9ecef;
  border-color: #dee2e6;
}

.page-link {
  z-index: 2;
  color: #333;
  text-decoration: none;
}

.btn-rood {
  padding: 5px;
  border-radius: 0;
  border-right: 0;
  width: 100%;
}

.btn-group-toggle:last-child > .btn-rood {
  border-right: solid 1px;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}

.btn-group-toggle:first-child > .btn-rood {
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}

.txt-num {
  /* font-family: "Mitr", cursive; */
}

.btn-group-toggle > .btn-outline-danger.focus,
.btn-group-toggle > .btn-outline-danger:hover {
  background: none !important;
  color: var(--text-primary-color) !important;
}

.btn-group-toggle > .btn-outline-danger.focus.active,
.btn-group-toggle > .btn-outline-danger.active {
  color: white !important;
  background: var(--bg-primary-color) !important;
}

.btn-closenum {
  /* border: #dc3545 1px solid;
    color: #dc3545; */
  border: #5a5959 1px solid;
  color: #5a5959;
  font-weight: bold;
}

.btn-group-toggle > .btn-closenum.focus,
.btn-group-toggle > .btn-closenum:hover {
  background: none !important;
  /* color: #dc3545 !important; */
  color: #383737 !important;
}

.btn-group-toggle > .btn-closenum.focus.active,
.btn-group-toggle > .btn-closenum.active {
  color: white !important;
  /* background: #dc3545 !important; */
  background: #383737 !important;
}

.btn-limitnum {
  border: #ffcc00 1px solid;
  color: #ffcc00;
  font-weight: bold;
}

.btn-group-toggle > .btn-limitnum.focus,
.btn-group-toggle > .btn-limitnum:hover {
  background: none !important;
  color: #ffcc00 !important;
}

.btn-group-toggle > .btn-limitnum.focus.active,
.btn-group-toggle > .btn-limitnum.active {
  color: white !important;
  background: #ffcc00 !important;
}

.btn-group-toggle > .btn-outline-secondary.focus,
.btn-group-toggle > .btn-outline-secondary:hover {
  background: none !important;
  color: #6c757d !important;
}

.btn-group-toggle > .btn-outline-secondary.focus.active,
.btn-group-toggle > .btn-outline-secondary.active {
  color: white !important;
  background: #6c757d !important;
}

#nav-tab1.nav-pills .nav-link.active {
  color: var(--text-on-bg-primary-color);
  text-shadow: var(--border-primary-color) 1px 1px 0;
  background-color: var(--bg-primary-color);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  padding: 20px 0 !important;
  border-bottom-width: 8px;
}

#nav-tab1.nav-pills .nav-link {
  display: flex;
  justify-content: center;
  align-items: center;
  border: var(--border-primary-color) 1px solid;
  border-radius: 10px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  font-weight: 600;
  text-shadow: rgb(255, 255, 255) 1px 1px;
  background-color: rgba(0, 0, 0, 0.1);
  color: var(--bg-primary-color);
}

#samtua {
  position: relative;
}

/* #ninetybtn,#roodfrontbtn,#roodbackbtn{
    margin-left: -8px;
}
@media screen and (max-width:767.98px){
    #ninetybtn,#roodfrontbtn,#roodbackbtn{
        margin-left: 0px;
    }
} */
.overlay-disable {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0.5;
  z-index: 10;
}

/* animated button */

.animated-button1 {
  background: linear-gradient(-30deg, #3d0b0b 50%, #2b0808 50%);
  padding: 8px 15px;
  margin: 5px;
  display: inline-block;
  -webkit-transform: translate(0%, 0%);
  transform: translate(0%, 0%);
  overflow: hidden;
  color: #f7d4d4;
  font-size: 16px;
  letter-spacing: 2.5px;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  -webkit-box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.animated-button1::before {
  content: '';
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: #ad8585;
  opacity: 0;
  -webkit-transition: 0.2s opacity ease-in-out;
  transition: 0.2s opacity ease-in-out;
}

.animated-button1:hover::before {
  opacity: 0.2;
}

.animated-button1 span {
  position: absolute;
}

.animated-button1 span:nth-child(1) {
  top: 0px;
  left: 0px;
  width: 100%;
  height: 2px;
  background: -webkit-gradient(linear, right top, left top, from(rgba(43, 8, 8, 0)), to(#d92626));
  background: linear-gradient(to left, rgba(43, 8, 8, 0), #d92626);
  -webkit-animation: 2s animateTop linear infinite;
  animation: 2s animateTop linear infinite;
}

@keyframes animateTop {
  0% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
  100% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}

.animated-button1 span:nth-child(2) {
  top: 0px;
  right: 0px;
  height: 100%;
  width: 2px;
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(43, 8, 8, 0)), to(#d92626));
  background: linear-gradient(to top, rgba(43, 8, 8, 0), #d92626);
  -webkit-animation: 2s animateRight linear -1s infinite;
  animation: 2s animateRight linear -1s infinite;
}

@keyframes animateRight {
  0% {
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
  }
  100% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }
}

.animated-button1 span:nth-child(3) {
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 2px;
  background: -webkit-gradient(linear, left top, right top, from(rgba(43, 8, 8, 0)), to(#d92626));
  background: linear-gradient(to right, rgba(43, 8, 8, 0), #d92626);
  -webkit-animation: 2s animateBottom linear infinite;
  animation: 2s animateBottom linear infinite;
}

@keyframes animateBottom {
  0% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
  100% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
}

.animated-button1 span:nth-child(4) {
  top: 0px;
  left: 0px;
  height: 100%;
  width: 2px;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(43, 8, 8, 0)), to(#d92626));
  background: linear-gradient(to bottom, rgba(43, 8, 8, 0), #d92626);
  -webkit-animation: 2s animateLeft linear -1s infinite;
  animation: 2s animateLeft linear -1s infinite;
}

@keyframes animateLeft {
  0% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }
  100% {
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
  }
}

.animated-button1 span:nth-child(1) {
  top: 0px;
  left: 0px;
  width: 100%;
  height: 2px;
  background: -webkit-gradient(linear, right top, left top, from(rgba(43, 8, 8, 0)), to(#d92626));
  background: linear-gradient(to left, rgba(43, 8, 8, 0), #d92626);
  -webkit-animation: 2s animateTop linear infinite;
  animation: 2s animateTop linear infinite;
}

@keyframes animateTop {
  0% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
  100% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}

.animated-button1 span:nth-child(2) {
  top: 0px;
  right: 0px;
  height: 100%;
  width: 2px;
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(43, 8, 8, 0)), to(#d92626));
  background: linear-gradient(to top, rgba(43, 8, 8, 0), #d92626);
  -webkit-animation: 2s animateRight linear -1s infinite;
  animation: 2s animateRight linear -1s infinite;
}

@keyframes animateRight {
  0% {
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
  }
  100% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }
}

.animated-button1 span:nth-child(3) {
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 2px;
  background: -webkit-gradient(linear, left top, right top, from(rgba(43, 8, 8, 0)), to(#d92626));
  background: linear-gradient(to right, rgba(43, 8, 8, 0), #d92626);
  -webkit-animation: 2s animateBottom linear infinite;
  animation: 2s animateBottom linear infinite;
}

@keyframes animateBottom {
  0% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
  100% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
}

.animated-button1 span:nth-child(4) {
  top: 0px;
  left: 0px;
  height: 100%;
  width: 2px;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(43, 8, 8, 0)), to(#d92626));
  background: linear-gradient(to bottom, rgba(43, 8, 8, 0), #d92626);
  -webkit-animation: 2s animateLeft linear -1s infinite;
  animation: 2s animateLeft linear -1s infinite;
}

@keyframes animateLeft {
  0% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }
  100% {
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
  }
}

.animated-button1 {
  margin-top: -10px;
  width: 100%;
}

.animated-button1:hover {
  text-decoration: none;
  color: gold;
}

.topbox {
  border: 1px #333 solid;
  /* border-radius: 5px; */
  display: block;
  margin-top: 0px;
  padding: 8px 0;
  background: #343a40;
  /* color: lightgoldenrodyellow; */
  line-height: 1.2;
}

.marqueemain {
  background-color: #fff;
  border: #555 1px solid;
  padding: 5px 10px;
  margin-bottom: 0px;
}

/********************upload file*****************/
.file-upload {
  background-color: #ffffff;
  width: 100%;
  margin: 0 auto;
  padding: 0 20px 20px 20px;
}

.file-upload-btn {
  width: 100%;
  margin: 0;
  color: #fff;
  background: rgb(31, 119, 178);
  border: none;
  padding: 10px;
  border-radius: 4px;
  border-bottom: 4px solid rgb(21, 96, 130);
  transition: all 0.2s ease;
  outline: none;
  text-transform: uppercase;
  font-weight: 700;
}

.file-upload-btn:hover {
  background: rgb(24, 137, 212);
  color: #ffffff;
  transition: all 0.2s ease;
  cursor: pointer;
}

.file-upload-btn:active {
  border: 0;
  transition: all 0.2s ease;
}

.file-upload-content {
  display: none;
  text-align: center;
}

.file-upload-input {
  position: absolute;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  outline: none;
  opacity: 0;
  cursor: pointer;
}

.image-upload-wrap {
  margin-top: 20px;
  border: 2px dashed rgb(31, 82, 178);
  position: relative;
}

.image-dropping,
.image-upload-wrap:hover {
  background-color: rgb(64, 142, 216);
  border: 2px dashed #ffffff;
}

.image-title-wrap {
  padding: 0 15px 15px 15px;
  color: #222;
}

.drag-text {
  text-align: center;
}

.drag-text h3 {
  font-weight: 100;
  text-transform: uppercase;
  color: rgb(5, 37, 95);
  padding: 60px 0;
}

.file-upload-image {
  max-height: 200px;
  max-width: 200px;
  margin: auto;
  padding: 20px;
}

.remove-image {
  width: 200px;
  margin: 0;
  color: #fff;
  background: #cd4535;
  border: none;
  padding: 10px;
  border-radius: 4px;
  border-bottom: 4px solid #b02818;
  transition: all 0.2s ease;
  outline: none;
  text-transform: uppercase;
  font-weight: 700;
}

.remove-image:hover {
  background: #c13b2a;
  color: #ffffff;
  transition: all 0.2s ease;
  cursor: pointer;
}

.remove-image:active {
  border: 0;
  transition: all 0.2s ease;
}

/********************** carousel slide ****************/
.carousel-view > .bg-danger {
  background-color: #d59929 !important;
  color: white !important;
}

.carousel-inner {
  height: auto;
  width: 100%;
}

/* Count nav-pills */
.nav-slide {
  position: relative;
  right: 0;
  bottom: 0;
  left: 0;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  padding-left: 0;
  margin-right: 0;
  margin-left: 0;
  list-style: none;
}

.nav-slide {
  width: 100%;
  counter-reset: number;
}

.nav-slide > li > span:before {
  content: counter(number);
  counter-increment: number;
  display: inline-block;
}

#nav1.nav-slide > li > span:before {
  content: counter(number);
  counter-increment: none;
  display: inline-block;
  visibility: hidden;
}

#nav1.nav-slide > li > .flag-icon {
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
  vertical-align: middle;
  float: left;
  margin-left: 5px !important;
  margin-top: 3px !important;
}

.card-header .flag-icon {
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
  vertical-align: middle;
  float: left;
  margin-left: 5px !important;
  margin-top: 3px !important;
}

.card-theme-header .flag-icon {
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
  vertical-align: middle;
  float: left;
  margin-left: 5px !important;
  margin-top: 3px !important;
}

.nav-slide .active {
  background-color: #fff;
  -webkit-box-shadow: inset 0px 0px 0px 2px #976f02;
  -moz-box-shadow: inset 0px 0px 0px 2px #976f02;
  box-shadow: inset 0px 0px 0px 2px #976f02;
}

.nav-slide li {
  position: relative;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
  width: auto !important;
  height: auto !important;
  padding: 5px;
  text-align: center;
  margin-right: 2px;
  margin-left: 2px;
  margin-bottom: 3px;
  text-indent: 0px !important;
  cursor: pointer;
}

.nav-slide-yeekee li {
  position: relative;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
  width: auto !important;
  min-width: 30px;
  height: auto !important;
  padding: 5px;
  text-align: center;
  margin-right: 2px;
  margin-left: 2px;
  margin-bottom: 3px;
  text-indent: 0px !important;
  cursor: pointer;
}

.nav-slide-yeekee {
  width: 100%;
  flex-wrap: wrap;
  position: relative;
  right: 0;
  bottom: 0;
  left: 0;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  padding-left: 0;
  margin-right: 0;
  margin-left: 0;
  list-style: none;
}

.nav-slide-yeekee {
  width: 100%;
  counter-reset: number;
}

.nav-slide-yeekee > li > span:before {
  content: counter(number);
  counter-increment: number;
  display: inline-block;
}

.nav-slide-yeekee .active {
  background-color: #fff;
  -webkit-box-shadow: inset 0px 0px 0px 2px #976f02;
  -moz-box-shadow: inset 0px 0px 0px 2px #976f02;
  box-shadow: inset 0px 0px 0px 2px #976f02;
  font-weight: bold;
}

/************************/
.nav-slide li,
.nav-slide-yeekee li {
  background-color: rgba(255, 255, 255, 0.5);
  font-size: 16px !important;
  color: black !important;
  text-shadow: #fff 1px 1px 0px;
}

/************************/
.border-active .nav-slide .active,
.border-active .nav-slide-yeekee .active {
  background-color: #fff;
  -webkit-box-shadow: inset 0px 0px 0px 2px #d59929;
  -moz-box-shadow: inset 0px 0px 0px 2px #d59929;
  box-shadow: inset 0px 0px 0px 2px #d59929;
}

.border-active .nav-slide li,
.border-active .nav-slide-yeekee li {
  color: white !important;
  text-shadow: black 1px 1px 0px;
  background-color: rgba(0, 0, 0, 0.5);
}

.border-active .nav-slide li.active,
.border-active .nav-slide-yeekee li.active {
  color: #444 !important;
  text-shadow: #fff 1px 1px 0px;
  background-color: #fff;
}

/*************************/

.carousel-view ol {
  margin-top: 0;
  margin-bottom: 0rem;
}

.carousel-view {
  display: none;
  margin-bottom: 0rem;
  position: relative;
}

@media screen and (max-width: 768px) {
  .carousel-view {
    display: block;
  }

  .pc-view {
    display: none !important;
  }

  .nav-slide li {
    position: relative;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    /* display: inline-block; */
    /* width: 24% !important; */
    /* width: 32.4% !important; */
    width: 47.5% !important;
    height: auto !important;
    padding: 3px 0;
    text-align: center;
    vertical-align: top;
    margin-right: 1.5px;
    margin-left: 1.5px;
    text-indent: 0px !important;
  }

  .nav-slide {
    position: relative;
    flex-wrap: wrap;
    right: 0;
    bottom: 0;
    left: 0;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    /* display: inline-block; */
    padding-left: 0;
    margin-right: 0;
    margin-left: 0;
    list-style: none;
  }

  .nav-slide-yeekee li {
    position: relative;
    -ms-flex: none;
    flex: none;
    /* display: inline-block; */
    width: 11.3% !important;
    height: auto !important;
    padding: 3px 0;
    text-align: center;
    vertical-align: top;
    margin-right: 1.5px;
    margin-left: 1.5px;
    margin-bottom: 3px;
    text-indent: 0px;
  }

  .nav-slide-yeekee {
    position: relative;
    right: 0;
    bottom: 0;
    left: 0;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    /* display: inline-block; */
    padding-left: 0;
    margin-right: 0;
    margin-left: 0;
    list-style: none;
  }

  .nav-slide li,
  .nav-slide-yeekee li {
    cursor: pointer;
    background-color: rgba(78, 45, 128, 0.5);
    color: var(--text-primary-color);
    font-size: 14px;
    font-weight: 400;
    text-shadow: none;
    border-radius: 2px;
  }
}

@media screen and (max-width: 321px) {
  .nav-slide li {
    width: 32% !important;
    font-size: 11.5px;
  }
}

/********************** end carousel slide ****************/

.text-danger {
  color: rgb(189, 132, 41) !important;
}

.text-danger {
  color: #dc3545 !important;
}

.border-danger {
  border-color: #f5bd70 !important;
}

.bgwhitealpha .card-header {
  font-weight: 400;
  font-size: 100%;
}

.bgwhitealpha h6.text-danger {
  color: #976f02 !important;
  margin: 5px;
  margin-bottom: 10px;
  text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.3);
  font-size: 110%;
}

.bgwhitealpha h6 {
  /* color: #976f02; */
  margin: 5px;
  margin-bottom: 10px;
  text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.3);
  font-size: 110%;
}

.bgwhitealpha h6 span {
  text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5);
  font-weight: 400;
  font-size: 14px;
}

.bgwhitealpha h6 span.badge-danger {
  background-color: #976f02;
}

.bgwhitealpha {
  /* background: rgba(179, 227, 236, 0.6); */
  background: rgba(255, 255, 255, 0.9);
  margin-bottom: 10px;
  border: rgba(255, 255, 255, 1) 2px solid;
}

.bgwhitealpha h6 span.flag-icon {
  font-size: 40px;
  margin-top: -15px;
  margin-left: -15px;
  border-top-left-radius: 4px;
  border-bottom-right-radius: 8px;
  max-width: 50px;
  background-size: cover;
  border: #555 1px solid;
  border-top-color: #ccc;
  border-left-color: #ccc;
}

.card-header span.flag-icon {
  font-size: 30px;
  top: -8px;
  left: -10px;
  border-top-left-radius: 4px;
  border-bottom-right-radius: 8px;
  max-width: 50px;
  background-size: cover;
  display: flex;
  border: #555 1px solid;
  border-top-color: #333;
  border-left-color: #333;
}

.disable-scroll {
  height: 100%;
  overflow: hidden;
  width: 100%;
  position: fixed;
}

.disable-dbl-tap-zoom {
  touch-action: manipulation;
}

.bg-grey {
  background: #eee;
}

.text-normal {
  white-space: normal;
}

.notice-content {
  display: block;
}

@media only screen and (min-width: 740px) {
  .notice-content {
    display: none;
  }
}

.notice-content-desktop {
  display: none;
}

@media only screen and (min-width: 740px) {
  .notice-content-desktop {
    display: block;
  }
}

.underline {
  text-decoration: underline;
}

.btn-cancle-last-add-num {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#section-content {
  margin-bottom: 60px;
}

a:hover {
  text-decoration: none;
}

.flex-wrap {
  flex-wrap: wrap;
}

.bg-theme-primary {
  color: var(--text-on-bg-primary-color);
  background-color: var(--bg-primary-color);
}

.btn-theme-primary {
  color: var(--text-on-bg-primary-color);
  background-color: var(--bg-primary-color);
  border-color: var(--bg-primary-color);
}

.bg-gradient-theme-primary {
  background: linear-gradient(90deg, rgba(1, 111, 98, 1) 0%, rgba(2, 34, 35, 1) 100%);
  color: white;
  border-radius: 10px 10px 0px 0px;
}

.bg-gradient-theme-secondary {
  background: linear-gradient(90deg, rgba(68, 67, 71, 1) 0%, rgba(11, 13, 12, 1) 100%);
  border-radius: 0px 0px 10px 10px;
  color: white;
}

.btn-gradiant-yellow {
  background: linear-gradient(180deg, rgba(247, 206, 96, 1) 0%, rgba(188, 116, 5, 1) 100%)
    padding-box;
  color: white;
  width: 100%;
  font-size: 1.3rem !important;
  font-weight: bold;
}

.btn-gradiant-yellow-left {
  background: linear-gradient(180deg, rgba(247, 206, 96, 1) 0%, rgba(188, 116, 5, 1) 100%)
    padding-box;
  color: white;
  width: 100%;
  font-size: 1.3rem !important;
  font-weight: bold;
}

.login-popup-modal-dialog {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.login-popup-modal-header {
  border: none;
  width: 100%;
}

.popup-modal-head {
  border: none;
  width: 100%;
  padding: 0 1rem;
}

.login-popup-modal-content {
  border-radius: 20px;
  background-color: transparent;
  border: none;
  width: 100%;
}

.btn-gradiant-login.popup,
.btn-gradiant-login {
  color: #000;
  width: 100%;
  font-size: 1.2rem !important;
  height: 100%;
  background: transparent linear-gradient(180deg, #fee701 0%, #fea600 100%) 0% 0% no-repeat
    padding-box;
  border-radius: 50px;
  padding: 15px;
  margin: 0;
  box-sizing: border-box;
}

.btn-gradiant-login.btn-app {
  padding: 9px;
  background: transparent linear-gradient(180deg, #8bc34a 0%, #26441d 100%) 0% 0% no-repeat
    padding-box;
  border-radius: 20px;
  border: none;
  color: white;
}

.btn-gradiant-login-popup {
  color: white;
  width: 100%;
  font-size: 1.1rem !important;
  font-weight: bold;
  height: 100%;
  background: #71e132 0% 0% no-repeat padding-box;
  box-shadow: inset 0px 3px 6px #00000029;
  border-radius: 22px;
}

.btn-gradiant-green-left {
  background: linear-gradient(90deg, rgba(1, 111, 98, 1) 0%, rgba(2, 34, 35, 1) 100%) padding-box;
  color: white;
  width: 100%;
  font-size: 1.3rem !important;
  font-weight: bold;
}

.btn-theme-primary:hover {
  color: white;
  background-color: var(--border-primary-color);
  border-color: var(--border-primary-color);
}

.text-theme-primary {
  color: var(--text-title-color);
}

.text-theme-secondary {
  color: var(--text-sub-title-color);
}

.btn-group-toggle > .btn-theme-outline-primary.focus,
.btn-group-toggle > .btn-theme-outline-primary:hover {
  background: none !important;
  color: var(--bg-primary-color) !important;
}

.btn-group-toggle > .btn-theme-outline-primary.focus.active,
.btn-group-toggle > .btn-theme-outline-primary.active {
  color: var(--text-on-bg-primary-color) !important;
  background: var(--bg-primary-color) !important;
}

.btn-theme-outline-primary:not(:disabled):not(.disabled).active {
  color: var(--text-on-bg-primary-color) !important;
  background-color: var(--bg-primary-color) !important;
  border-color: var(--border-primary-color) !important;
}

.btn-theme-outline-primary {
  color: var(--bg-primary-color) !important;
  background-color: var(--text-on-bg-primary-color) !important;
  background-image: none;
  border-color: var(--bg-primary-color) !important;
  word-wrap: break-word;
  overflow: hidden;
}

@media screen and (max-width: 320px) {
  .btn-af.btn-theme-outline-primary {
    font-size: 80%;
  }
}

.btn-theme-outline-primary:hover {
  color: var(--bg-primary-color) !important;
  background-color: var(--bg-primary-color) !important;
  background-image: none;
  border-color: var(--border-primary-color) !important;
}

.bg-theme-dark {
  background-color: var(--bg-dark-color) !important;
  color: var(--text-on-bg-dark-color);
}

.badge-theme-primary {
  color: black;
  background: linear-gradient(180deg, rgba(247, 206, 96, 1) 0%, rgba(188, 116, 5, 1) 100%);
}

.badge-theme-primary[href]:hover,
.badge-theme-primary[href]:focus {
  color: var(--text-on-bg-primary-color);
  text-decoration: none;
  background-color: var(--border-primary-color);
}

.pagemodal .head {
  width: 100%;
  height: 32px;
  padding: 5px;
  overflow: hidden;
  background: var(--border-primary-color);
  color: var(--text-on-bg-primary-color);
  text-align: center;
  position: relative;
  font-size: 1.1rem;
}

.table th,
.table td.color-txt-price {
  border-top: 0px solid #fff !important;
}

.pagemodal .head.head-price {
  width: 100%;
  height: 52px;
  padding: 5px;
  overflow: hidden;
  background: transparent linear-gradient(180deg, #393939 0%, #000000 100%) 0% 0% no-repeat
    padding-box;
  color: white;
  text-align: center;
  position: relative;
  font-size: 1.1rem;
  align-items: center;
}

/***** JACK CSS *****/

/* input
{
  font-size: 18px !important;
} */

.top-header-bar {
  background: url(../custom/top-header-bar.png) no-repeat;
  background-size: cover;
  height: 40px;
}

.header-bar {
  background-color: #001314;
  /*background: url(../custom/header-bar.png) no-repeat top center;*/
  background-size: cover;
}

.custom-bg {
  /*background-color: #03363A;*/
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: -1;
  top: 0;
  left: 0;
  background: url(../custom/main-bg.jpg) no-repeat top center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/bg-black.jpg', sizingMethod='scale');
  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/bg-black.jpg', sizingMethod='scale')";
}

.modal-content-login {
  background-color: transparent;
  border: none;
}

.modal-footer.modal-footer-login {
  padding: 0rem 1rem;
  border-top: none;
}

.btn-close-popup {
  background: transparent linear-gradient(180deg, #ff9800 0%, #9f6207 100%) 0% 0% no-repeat
    padding-box;
  width: 100%;
  box-shadow: -1px 2px 5px black;
  color: #fff;
  border-radius: 10px;
  font-size: 1.4rem;
}

.modal-content-login img {
  border-radius: 10px;
  width: 100%;
}

.logo-m {
  width: 65%;
  margin: -20px 0 -10px;
}

.bg-login-result-set-height {
  background: #1d2129;
  border-radius: 10px;
  overflow-y: auto;
  margin-bottom: 10px;
}

@media screen and (max-width: 768px) {
  .custom-bg {
    /*background: url(../custom/main-bg-m.jpg) no-repeat top center;*/
    background-size: cover;
  }

  .login-popup-modal-header,
  .login-popup-modal-content {
    width: 100%;
  }

  .pagemodal .head.head-price {
    height: 43px;
  }

  .color-result-m {
    color: white;
  }

  .custom-bg-app {
    /*background: url(../custom/bg-logo-mobile.jpg) no-repeat top center;*/
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: -1;
    top: 0;
    left: 0;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/bg-black.jpg', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/bg-black.jpg', sizingMethod='scale')";
  }
}

.custombglogin .rule a {
  color: var(--link-text-color);
  text-decoration: underline;
  line-height: 30px;
}

.custombglogin .rule a:hover {
  color: #e4aa55;
}

.custombglogin .rule {
  text-align: right;
}

.logo-img-popup {
  width: 60%;
  margin: -15px 0;
}

.presenter-img {
  width: 100%;
  position: absolute;
  bottom: 0;
}

.btn-register {
  background: transparent linear-gradient(180deg, #ff9800 0%, #8a580e 100%) 0% 0% no-repeat
    padding-box;
  color: #fff;
  width: 100%;
  font-size: 1.2rem !important;
  height: 100%;
  border-radius: 50px;
  padding: 15px;
  margin: 0;
  box-sizing: border-box;
}

.border-login-form {
  border: 1px solid #fff;
  border-radius: 20px;
}

.border-login-form-popup .btn-register {
  background: transparent linear-gradient(180deg, #ff9800 0%, #8a580e 100%) 0% 0% no-repeat
    padding-box;
  color: #fff;
  width: 100%;
  font-size: 1.2rem !important;
  height: 100%;
  border-radius: 50px;
  padding: 15px;
  margin: 0;
  box-sizing: border-box;
  border: 1px solid #120d4c;
}

.border-login-form-popup {
  font-size: 1.4rem !important;
  width: 100%;
  border-radius: 20px;
  margin: 9px;
  padding: 11px;
}

.margin-img-logo {
  text-align: center;
  /*margin: -9% 0;*/
}

.btn-forgot-pwd {
  font-size: 1rem !important;
  padding: 0px;
  text-decoration: underline;
  background: transparent;
  color: white;
}

.btn-login-white-popup {
  background: #fbee3a 0% 0% no-repeat padding-box;
  border-radius: 22px;
  color: #000;
  font-size: 1.1rem !important;
  font-weight: bold;
  height: 100%;
  align-items: center;
}

.btn-login-white-m {
  /*color: . btn-login-white-m;*/
  font-size: 1.1rem !important;
  font-weight: bold;
  border-radius: 22px;
  background: #ffffff 0% 0% no-repeat padding-box;
  color: #707070;
}

.btn-login-register {
  border: 2px solid #e4e4e4;
  border-radius: 35px;
  color: white;
  height: 100%;
  padding: 3%;
  font-size: 21px !important;
  white-space: break-spaces;
  background: transparent;
}

.btn-login-register-admin.app-top {
  padding: 5px 0px;
  border-radius: 20px;
  background: #01c402;
}

.width-box-countdown-th-app {
  width: 100%;
}

.btn-login-register-admin-m {
  background: #db2036;
  color: white;
  font-weight: bold;
  border-radius: 22px;
  font-size: 1.2rem !important;
}

.btn-login-register-admin-m:hover {
  background-color: var(--bg-primary-color);
  border-color: var(--bg-primary-color);
  color: white;
}

.btn-gradiant-login:hover,
.btn-register:hover,
.btn-gradiant-login-popup:hover,
.btn-login-white-popup:hover,
.btn-login-white:hover,
.btn-login-register-admin:hover {
  transform: scale(1.02);
}

.btn-forgot-pwd:hover {
  color: #f5e17b;
  text-decoration: underline;
}

.btn-outline-custom {
  border-color: var(--border-primary-color);
  background: transparent linear-gradient(180deg, #f8d364 0%, #ba7202 100%) 0% 0% no-repeat
    padding-box;
  color: white;
}

.btn-outline-custom:hover {
  color: var(--text-on-bg-primary-color);
  background-color: var(--bg-primary-color);
  border-color: var(--bg-primary-color);
}

.btn-outline-custom:focus,
.btn-outline-dark.focus {
  box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5);
}

.contentbox {
  background: rgba(255, 255, 255, 0.9);
  border: rgba(255, 255, 255, 1) 1px solid;
  min-height: 90vh;
}

.huay-card-product-out {
  border-radius: 100px;
  background: #c9d4d6 0% 0% no-repeat padding-box;
  box-shadow: 2px 2px 3px #00000029;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 98%;
  height: 94%;
  color: white;
  min-height: 34px;
}

.font-amount-wd-af {
  position: absolute;
  top: 30%;
  font-size: 1.2rem;
  left: 50%;
  translate: -50% -50%;
  color: black;
  font-weight: bolder;
}

.section-title {
  background: transparent linear-gradient(90deg, #fc5622 0%, #ffc107 100%) 0% 0% no-repeat
    padding-box;
  border-radius: 5px;
  box-shadow: inset 0px 3px 6px #00000029;
  font-weight: bold;
  color: #fff;
  width: 100%;
  margin-bottom: 10px;
  padding: 10px;
  font-size: 1.1rem;
  text-align: center;
}

.section-title-result {
  background: #002b5b 0% 0% no-repeat padding-box;
  border: 2px solid #0076fd;
  border-radius: 19px;
  box-shadow: inset 0px 3px 6px #00000029;
  font-weight: bold;
  color: #fff;
  width: 100%;
  font-size: 1.1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  /*margin-left: 15%;*/
}

.lotto-title.d-flex.flex-row.justify-content-between img,
.section-title-deposit img {
  /*filter: invert(100%); !* Set the desired color (inverted) *!*/
}

.section-title-deposit {
  background: transparent linear-gradient(180deg, #e0c277 0%, #bf9169 100%) 0% 0% no-repeat
    padding-box;
  border-radius: 40px;
  box-shadow: inset 0px 3px 6px #00000029;
  font-weight: 200;
  color: #fff;
  width: 100%;
  padding: 17px;
  font-size: 1.8rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.section-title-bank-add {
  background: transparent linear-gradient(90deg, #e0c277 0%, #bf9169 100%) 0% 0% no-repeat
    padding-box;
  border-radius: 30px;
  box-shadow: inset 0px 3px 6px #00000029;
  font-weight: 200;
  color: #fff;
  width: 100%;
  padding: 16px 17px;
  font-size: 1.8rem;
  align-items: center;
}

.section-title-bank-add a.btn-theme-primary {
  background: transparent
    linear-gradient(180deg, #ffffff 0%, #f2f2f2 13%, #e6e6e6 30%, #ffffff 71%, #cccccc 100%) 0% 0%
    no-repeat padding-box;
  box-shadow: inset 0px 3px 6px #00000029;
  border-radius: 30px;
  border-color: transparent;
  color: black;
}

.section-title-bank-add a.btn.btn-theme-primary {
  color: black;
}

.padding-register {
  padding: 0% 23%;
}

.padding-withdraw {
  padding: 0% 23%;
}

.btn-register-admin-r {
  background: #0ba400 0% 0% no-repeat padding-box;
  border-radius: 5px;
  width: 100%;
  color: white;
}

.mr-icon-regis {
  margin-right: 27%;
}

.section-title-register {
  background: transparent linear-gradient(180deg, #e0c277 0%, #bf9169 100%) 0% 0% no-repeat
    padding-box;
  border-radius: 40px;
  box-shadow: inset 0px 3px 6px #00000029;
  font-weight: 200;
  color: #fff;
  width: 100%;
  font-size: 1.8rem;
  padding: 16px;
  display: flex;
  justify-content: center;
}

.btn-deposit {
  font-size: 1.7rem !important;
}

.deposit-step-topic {
  font-size: 1.8rem;
  text-align: center;
}

.rounded-deposit {
  border: 2px solid rgba(254, 138, 58, 0.3);
  border-radius: 5px;
}

.img-step {
  width: 20%;
}

.img-step-r {
  width: 35%;
}

.img-step-r2 {
  width: 28%;
}

.img-step-f2 {
  width: 19%;
}

.txt-date-in-result {
  color: #fff;
  font-weight: 100;
}

.section-title-lottery {
  background: transparent linear-gradient(90deg, #1ea4d9 0%, #083359 100%) 0% 0% no-repeat
    padding-box;
  border-radius: 5px;
  box-shadow: inset 0px 3px 6px #00000029;
  color: #fff;
  width: 100%;
  margin-bottom: 10px;
  padding: 10px 10px 10px 1%;
  font-size: 1.4rem;
  font-weight: 500;
  align-items: center;
  justify-content: center;
}

.huay-card-product {
  background: transparent linear-gradient(180deg, #ff5722 0%, #a4271d 100%) 0% 0% no-repeat
    padding-box;
  box-shadow: 2px 2px 3px #00000029;
  border-radius: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80%;
  height: 94%;
  color: white;
  min-height: 31px;
}

.huay-card {
  padding: 10px 3px 10px 0;
  border-radius: 10px;
  color: #ffffff;
  background: linear-gradient(0deg, #0b8457 0%, #f7df97 79%);
}

.huay-card-stock {
  background: linear-gradient(0deg, #5a2829 0%, #f7df97 79%);
  border-radius: 10px;
  color: #ffffff;
}
.huay-card-product-name-stock {
  background: #5a2829;
}

.huay-card-stock-special {
  background: linear-gradient(0deg, #447b1e 0%, #f7df97 79%);
  border-radius: 10px;
  color: #ffffff;
}
.huay-card-product-name-stock-special {
  background: #447b1e;
}

.huay-card-yeekee {
  background: linear-gradient(0deg, #009688 0%, #f7df97 79%);
  border-radius: 10px;
  color: #ffffff;
}
.huay-card-product-name-yeekee {
  background: #4e2c80;
}

.huay-card-th {
  background: linear-gradient(0deg, #4758b3 0%, #f7df97 79%);
  border-radius: 10px;
  color: #ffffff;
}
.huay-card-product-name-th {
  background: #4758b3;
}

.huay-card-aom {
  background: linear-gradient(0deg, #e8108d 0%, #f7df97 79%);
  border-radius: 10px;
  color: #ffffff;
}
.huay-card-product-name-aom {
  background: #e8108d;
}

.huay-card-baac {
  background: linear-gradient(0deg, #499ed3 0%, #f7df97 79%);
  border-radius: 10px;
  color: #ffffff;
}
.huay-card-product-name-baac {
  background: #499ed3;
}

.huay-card-online {
  background: linear-gradient(0deg, #1c1a7b 0%, #f7df97 79%);
  border-radius: 10px;
  color: #ffffff;
}
.huay-card-product-name-online {
  background: #1c1a7b;
}

.huay-card-lapp,
.huay-card-lav,
.huay-card-laospecial,
.huay-card-larr,
.huay-card-lank,
.huay-card-lavl,
.huay-card-lam,
.huay-card-la,
.huay-card-lapm,
.huay-card-larj,
.huay-card-laoev,
.huay-card-latn,
.huay-card-ladd,
.huay-card-lag,
.huay-card-lavx,
.huay-card-lav,
.huay-card-lamid,
.huay-card-laeco {
  background: linear-gradient(0deg, #09a2f0 0%, #f7df97 79%);
  border-radius: 10px;
  color: #ffffff;
}

.huay-card-product-name-lapp,
.huay-card-product-name-laospecial,
.huay-card-product-name-larr,
.huay-card-product-name-lamid,
.huay-card-product-name-lavx,
.huay-card-product-name-lag,
.huay-card-product-name-lav,
.huay-card-product-name-lam,
.huay-card-product-name-lank,
.huay-card-product-name-laoev,
.huay-card-product-name-lavl,
.huay-card-product-name-lav,
.huay-card-product-name-la,
.huay-card-product-name-lapm,
.huay-card-product-name-larj,
.huay-card-product-name-latn,
.huay-card-product-name-ladd,
.huay-card-product-name-laeco {
  background-color: #09a2f0;
}

.huay-card-hncy,
.huay-card-hnm,
.huay-card-hc2,
.huay-card-hc2o,
.huay-card-hco,
.huay-card-hcd,
.huay-card-n22,
.huay-card-sgn,
.huay-card-hnsp,
.huay-card-hnsuper,
.huay-card-hanoiaf,
.huay-card-hc,
.huay-card-hnlocal,
.huay-card-n19,
.huay-card-vn {
  background: linear-gradient(0deg, #dc2a1e 0%, #f7df97 79%);
  border-radius: 10px;
  color: #ffffff;
}

.huay-card-product-name-hncy,
.huay-card-product-name-hnm,
.huay-card-product-name-hc2,
.huay-card-product-name-hc2o,
.huay-card-product-name-hco,
.huay-card-product-name-hcd,
.huay-card-product-name-n22,
.huay-card-product-name-sgn,
.huay-card-product-name-hnsp,
.huay-card-product-name-hnsuper,
.huay-card-product-name-hanoiaf,
.huay-card-product-name-hc,
.huay-card-product-name-hnlocal,
.huay-card-product-name-n19,
.huay-card-product-name-vn {
  background-color: #dc2a1e;
}

.huay-card-ml {
  background: rgb(42, 151, 83);
  background: linear-gradient(90deg, rgba(42, 151, 83, 1) 35%, rgba(162, 207, 160, 1) 100%);
  /*background-color: #8fcef9;*/
  border-radius: 10px;
  color: #ffffff;
}

.huay-card-djv {
  background-color: #33ffcc;
  border-radius: 10px;
  color: #ffffff;
}

.huay-card-dja {
  background: linear-gradient(90deg, rgba(190, 42, 106, 1) 35%, rgba(96, 53, 148, 1) 100%);
  border-radius: 10px;
  color: #ffffff;
}

.huay-card-vno {
  background-color: #ff9900;
  border-radius: 10px;
  color: #ffffff;
}

.huay-card-header {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  margin-bottom: 5px;
}

.huay-card-icon {
  border-radius: 50%;
  width: 50px !important;
  height: 50px !important;
  box-shadow:
    rgba(0, 0, 0, 0.09) 0px 2px 1px,
    rgba(0, 0, 0, 0.09) 0px 4px 2px,
    rgba(0, 0, 0, 0.09) 0px 8px 4px,
    rgba(0, 0, 0, 0.09) 0px 16px 8px,
    rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

.huay-card-body {
  background-color: #ffffff;
  color: var(--text-primary-color);
  width: 100%;
  border-radius: 10px;
}

.huay-card-period {
  float: right;
  background-color: #ffffff;
  color: var(--text-primary-color);
  width: 35%;
  border-radius: 40px;
  text-align: center;
  font-size: 0.9rem;
  margin: 10px 5px;
}

.huay-card-product-name {
  font-size: 1.3rem;
  display: inline-block;
  /*width: 60%;*/
  height: 100%;
  text-align: left;
  border-radius: 8px;
  margin-bottom: 6px;
  padding: 3px;
  background-color: #0b8457;
}

.huay-card-product-name-lotto {
  font-size: 1.3rem;
  display: inline-block;
  width: 60%;
  height: 100%;
  text-align: left;
  margin-top: 5px;
}

.huay-card-period-lotto {
  float: right;
  background-color: #ffffff;
  color: black;
  width: 30%;
  border-radius: 7px;
  text-align: center;
  font-size: 0.8rem;
  margin: 10px 5px;
  /*max-height:15px;*/
}

.huay-card-period-lotto-yk {
  float: left;
  background-color: #ffffff;
  border-radius: 10px;
  text-align: center;
  font-size: 0.8rem;
  margin: 5px 0px;
  padding: 2px;
  color: #022223;
  font-weight: bold;
}

.huay-card-name-lotto {
  text-align: left;
  font-weight: bold;
  font-size: 1.14rem;
  height: 2rem;
  display: flex;
  align-items: center;
}

.font-second-topic-deposit {
  font-size: 1.3rem;
}

.form-control.form-control-deposit:disabled {
  background: transparent !important;
  border: 1px solid white !important;
  color: white !important;
}

.form-control-deposit button.btn.dropdown-toggle.btn-light {
  background: transparent;
  color: white;
}

.bg-white-lot {
  background: #ffffff 0% 0% no-repeat padding-box;
  box-shadow: 0px 3px 6px #00000029;
  border-radius: 8px;
}

.bg-white-result {
  background: transparent linear-gradient(180deg, #d9e5ee 0%, #cbd4db 100%) 0% 0% no-repeat
    padding-box;
  box-shadow: 0px 3px 6px #00000029;
  border-radius: 8px;
  height: auto;
}

@media screen and (max-width: 768px) {
  .font-amount-wd-af {
    top: 30%;
    font-size: 1.1rem;
  }

  .mr-icon-regis {
    margin-right: 15%;
  }

  .section-title-register {
    padding: 3% 4% !important;
  }

  .form-control-deposit {
    padding: 8px !important;
  }

  .section-title-deposit {
    padding: 9px 17px;
    font-size: 1.5rem;
  }

  .btn-deposit {
    font-size: 1.3rem !important;
  }

  .deposit-step-topic {
    font-size: 1.5rem;
  }

  .font-second-topic-deposit {
    font-size: 1rem;
  }

  .img-step {
    width: 45%;
  }

  .bar-back-lottery {
    padding: 4px;
  }

  .section-title-lottery {
    text-align: center;
    padding: 5px 10px;
  }

  .section-title {
    /*background: transparent linear-gradient(180deg, #316050 0%, #2C4F48 100%) 0% 0% no-repeat padding-box;*/
  }

  .huay-card-name-lotto {
    font-size: 1rem;
  }
}

.huay-card-name-lotto-yk {
  text-align: left;
  font-weight: bold;
  font-size: 1.14rem;
  height: 0.8rem;
  display: flex;
  align-items: center;
}

@media screen and (max-width: 768px) {
  .section-title-result {
    width: 100%;
    margin-left: 0%;
  }

  .huay-card-name-lotto-yk {
    font-size: 1rem;
  }
}

.huay-card-period-yk {
  float: right;
  background-color: #ffffff;
  color: var(--text-primary-color);
  width: 40%;
  border-radius: 7px;
  text-align: center;
  font-size: 0.9rem;
  margin: 10px 5px;
}

.huay-card-product-name-yk {
  font-size: 1.3rem;
  display: inline-block;
  width: 53%;
  height: 100%;
  text-align: left;
  margin-top: 5px;
}

.huay-card-border-right {
  background: url(../custom/vertical-bar.png) no-repeat right;
  background-size: 2px 90%;
}

.huay-card-border-bottom-right {
  background: url(../custom/horizontal-bar.png) no-repeat bottom right;
  background-size: 80% 2px;
  padding-bottom: 5px;
}

.huay-card-border-bottom-left {
  background: url(../custom/horizontal-bar.png) no-repeat bottom left;
  background-size: 80% 2px;
  padding-bottom: 5px;
  /*border-left: 1.5px solid #707070;*/
}

.huay-card-border-bottom-th {
  background-size: 2px 90%;
  border-bottom: 2px solid #707070;
}

.huay-card-border-separate {
  background: url(../custom/horizontal-bar.png) no-repeat top;
  background-size: 95% 2px;
}

.bg-theme-secondary {
  background-color: var(--bg-dark-color);
  color: var(--text-primary-color);
}

.result-number-text {
  font-size: 28px;
}

.choke-home-bar {
  padding: 3px;
  background: var(--bg-primary-color);
}

.choke-card-main {
  border-radius: 20px;
  margin: 20px 0px;
  background: url(../custom/card-main-bg.png) no-repeat;
  -webkit-background-size: cover; /* For WebKit*/
  -moz-background-size: cover; /* Mozilla*/
  -o-background-size: cover; /* Opera*/
  background-size: cover; /* Generic*/
  color: var(--card-main-text-color);
  /* border: var(--border-primary-color) 1px solid; */
  height: auto;
  /* font-size: 26px; */
  font-weight: bold;
}

@media screen and (max-width: 768px) {
  .choke-card-main {
    background: url(../custom/card-main-bg.png) no-repeat;
  }
}

/* @supports (-webkit-touch-callout: none) {
  CSS specific to iOS devices
  .text-money-main {
    color: #9f7928;
    font-size: 2rem;
    font-weight: bold;
    line-height: 35px;
  }
}

@supports not (-webkit-touch-callout: none) {
  CSS for other than iOS devices
  .text-money-main {
    background: radial-gradient(
        ellipse farthest-corner at right bottom,
        #fedb37 0%,
        #fdb931 8%,
        #9f7928 30%,
        #8a6e2f 40%,
        transparent 80%
      ),
      radial-gradient(
        ellipse farthest-corner at left top,
        #ffffff 0%,
        #ffffac 8%,
        #d1b464 25%,
        #5d4a1f 62.5%,
        #5d4a1f 100%
      );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background: #49317b;
    color: #ebab42;
    padding: 20px 15px 15px 15px;
    font-size: 2rem;
    font-weight: bold;
    line-height: 35px;
  }
} */

.register-logo-mobile {
  height: auto;
  width: 45%;
}

.main-banner-top {
  padding: 10px !important;
  background-color: azure;
  border-radius: 5px;
}

.text-money-main {
  background: #49317b;
  color: #ebab42;
  padding: 20px 15px 15px 15px;
  font-size: 2rem;
  font-weight: bold;
  line-height: 35px;
  border-radius: 10px;
  margin-top: -10px;
  margin-left: 10px;
  z-index: 0;
}

.card-info-main {
  background: #49317b;
  color: #ffffff;
  border-radius: 10px;
  margin-left: 10px;
}

.card-info-main a {
  color: white;
}

.card-info-main a:hover {
  color: var(--bg-secondary-color);
}

.card-info-main-mobile {
  background: #49317b;
  color: #ffffff;
  border-radius: 10px;
  margin-left: 10px;
  font-size: 0.8rem !important;
}

.card-info-main-mobile a {
  color: white;
  font-size: 0.8rem !important;
}

.card-info-main-mobile a:hover {
  color: var(--bg-secondary-color);
}

@media screen and (max-width: 768px) {
  .choke-card-sub {
    width: 90% !important;
    padding: 5px !important;
    margin-left: 5% !important;
  }
}

.choke-card-sub {
  border-radius: 10px !important;
  background: linear-gradient(to right, #3c3795, #a53594, #da2128);
  /* border: #fff 1px solid; */
  height: auto;
  margin-bottom: -110px;
  z-index: 100;
  position: relative;
  text-align: center;
  width: 86%;
  margin-left: 7%;
  padding: 10px;
}

.choke-bt-navbar {
  display: none;
}

.border-top-app-m {
  background: transparent linear-gradient(180deg, #fe8a3a 0%, #af5427 100%) 0% 0% no-repeat
    padding-box;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 6px;
  margin-bottom: 60px;
}

@media only screen and (max-width: 768px) {
  .choke-bt-navbar {
    background: transparent
      linear-gradient(180deg, rgb(182 135 30) 0%, rgb(184 142 32) 50%, rgb(182 134 30) 100%) 0% 0%
      no-repeat padding-box;
    overflow: hidden;
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 60px;
    transform: none;
    display: flex;
    justify-content: space-around;
    z-index: 19;
    padding-bottom: 5px;
  }

  /* Style the links inside the navigation bar */
  .choke-bt-navbar a {
    float: left;
    display: block;
    color: #262b2c;
    text-align: center;
    text-decoration: none;
    font-size: 17px;
    align-self: center;
    flex-basis: 0;
    flex-grow: 1;
  }

  .choke-bt-navbar a i {
    font-size: 16px;
    padding: 0px;
  }

  /* Change the color of links on hover */
  .choke-bt-navbar a:hover {
    /*background-color: #ddd;*/
    color: black;
  }

  /* Add a green background color to the active link */
  .choke-bt-navbar a.active {
    background-color: #04aa6d;
    color: white;
  }

  /* Hide the link that should open and close the navbar on small screens */
  .choke-bt-navbar .icon {
    display: none;
  }

  .choke-bt-menu-label {
    font-size: 1rem;
    margin-top: 0px;
    margin-bottom: 5px;
  }

  .choke-font-size {
    font-size: 1.2rem !important;
  }

  .bg-light-main {
    padding-bottom: 30px;
    margin-top: 40px;
  }

  .choke-bg-light {
    padding-top: 75px !important;
  }
}

.rotate {
  animation: rotation 4s infinite linear;
}

@keyframes rotation {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(359deg);
  }
}

.choke-font-size {
  font-size: 1rem !important;
}

.choke-bg-light {
  background: url(../custom/card-menu-bg.png) no-repeat center !important;
  -webkit-background-size: cover; /* For WebKit*/
  -moz-background-size: cover; /* Mozilla*/
  -o-background-size: cover; /* Opera*/
  background-size: cover; /* Generic*/
  border-radius: 10px;
  padding-top: 120px;
}

.bg-light-main {
  background-image: linear-gradient(#413f41, #5c595c, #c7c7c2, #e4e0e0) !important;
  border-radius: 15px;
}

.btn-theme-number-pad {
  color: #fff;
  background: transparent linear-gradient(270deg, #f4b126 0%, #e0b30d 100%) 0% 0% no-repeat
    padding-box;
  border-radius: 15px;
  font-size: 2rem !important;
  font-weight: 700;
  line-height: 3rem;
  padding: 0 0 3px 3px;
  box-shadow: inset -4px 2px 3px 2px #ffffffaa;
}

.btn-theme-number-pad div {
  border: 1px solid #fff;
  height: 100%;
  border-radius: 15px;
}

.btn-theme-rand-pad {
  color: #000;
  background: transparent linear-gradient(180deg, #c8c6c7 0%, #a4a4a4 100%) 0% 0% no-repeat
    padding-box;
  font-size: 1.3rem !important;
  font-weight: 700;
  line-height: 2rem;
  height: 100%;
  border-radius: 15px;
  padding: 0 0 3px 3px;
  box-shadow: inset -4px 2px 3px 2px #ffffffaa;
}

.btn-theme-rand-pad div {
  border: 1px solid #fff;
  height: 100%;
  border-radius: 15px;
}

.bg-lottery {
  background-color: white;
}

.btn-theme-cancel-last {
  color: #ffffff;
  background: #a0a0a0 0% 0% no-repeat padding-box;
  box-shadow: inset 0px 3px 6px #00000029;
  line-height: 2rem;
  border-radius: 10px;
}

.bg-lot-condition {
  border: 2px solid #7a7a7a;
  border-radius: 5px;
}

.head-lot-condition {
  background: transparent linear-gradient(90deg, #868686 0%, #7a7a7a 100%) 0% 0% no-repeat
    padding-box;
  border-radius: 5px;
  color: white;
  text-align: center;
  font-weight: bold;
  padding: 0 0 3px 3px;
  box-shadow: inset -4px 2px 3px 2px #ffffffaa;
}

.head-lot-condition div {
  padding: 8px;
  height: 100%;
  border-radius: 10px;
}

.detail-lot-condition {
  color: white;
  padding: 9px;
  font-size: 1rem;
}

.btn-theme-clear-all {
  color: #ffffff;
  background: transparent linear-gradient(180deg, #fd1657 0%, #e4162d 100%) 0% 0% no-repeat
    padding-box;
  border-radius: 5px;
  line-height: 1rem;
  border-radius: 10px;
}

.btn-theme-back-space {
  color: black;
  background: transparent linear-gradient(180deg, #fd1657 0%, #e4162d 100%) 0% 0% no-repeat
    padding-box;
  box-shadow: inset -4px 2px 3px 2px #ffffffaa;
  border-radius: 15px;
  font-size: 1rem !important;
  height: 100%;
  padding: 0 0 3px 3px;
}

.btn-theme-back-space div {
  border: 1px solid #fff;
  height: 100%;
  border-radius: 15px;
}

.bg-lottery-header-bar {
  color: #ffffff;
  background: url(../custom/pink-bg-2.png) no-repeat center;
  background-size: 100% 100%;
  border-radius: 9px;
  font-size: 1.5rem !important;
}

.btn-choke-rule {
  color: #ffffff !important;
  background-color: #dc3546;
}

.btn-app-rule {
  color: #ffffff !important;
  border: 1px solid #fff;
  font-size: 0.7rem;
}

.btn-choke-rule:hover {
  color: #ffffff !important;
}

.choke-lotto-title {
  color: #ffffff;
  line-height: 1;
  margin-bottom: 0px;
  font-size: 1.5rem;
  gap: 4px;
}

.choke-tanghuay-time_day {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 5px;
  padding-bottom: 0px;
  text-align: right;
  line-height: 15px;
  color: #fdf58f;
  overflow: hidden;
  font-size: 1.5rem;
  background: transparent linear-gradient(180deg, #393939 0%, #000000 100%) 0% 0% no-repeat
    padding-box;
  border-radius: 9px;
  height: 70%;
}

ol.choke-num-huay li {
  counter-increment: number;
}

ol.choke-num-huay li::before {
  /*content: counter(number) ". ";*/
  /*font-weight: bold;*/
  /*width: 1.2em;*/
  /*text-align: left;*/
  /*display: inline-block;*/
  /*margin-right: 10px;*/
  /*padding-left: 3px;*/
  /*font-size: 80%;*/
  /*line-height: 1.2rem;*/
  /*align-self: center;*/
}

ol.choke-num-huay {
  /*background: rgba(0,0,0,0.6) 0% 0% no-repeat padding-box;*/
  color: #cd8b3e;
}

.choke-nav-link.active {
  color: #ffffff;
  background: transparent linear-gradient(270deg, #8f5d07 0%, #e2b40d 100%) 0% 0% no-repeat
    padding-box;
  border-right: 1px solid #f4f2c5;
  font-weight: bold;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.choke-nav-link.active:hover {
  color: white;
}

.choke-nav-link {
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  background: #707070 0% 0% no-repeat padding-box;
  border-right: 1px solid #f4f2c5;
  color: white;
  margin: 5px;
  min-height: 60px;
}

.choke-nav-link:hover {
  color: #ba8732;
}

@media screen and (max-width: 768px) {
  .bg-list-tang {
    padding: 2px 10px;
  }

  .btn-theme-clear-all {
    font-size: 0.8rem;
  }

  .choke-nav-link {
    font-weight: normal;
  }
}

.choke-nav-link2.active {
  color: white;
  background: linear-gradient(180deg, rgba(247, 206, 96, 1) 0%, rgba(188, 116, 5, 1) 100%);
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 400;
}

.choke-nav-link2 {
  display: flex;
  background: transparent linear-gradient(180deg, #797979 0%, #c1c1c1 100%) 0% 0% no-repeat
    padding-box;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  font-weight: 400;
  color: white;
  margin: 5px;
  padding: 14px;
}

.choke-nav-link2:hover {
  color: black;
}

.btn-outline-choke {
  color: white;
  font-size: 1.1rem;
  line-height: 1;
  font-weight: bold;
  text-align: center !important;
  border-radius: 5px;
  background: transparent linear-gradient(180deg, #797979 0%, #c1c1c1 100%) 0% 0% no-repeat
    padding-box;
}

.btn-outline-choke.active {
  background: transparent linear-gradient(180deg, #f8d364 0%, #ba7202 100%) 0% 0% no-repeat
    padding-box;
  color: black;
}

.btn-outline-choke:hover {
  color: black;
}

i.fas.fa-user-plus.mr-2 {
  font-size: 1.2rem;
  align-self: center;
}

.p-3.mt-2.mb-0.fixed-bottom.ng-star-inserted {
  background: transparent
    linear-gradient(180deg, rgba(224, 194, 119, 0.9) 0%, rgba(191, 145, 105, 0.9) 100%) 0% 0%
    no-repeat padding-box !important;
}

@media screen and (max-width: 768px) {
  .btn-outline-choke {
    font-weight: normal;
  }
}

.btn-price {
  color: white;
  line-height: 1.8rem;
  font-weight: bold;
  text-align: center !important;
  background: transparent linear-gradient(180deg, #f8d364 0%, #ba7202 100%) 0% 0% no-repeat
    padding-box;
}

.bg-list-tang {
  color: white;
  line-height: 1.8rem;
  font-weight: bold;
  text-align: center !important;
  border-radius: 3px;
  background: #c28e11;
}

.bootstrap-select.form-control.form-control-channel {
  padding: 0 !important;
}

.btn-price-numpad {
  color: white;
  line-height: 2rem;
  text-align: left !important;
  background: transparent linear-gradient(180deg, #18c95d 0%, #4ac843 100%) 0% 0% no-repeat
    padding-box;
  box-shadow: inset -4px 2px 3px 2px #ffffffaa;
  font-size: 1.2rem;
  font-weight: 100;
  border-radius: 50px;
  padding: 0 0 2px 2px;
  height: 100%;
  justify-content: flex-start;
}

.btn-price-numpad div {
  border: 1px solid #fff;
  height: 100%;
  width: 100%;
  border-radius: 50px;
  padding: 0 20%;
  font-weight: bold;
  color: black;
}

.bg-number-sets {
  color: black;
  line-height: 2rem;
  text-align: left !important;
  background: transparent linear-gradient(180deg, #fe8d17 0%, #e24b14 100%) 0% 0% no-repeat
    padding-box;
  border-radius: 50px;
  padding: 0 0 2px 2px;
  box-shadow: inset -4px 2px 3px 2px #ffffffaa;
  font-size: 1.2rem;
  font-weight: 100;
  height: 100%;
}

.bg-number-sets div {
  border: 1px solid #fff;
  height: 100%;
  border-radius: 50px;
  padding: 0 20%;
  font-weight: bold;
}

.pagemodal-wrapper.open .pagemodal {
  margin-top: 100px !important;
}

.pagemodal-wrapper.open .pagemodal.pagemodal-price {
  margin-top: 10% !important;
  background: transparent
    linear-gradient(180deg, rgba(32, 114, 42, 0.9) 0%, rgba(88, 131, 38, 0.9) 100%) 0% 0% no-repeat
    padding-box;
}

.btn-outline-danger-choke {
  color: var(--text-primary-color) !important;
  background-color: white !important;
  background-image: none;
  border-color: var(--bg-primary-color) !important;
  word-wrap: break-word;
  overflow: hidden;
}

.btn-outline-danger-choke.btn-pang-3digit {
  width: 53px;
}

.btn-outline-danger-choke.btn-pang-2digit {
  width: 43px;
}

.btn-outline-danger-choke.active {
  color: var(--text-on-bg-primary-color) !important;
  background-color: #c9881a !important;
  font-size: 1.1rem;
  line-height: 1;
}

.star-center {
  font-size: 0.75rem !important;
  margin-left: -22px !important;
  margin-top: 7.5px !important;
}

.choke-btn-font {
  font-size: 1.2rem !important;
  line-height: 1 !important;
  height: auto !important;
}

.result-card {
  border-radius: 5px;
  border: 1px solid;
  /* margin-top: 5px;  */
  z-index: 1;
  /* padding: 15px 20px; */
}

.result-card span {
  margin-top: 5px;
  margin-bottom: 5px;
  color: var(--text-primary-color);
}

.result-card-header {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  font-size: 0.9rem;
  min-height: 40px;
  margin-top: 10px;
}

.result-flag-border {
  border-radius: 50%;
  width: 25px;
  height: 25px;
  border: 1px solid var(--text-primary-color);
}

.result-text-product-mobile {
  font-size: 1rem;
}

.text-award-choke {
  font-weight: bold;
  font-size: 1.7rem;
  margin-top: -10px;
  margin-bottom: 7px;
  letter-spacing: 1.2px;
}

.toast-container {
  max-width: 90vw !important;
}

.padding-banner-login {
  padding: 0% 8% !important;
}

.padding-banner-login-color {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  background: transparent linear-gradient(180deg, #ff9800 0%, #9f6207 100%) 0% 0% no-repeat
    padding-box;
}

.padding-app-login {
  padding: 1% 5% !important;
}

.padding-broadcast-login {
  padding: 1.5% 8% !important;
}

.broadcast-row {
  background: #bca989;
  height: 30px;
  color: white;
  padding: 21px;
}

.broadcast-row-main {
  background: #ffffff 0% 0% no-repeat padding-box;
  border: 1px solid #c67b36;
  border-radius: 5px;
  height: 30px;
  color: white;
  padding: 20px 8px;
  margin-top: -20px;
}

.broadcast-row-main-app {
  background: transparent linear-gradient(180deg, #1eb53b 0%, #188b2f 100%) 0% 0% no-repeat
    padding-box;
  border-radius: 15px;
  height: 30px;
  color: #fff;
}

.broadcast-row-main-app-dark {
  background: #17212f;
  border-radius: 24px;
  height: 30px;
  color: white;
}

.broadcast-icon-mobile {
  padding: 5px;
  /* border-right: 1px solid #585858; */
  /*box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px,rgba(0, 0, 0, 0.22) 0px 15px 12px;*/
}

.txt-notice-main {
  line-height: 30px;
  font-size: 1rem;
  color: white;
  width: 100%;
  display: inline-flex;
}

.image-btn-effect:hover {
  border: 1px rgba(78, 45, 128, 0.5) solid;
  border-radius: 10px;
  padding: 5px;
  box-shadow:
    inset 0 0 5px rgba(78, 45, 128, 0.7),
    0 0 5px rgba(78, 45, 128, 0.4);
  outline-color: rgba(78, 45, 128, 0);
  outline-offset: 10px;
  text-shadow: 1px 1px 2px #e4c467;
}

.image-btn-effect2:hover {
  transform: scale(1.05);
}

.image-btn-effect2:hover .font-amount-wd-af {
  top: 55%;
}

.image-btn-effect3:hover {
  transform: scale(0.91);
  cursor: pointer;
}

.border-setting-profile {
  box-shadow: -2px 0 1px 0px rgba(20, 20, 20, 0.9);
}

.show-cursor {
  cursor: pointer;
}

.btn-jubwin {
  animation: letter-flicker 2s linear infinite;
  height: 100%;
  font-weight: bold;
  font-size: 1rem;
}

.btn-rule {
  background: linear-gradient(0deg, #85705b 0%, #c19951 79%) padding-box;
  color: white;
  width: 95%;
  font-size: 0.8rem;
}

.btn-rate {
  background-color: #444347;
  color: white;
  width: 95%;
  font-size: 0.8rem;
}

.btn-close-time {
  background: #be1d2d;
  color: white;
  width: 95%;
  font-size: 0.8rem;
}

.badge-primary-mhandee {
  color: #fff;
  background-color: #444347;
}

.login-btn {
  border: var(--border-secondary-color) 1px solid;
  background-color: var(--main-background);
  padding-top: 10px;
  padding-bottom: 10px;
}

.img-game-login {
  width: 100%;
  height: auto;
  border-radius: 10px;
}

.img-top-lotto-login {
  width: 100%;
  height: auto;
  display: block;
}

.border-top-lotto {
  background: linear-gradient(to bottom, #6e6c6d, #020202);
  border-radius: 5px;
  padding: 3px;
}

/*.detail-top-lotto {*/
/*  border-radius: 5px;*/
/*  background-color: white;*/
/*  position: absolute;*/
/*  left: 50%;*/
/*  top: 70%;*/
/*  transform: translate(-50%, 50%);*/
/*}*/

.name-top-lotto-login {
  color: #000;
  font-weight: bold;
  padding: 10px;
  margin: 3px;
  margin-top: -5px;
  font-size: inherit;
  text-align: center;
  border-radius: 10px;
  background: transparent linear-gradient(180deg, #ef648d 0%, #f8a9bf 100%) 0% 0% no-repeat
    padding-box;
  box-shadow: inset 0px 0px 5px 5px #fff;
}

.bg-flag-on-top-lotto {
  float: right;
  position: absolute;
  right: 0px;
  top: 0px;
  z-index: 1000;
  background: transparent linear-gradient(180deg, #dca2b4 0%, #866dac 48%, #abb8da 100%) 0% 0%
    no-repeat padding-box;
  box-shadow:
    inset 0px 3px 6px #00000029,
    0px 3px 6px #00000033;
  padding: 8px;
  margin: 32px;
  border-radius: 5px;
  opacity: 1;
}

.flag-on-top-lotto {
  height: 25px;
  width: auto;
  border-radius: 50%;
  padding: 1px;
}

.flag-on-box-lotto {
  height: auto;
  width: 100%;
  border-radius: 3px;
}

.flag-on-box-lotto-result {
  height: auto;
  width: 100%;

  border-radius: 3px;
}

.fade-box {
  width: 100%;
  position: relative;
}

.fade-box::before {
  content: '';
  width: 100%;
  height: 100%;
  background: white;
  position: absolute;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 81%, rgba(255, 255, 255, 1) 101%);
}

img.img-flag-on-box-lotto-result {
  width: 76%;
  border-radius: 50%;
  box-shadow: 2px 2px 3px #00000029;
}

img.img-flag-on-main {
  width: 80%;
  border-radius: 50%;
  box-shadow: 2px 2px 3px #00000029;
}

.name-product-lot {
  color: black;
  font-weight: 600;
  padding: 4px;
}

.bg-date-lottery {
  background: #f5f5f5 0% 0% no-repeat padding-box;
  box-shadow: inset 0px 3px 6px #00000029;
  border: 1px solid #707070;
  border-radius: 11px;
  /*margin-left: -18%;*/
  height: 26px;
  padding-right: 33px !important;
  padding-left: 10px;
}

.bag-plus {
  align-self: center;
  padding: 8px;
}

.period-name-lot {
  font-size: 0.8rem;
  align-self: center;
  color: black;
  font-weight: 600;
  display: flex;
  align-items: center;
}

.white-col-lottery {
  background: white;
  border-radius: 15px;
  width: 100%;
}

.flag-on-top-lotto-m {
  height: 20px;
  width: auto;
  border-radius: 50%;
  padding: 1px;
}

.flag-on-countdown {
  height: 40px;
  width: auto;
  border-radius: 35%;
  /*padding: 1px;*/
  align-self: center;
}

.flag-on-countdown-la {
  height: 20px;
  width: auto;
  border-radius: 50%;
  /*padding: 1px;*/
  align-self: center;
}

.flag-on-countdown-yk-m {
  height: 23px;
  width: auto;
  border-radius: 50%;
  padding: 1px;
  align-self: center;
}

.flag-on-countdown-yk-m {
  height: 20px;
  width: auto;
  border-radius: 50%;
  padding: 1px;
  align-self: center;
}

.txt-flag-on-countdown-m {
  font-size: medium;
  font-weight: bold;
}

.top-lotto-text {
  color: white;
  font-weight: bolder;
  font-size: 1.5rem;
}

.text-top {
  padding-left: 20%;
  padding-top: 15px;
  padding-bottom: 5px;
}

.bg-promote-login {
  background: rgba(254, 252, 243, 0.7);
  justify-content: space-between;
  border-radius: 10px;
}

.btn-remain-text-login {
  background: transparent linear-gradient(180deg, #abb8da 0%, #866dac 46%, #060000 100%) 0% 0%
    no-repeat padding-box;
  border-radius: 1px;
  opacity: 1;
  color: white;
  width: 95%;
  font-size: 0.8rem;
}

.btn-period-text-login {
  background: #7491ab 0% 0% no-repeat padding-box;
  box-shadow: inset 0px 3px 6px #00000029;
  border-radius: 2px;
  opacity: 1;
  color: black;
  width: 95%;
  font-size: 0.8rem;
}

@media screen and (min-width: 992px) and (max-width: 1120px) {
  .btn-remain-text-login {
    width: 95%;
    font-size: 0.6rem;
  }

  .btn-period-text-login {
    font-size: 0.6rem;
  }
}

.lotto-ramian-time-login {
  width: 100%;
  display: flex;
  padding: 5px;
  border-top: none;
  text-align: right;
  font-size: 27px;
  line-height: 30px;
  color: #bbb;
  flex-direction: row;
  justify-content: center;
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 1px;
}

.top {
  position: relative;
  display: inline-block;
}

.top .detail-top-lotto {
  position: absolute;
  left: 50%;
  bottom: 17%;
  transform: translate(-50%, 50%);
  color: #fff;
  padding: 1px;
  border-radius: 5px;
  background-color: white;
  width: 86%;
}

.ng-image-slider .ng-image-slider-container .main {
  overflow: hidden;
  position: absolute;
  height: 100px !important;
  width: 100%;
}

.ng-image-slider {
  display: inline-block;
  position: relative;
  width: 100%;
  height: 100px !important;
}

.bg-promote-center {
  background: transparent linear-gradient(180deg, #c78d36 0%, #f4d751 100%) 0% 0% no-repeat
    padding-box;
  text-align: center;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  width: 80px;
  height: 59px;
  align-items: center;
}

.bg-promote-center-m {
  background: linear-gradient(180deg, #866dac 0%, #abb8da 100%) 0% 0% no-repeat padding-box;
  text-align: center;
  border-radius: 0.2rem;
  display: flex;
  justify-content: center;
  height: 1.65rem;
  align-items: center;
  padding-left: 6px;
  padding-right: 6px;
}

.img-promote-center {
  height: 22px;
}

.img-promote-center-m {
  height: 15px;
}

.text-yellow-login {
  text-align: left;
  letter-spacing: 0px;
  color: #333333;
  opacity: 1;
  font-weight: bold;
  margin-bottom: 6px;
  font-size: 1.2rem;
}

.text-desc-promote {
  color: #333333;
  font-size: 0.9rem;
}

@media screen and (min-width: 768px) and (max-width: 1120px) {
  .text-yellow-login {
    font-size: large;
  }
}

.text-yellow-login-m {
  text-align: left;
  letter-spacing: 0px;
  color: #fff;
  opacity: 1;
  font-weight: bold;
  margin-bottom: 6px;
  font-size: small;
}

.bg-result-login {
  background: rgba(77, 42, 12, 0.53);
  padding: 20px;
  margin-top: 15px;
  border-radius: 10px;
  margin-bottom: 40px;
}

.result-login-topic {
  color: white;
  font-weight: bold;
  font-size: larger;
}

.result-login-topic-th {
  color: white;
  font-weight: bold;
}

.content-promote {
  align-items: center;
  /*justify-content: center;*/
}

.img-left {
  float: left;
  width: 10%;
  padding-left: 10px;
}

.text-huay-online {
  color: white;
  font-size: 1.5rem !important;
}

.text-huay-online img {
  width: 1.5rem !important;
}

.img-center-main,
.img-center {
  display: inline-block;
  width: 100%; /* Adjust as needed */
  text-align: center;
  font-size: 1rem;
  align-self: center;
  margin-left: -10%;
  color: #fff;
}

.img-center-main {
  margin-left: 9%;
}

.img-center.name-tab {
  color: #fff;
}

.bg-tab-content-main {
  background: rgba(22, 50, 78, 0.8) 0% 0% no-repeat padding-box;
  border-radius: 0px 0px 10px 10px;
  margin-top: 1%;
  margin-bottom: 20%;
  padding-top: 2%;
}

.img-left-main {
  border: 1px solid #f6f322;
  border-radius: 50%;
  padding: 3px;
  margin: 4px;
}

.section-title-register .img-center {
  font-size: 1.8rem;
}

.header-th-login {
  background: url(../custom/dark-pink-bg.png) no-repeat center;
  background-size: 100% 100%;
  border-radius: 31px;
  color: #fff;
  justify-content: center;
  font-weight: 100;
}

@media screen and (max-width: 768px) {
  .header-th-login {
    background: url(../custom/dark-pink-bg.png) no-repeat center;
    background-size: 100% 110%;
    border-radius: 4px;
    color: #fff;
    justify-content: center;
    font-weight: 100;
  }
}

.border-bottom-th-period {
  border-bottom: 1px solid #fff;
}

.text-period-login {
  place-self: center;
  font-size: 1rem;
}

.font-result-login {
  font-size: 1rem;
}

.th-result-login-game {
  color: white;
  font-weight: 100;
  text-align: center;
  font-size: 0.8rem;
  /*justify-content: space-evenly;*/
}

.th-result-login-game-color {
  color: white;
  font-size: 1rem;
}

.song-tua-lang {
}

.th-result-login-only {
  box-shadow: inset 0px 3px 6px #00000029;
  border-radius: 10px;
  border: 1px solid #fff;
}

.th-result-login-game-m {
  color: white;
  font-weight: 100;
  text-align: center;
  font-size: 1rem;
}

.header-result-game-m {
  color: white;
  font-weight: 100;
  text-align: center;
  font-size: 0.9rem;
}

.th-result-login-bg {
  color: black;
  background: white;
  box-shadow: inset 0px 3px 6px #00000029;
  border-radius: 5px;
  padding: 3px;
  font-weight: bold;
  margin-top: 3px;
  margin-bottom: 3px;
  font-size: larger;
  border: 1px solid #fed776;
}

.th-result-login-bg3 {
  color: black;
  background: white;
  box-shadow: inset 0px 3px 6px #00000029;
  border-radius: 5px;
  padding: 3px;
  font-weight: bold;
  margin-top: 3px;
  margin-bottom: 3px;
  font-size: larger;
  border: 1px solid #fed776;
}

.bg-topic-countdown-th {
  /*background: transparent linear-gradient(180deg, #403F3F 0%, #2B2C2F 34%, #01060F 100%) 0% 0% no-repeat padding-box;*/
  padding: 20px;
  color: white;
  font-weight: 100;
  align-items: center;
  background: url(../custom/bg-th-countdown.png) no-repeat top center;
  background-size: contain;
  background-position-y: center;
  width: 90px;
}

.bg-countdown-th {
  background: url(../custom/bg-th-countdown.png) no-repeat top center;
  background-size: contain;
  color: gray;
  font-weight: bold;
  background-position-y: center;
  color: white;
  font-weight: bold;
  overflow: hidden;
  width: 100%;
  padding: 20% 10%;
}

.bg-countdown-th-flag-top {
  background: transparent linear-gradient(180deg, #1431d7 0%, #187ba7 100%) 0% 0% no-repeat
    padding-box;
  color: gray;
  font-weight: bold;
  background-position-y: center;
  color: white;
  font-weight: bold;
  overflow: hidden;
  width: 18%;
  padding: 20%;
  border-radius: 5px;
}

.bg-countdown-th-flag-top.flag-app-main {
  width: 13%;
}

.bg-countdown-la {
  background: transparent linear-gradient(180deg, #403f3f 0%, #2b2c2f 34%, #01060f 100%) 0% 0%
    no-repeat padding-box;
  border: 1px solid #707070;
  border-radius: 5px;
  font-weight: bold;
  color: white;
  font-weight: bold;
  width: 25%;
}

.bg-countdown-la2 {
  background: transparent linear-gradient(180deg, #414141 0%, #c21328 45%, #060000 100%) 0% 0%
    no-repeat padding-box;
  border: 1px solid #707070;
  border-radius: 5px;
  font-weight: bold;
  color: white;
  font-weight: bold;
  width: 25%;
}

.th-txt {
  align-self: center;
  font-size: 1.1rem;
  font-weight: bold;
}

.bg-tang-th {
  white-space: nowrap;
  background: transparent linear-gradient(90deg, #69e3f4 0%, #05274d 100%) 0% 0% no-repeat
    padding-box;
  border-radius: 16px;
  align-self: center;
  padding: 5px;
  color: white;
}

.bg-tang-th a {
  color: white;
  font-size: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 3px;
}

.bg-countdown-card {
  text-align: -webkit-center;
  justify-content: space-between;
  background: #ffffff 0% 0% no-repeat padding-box;
  box-shadow: inset 0px 3px 6px #00000029;
  border-radius: 22px;
}

.bg-countdown-th-main {
  background: #ffffff 0% 0% no-repeat padding-box;
  box-shadow: inset 0px 3px 6px #00000029;
  border: 2px solid #f09107;
  color: black;
  border-radius: 50%;
  height: 35px;
  width: 35px;
  overflow: hidden;
}

.bg-countdown-th2 {
  background-color: #f5f5f5;
  border: #000 3px solid;
  padding: 8px 8px 3px 8px;
  color: #db2036;
  font-weight: bold;
  border-radius: 8px;
}

.bg-countdown-th2-main {
  background: #ffffff 0% 0% no-repeat padding-box;
  box-shadow: inset 0px 3px 6px #00000029;
  border: 2px solid #db2036;
  color: #000;
  border-radius: 50%;
  height: 35px;
  width: 35px;
  padding: 1px;
  overflow: hidden;
}

.bg-countdown-la-close {
  background-color: black;
  padding: 6px;
  color: gray;
  font-weight: bold;
  background-position-y: center;
  border-radius: 5px;
  width: 90px;
}

.bg-countdown-th-close {
  background: url(../custom/bg-th-countdown.png) no-repeat top center;
  background-size: contain;
  color: gray;
  font-weight: bold;
  background-position-y: center;
  width: 100%;
  padding: 20% 10%;
  margin-top: 5px;
}

.bg-countdown-th-close-main {
  background: white 0% 0% no-repeat padding-box;
  color: gray;
  font-weight: bold;
  border-radius: 50%;
  height: 40px;
  width: 40px;
  padding: 1px;
  overflow: hidden;
  font-size: 1rem !important;
  border: 2px solid #f09107;
}

.vl {
  background-color: #db2036;
  height: 21px;
  margin: 0 auto;
  width: 2px;
}

.vl-close {
  background-color: gray;
  height: 21px;
  margin: 0 auto;
  width: 2px;
}

.text-countdown-th {
  font-size: 3.1rem;
  font-weight: bold;
  color: #fefcf3;
  font-family: 'Chakra Petch', cursive;
}

.text-countdown-th-top {
  font-size: 1.5rem;
  font-weight: bold;
  color: #fefcf3;
  font-family: 'Chakra Petch', cursive;
}

.text-countdown-th-close {
  color: #707070 !important;
  font-size: 1.5rem;
}

.text-countdown-th-main {
  font-size: 1.3rem;
  justify-content: center;
  align-items: center;
  height: 100%;
  display: flex;
}

.text-countdown-la {
  font-size: 1rem;
  font-weight: bold;
  color: #fdf689;
}

.text-countdown-la2 {
  font-size: 1rem;
  font-weight: bold;
  color: #fdf689;
}

.white-line {
  background: #fff;
  width: 100%;
  margin: 2px;
  height: 4px;
  border-radius: 2px;
}

@media screen and (min-width: 769px) and (max-width: 991px) {
  .remain-time-main,
  .remain-time-main-none,
  .remain-left-red {
    font-size: 1rem;
  }

  .setting-main-icon {
    width: 77px;
  }

  .text-countdown-th-main {
    font-size: 1.4rem;
  }
}

.top-result-lotto-bg {
  background: transparent linear-gradient(180deg, #4caf50 0%, rgb(40 147 44) 50%, #8bc34a 100%) 0%
    0% no-repeat padding-box;
  border-radius: 10px;
  padding-bottom: 0px;
}

@media screen and (max-width: 768px) {
  img.img-flag-on-main {
    width: 100%;
  }

  .top-result-lotto-bg {
    border: transparent;
    background: transparent;
  }

  .broadcast-row-main-app-dark {
    border-radius: 0px;
  }

  .broadcast-row-main-app {
    border-radius: 20px;
  }

  .text-countdown-th2-main,
  .text-countdown-th-main {
    font-size: 1rem;
  }

  .bg-number-sets {
    line-height: 1rem;
    font-size: 1rem;
  }

  .pagemodal-wrapper.open .pagemodal.pagemodal-price {
    margin-top: 22% !important;
  }

  .star-center {
    margin-left: -20px !important;
  }

  .bg-countdown-th-close-main,
  .bg-countdown-th-main,
  .bg-countdown-th2-main {
    padding: 0px;
    background: transparent;
    color: white;
    height: 27px;
    width: 27px;
  }

  .th-txt {
    font-size: 1rem;
    color: white;
  }

  .bg-countdown-th-main {
    border: 1px solid #f09107;
  }

  .bg-countdown-th2-main {
    border: 1px solid #db2036;
  }

  .bg-countdown-th2,
  .bg-countdown-th {
    width: 25%;
  }
}

.text-countdown-th-name {
  font-size: 1.3rem;
  color: white;
}

.text-countdown-th-name-top {
  font-size: 1rem;
  color: white;
  height: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.text-countdown-th-name-top-main {
  font-size: 0.8rem;
  color: white;
  height: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.text-countdown-la-name {
  font-size: 0.7rem;
  /*font-weight: bold;*/
  color: white;
}

.text-countdown-th-main-name {
  font-size: large;
  color: white;
}

.text-countdown-th-name2 {
  font-size: larger;
  font-weight: bold;
  color: #db2036;
}

.text-countdown-th-name-main {
  font-size: large;
  color: #fff;
  text-align: center;
}

.text-countdown-th-name-main2 {
  font-size: large;
  color: white;
  text-align: center;
}

.text-countdown-th-name-close {
  font-size: 0.8rem;
  font-weight: bold;
  color: #707070 !important;
  text-align: center;
}

.text-countdown-th-name-close-main {
  font-size: medium;
  font-weight: bold;
  color: white;
  text-align: center;
}

@media screen and (max-width: 1200px) {
  .bg-topic-countdown-th,
  .bg-countdown-th-close,
  .bg-countdown-th {
    /*width: 70px;*/
  }

  .text-countdown-th {
    font-size: 2rem;
  }

  .flag-on-countdown {
    height: 29px;
  }

  .text-countdown-th-name {
    font-size: 1rem;
  }
}

@media screen and (max-width: 970px) {
  .text-countdown-th {
    font-size: 2rem;
    display: flex;
    place-content: center;
  }

  .text-countdown-th-name2,
  .text-countdown-th-name {
    font-size: small;
    font-weight: bold;
  }

  .text-countdown-th-name-close {
    font-size: large;
    font-weight: bold;
    color: gray;
  }

  .bg-topic-countdown-th,
  .bg-countdown-th-close,
  .bg-countdown-th {
    width: 55px;
  }

  .flag-on-countdown {
    height: 20px;
  }
}

.uline-app-m {
  border-top: 1px solid #333333;
  width: 100%;
}

.ulineCountdown {
  border-top: 3px solid #fdf689;
  width: 20px;
  align-self: center;
}

.ulineCountdown-close {
  border-top: 3px solid gray;
  width: 20px;
  align-self: center;
}

.bg-row-result-game {
  background: rgba(40, 106, 42, 0.8);
  border-radius: 20px;
  min-height: 577px;
  padding-bottom: 16px !important;
}

@media screen and (max-width: 860px) {
  .text-countdown-th {
    font-size: 2rem;
    font-weight: bold;
  }

  .ulineCountdown,
  .ulineCountdown-close {
    width: 10px;
  }

  .text-countdown-th-name {
    font-size: medium;
    font-weight: bold;
    display: flex;
    justify-content: center;
  }

  .text-countdown-th-name-close {
    font-size: medium;
    font-weight: bold;
    color: gray;
    display: flex;
    justify-content: center;
  }
}

.uline {
  border-top: 1px solid #d9ab41;
  width: 50%;
}

.result-product-name-login-m {
  text-align: -webkit-left;
  font-size: 1rem;
}

.text-provider-name-login {
  color: #fff;
  padding: 13px;
  font-size: 0.8rem;
  height: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.img-provider-name-login {
  padding: 3px;
  border-radius: 20px;
}

.img-provider-name-login.active {
  padding: 0px;
  /*animation: glow1 1s infinite alternate;*/
  border: 3px solid #ffa200;
}

.img-contact-main {
  height: 2rem;
  width: auto;
}

.countdown-th-circle {
  justify-content: flex-end;
}

@media screen and (min-width: 767px) {
  .text-provider-name-login {
    font-size: 0.8rem;
    height: 10px;
  }

  .broadcast-row {
    /*border-radius: 15px;*/
  }

  .img-provider-name-login {
    padding: 5px;
    border-radius: 12px;
  }

  .main-remain-money {
    background: url(../custom/card-main-money.png) no-repeat top left;
    border-radius: 5px;
    background-size: cover;
  }
}

.topic-ponhuay-txt {
  color: white;
  text-align: center;
  font-size: 1rem;
  padding-top: 8px;
}

.bg-result-login-inner-m {
  position: absolute;

  overflow-y: scroll;
  left: 0;
  top: 0;
  right: 0;
  bottom: 10px;
  min-height: 532px;
}

.bg-result-login-inner-m::-webkit-scrollbar {
  display: none;
}

.bg-result-login-inner {
  border-radius: 10px;
  background: transparent
    linear-gradient(180deg, rgba(234, 208, 174, 0.5) 0%, rgba(206, 164, 97, 0.5) 100%) 0% 0%
    no-repeat padding-box;
  box-shadow: 0px 3px 6px #00000029;
  overflow-y: scroll;
  /*height: 870px;*/
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow-x: hidden;
}

.bg-login-popup {
  background: url(../custom/login-bg.jpg) no-repeat center;
  border-radius: 10px;
  background-size: cover;
}

@media screen and (max-width: 768px) {
  .bg-form-middle {
    /*background: transparent linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgb(0 0 0) 65%) 0% 0% no-repeat padding-box;*/
  }

  .bg-result-login-inner-m {
    height: 600px;
  }

  .bg-row-result-game {
    height: 650px;
    border-radius: 20px;
    margin-top: 3% !important;
    background: transparent;
  }

  .btn-close-time {
    /*padding: 2px !important;*/
    /*width: 4.8rem;*/
  }

  .bg-result-login-inner {
    height: 870px;
    position: absolute;
    bottom: none;
    padding-bottom: 200px;
  }

  .uline-app-m {
    border-top: 3px solid #333333;
    width: 100%;
    border-radius: 5px;
  }

  .bg-main-m {
    background: transparent
      linear-gradient(180deg, #afbddf 0%, #a59fda 15%, #997ad5 36%, #956cd3 47%, #e0a5b8 100%) 0% 0%
      no-repeat padding-box;
    margin-top: -8px;
  }

  .countdown-th-circle {
    justify-content: center;
  }
}

.close-button-popup-login {
  border-radius: 50%;
  border: 4px solid #fff;
  /*padding: 20px;*/
  width: 40px;
  height: 40px;
}

.main-remain-money {
  background: url(../custom/card-main-money.png) no-repeat center;
  border-radius: 10px;
  background-size: cover;
  border: 2px solid yellow;
  /*border-left: 3px white solid;*/
  /*border-right: 3px white solid;*/
}

.text-balance-main {
  font-size: 2.8rem;
  color: white;
  font-weight: 100;
}

.text-white-balance {
  color: #e6e6e6;
  font-size: 1.2rem;
  align-self: center;
}

.bg-show-hide,
.bg-username {
  background: transparent
    linear-gradient(180deg, #b09049 0%, #f3de79 35%, #f3de79 65%, #b09049 100%) 0% 0% no-repeat
    padding-box;
  border-radius: 5px 5px 0px 0px;
  color: black;
  text-align: center;
  width: 36%;
  margin: 0 auto;
}

.img-main-wallet {
  height: 100%;
}

.bg-show-hide {
  /*background: #8B503A;*/
}

.bg-statement {
  box-shadow: 0px 3px 6px #00000029;
  border: 1px solid #ffffff;
  border-radius: 5px;
  color: white;
  font-weight: bold;
  /* text-align: center; */
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  padding: 7px;
  font-size: large;
}

.bg-statement-m {
  background: linear-gradient(180deg, #dcb45f, #f1eaaa, #dcb45f, #f1eaaa, #dcb45f) 0% 0% no-repeat
    padding-box;
  border-radius: 5px;
}

.bg-main-button {
  background: transparent linear-gradient(180deg, #111216 0%, #17312a 100%) 0% 0% no-repeat
    padding-box;
  border-radius: 10px;
}

.bg-main-button-m {
  background: transparent linear-gradient(180deg, #cb5769 0%, #f27689 100%) 0% 0% no-repeat
    padding-box;
  margin-top: -3px;
  border-radius: 0px 0px 5px 5px;
}

.withdraw {
  background: #fbb03b 0% 0% no-repeat padding-box;
  border-radius: 5px;
  padding: 12px 3px;
}

.deposit {
  background: #15c296 0% 0% no-repeat padding-box;
  border-radius: 5px;
  padding: 12px 3px;
}

.deposit-font {
  font-size: 1.9rem;
}

.withdraw a,
.deposit a {
  color: white;
  height: 100%;
}

.width-icon-deposit,
.width-icon-withdraw {
  width: 25%;
  height: auto;
}

.withdraw .img-center,
.deposit .img-center {
  font-size: 1.2rem;
  font-weight: bold;
}

.border-bottom-card-main {
  background: white;
  height: 2px;
  border-radius: 100px;
}

.border-bottom-card-bank-add {
  background: #ca833a;
  height: 2px;
  border-radius: 100px;
}

.d-w-btn {
  display: table-row;
}

.balance-btn {
  background: transparent linear-gradient(180deg, #1ea4d9 0%, #083359 100%) 0% 0% no-repeat
    padding-box;
  border-radius: 5px;
  color: white;
  height: 2.2rem;
}

.withdraw a {
  color: white;
  border-radius: 5px;
  height: 100%;
}

.request-all-btn {
  background: transparent linear-gradient(180deg, #16324e 0%, #030410 100%) 0% 0% no-repeat
    padding-box;
  border: 1px solid #f9d89f;
  border-radius: 5px;
  color: #fff;
  height: 2.2rem;
}

.request-all-btn a,
.balance-btn a {
  justify-content: center;
  color: white;
  align-items: center;
  height: 100%;
  font-size: 1rem;
}

@media screen and (max-width: 768px) {
  .deposit-font {
    font-size: 1.7rem;
  }

  .balance-btn-text {
    font-size: 0.9rem;
  }

  .request-all-btn,
  .balance-btn {
    height: 1.8rem;
  }

  .bg-8main-m {
    background: transparent;
    border-radius: 10px;
  }

  .size-8main-m {
    width: 20%;
  }

  .border-bottom-card-main {
    height: 2px;
    background: #1a1a1a;
    margin-left: 15%;
    width: 70% !important;
  }

  .d-w-btn {
    display: flex;
  }
}

.request-all {
  background-color: #642737;
  border-radius: 5px;
  color: white;
  font-weight: bold;
  align-items: center;
  justify-content: space-around;
  padding: 5px;
  font-size: 1rem;
}

.request-all-m {
  background-color: #642737;
  border-radius: 5px;
  color: white;
  justify-content: space-around;
  font-weight: bold;
  text-align: center;
  font-size: 1.2rem;
}

.box-btn {
  position: relative;
  padding: 13px 2px;
  color: white;
  background: transparent linear-gradient(180deg, #fff4f6 0%, #ff7b8f 44%, #86273a 100%) 0% 0%
    no-repeat padding-box;
  border-radius: 50%;
  text-align: center;
  font-weight: bold;
  border: 2px #fff solid;
  font-size: 0.7rem;
}

@media screen and (min-width: 769px) and (max-width: 991px) {
  .box-btn {
    font-size: 0.6rem;
  }
}

.dot {
  height: 25px;
  width: 25px;
  background-color: #ff0000;
  border-radius: 50%;
  display: inline-block;
}

.report-main-m {
  background: transparent linear-gradient(180deg, #414141 0%, #c21328 45%, #060000 100%) 0% 0%
    no-repeat padding-box;
  border-radius: 10px;
  color: white;
  font-weight: bold;
  align-items: center;
  justify-content: center;
  padding: 9px;
  margin-bottom: 10px;
}

.report-main-m:hover {
  color: white;
}

.bg-huay-almost-close {
  background: transparent linear-gradient(180deg, #fff4f6 0%, #ff7b8f 44%, #86273a 100%) 0% 0%
    no-repeat padding-box;
  box-shadow: 0px 3px 6px #00000029;
  border-radius: 10px;
  width: 100%;
}

.head-huay-almost-close {
  background: transparent linear-gradient(180deg, #fff4f6 0%, #ff7b8f 44%, #86273a 100%) 0% 0%
    no-repeat padding-box;
  box-shadow: 0px 0px 6px #ffffff29;
  width: 100%;
  color: white;
  font-weight: bold;
  text-align: left;
  padding: 10px;
  font-size: larger;
}

.head-huay-almost-close-m {
  background: transparent linear-gradient(180deg, #fff4f6 0%, #ff7b8f 44%, #86273a 100%) 0% 0%
    no-repeat padding-box;
  width: 80%;
  color: white;
  font-weight: bold;
  text-align: center;
  padding: 10px;
  font-size: larger;
  border-radius: 3px;
  filter: drop-shadow(0 0 0.2rem gray);
}

.flag-near-close-lotto {
  width: 80%;
  /*height: 13%;*/
  border-radius: 50%;
  margin-right: 3px;
  align-self: center;
}

.flag-near-close-lotto-none {
  width: 80%;
  /*height: 13%;*/
  border-radius: 50%;
  margin-right: 3px;
  align-self: center;
  filter: grayscale(100%);
}

.bg-near-close-lotto-detail {
  background: transparent linear-gradient(180deg, #d9e5ee 0%, #cbd4db 100%) 0% 0% no-repeat
    padding-box;
  box-shadow: inset 0px 3px 6px #00000029;
  border-radius: 26px 0px 0px 26px;
  font-size: 1.3rem;
  align-items: center;
}

.bg-near-close-lotto-detail-0 {
  background: transparent linear-gradient(90deg, #d9e5ee 34%, #cbd4db 60%, #c65149 100%) 0% 0%
    no-repeat padding-box;
  box-shadow: inset 0px 3px 6px #00000029;
  border-radius: 26px 0px 0px 26px;
  font-size: 1.3rem;
  align-items: center;
}

.bg-near-close-lotto-detail-0 .lotto-name-main {
  color: #1a1a1a;
}

.bg-near-close-lotto-detail-0 .close-time-near-close-lotto {
  background: #ff0000 0% 0% no-repeat padding-box;
  border-radius: 9px;
  color: white;
  font-size: 0.9rem;
  margin-left: -9%;
  padding: 2px 10px 3px 10px;
}

.bg-near-close-lotto-detail-close {
  background: transparent linear-gradient(180deg, #d9e5ee 0%, #cbd4db 100%) 0% 0% no-repeat
    padding-box;
  box-shadow: inset 0px 3px 6px #00000029;
  font-size: 1.3rem;
  align-items: center;
  border-radius: 27px 0px 0px 27px;
}

.space-box-white-remain-time {
  flex-grow: 1;
}

.space-box-white-remain-time-close {
  width: 76%;
}

.close-time-near-close-lotto-close,
.close-time-near-close-lotto {
  color: #000;
  text-align: center;
  align-self: center;
  background: #fbb03b 0% 0% no-repeat padding-box;
  border-radius: 9px;
  padding: 2px 10px 3px 10px;
  font-size: 0.9rem;
  margin-left: -9%;
}

.close-time-near-close-lotto-close {
  background: #707070 0% 0% no-repeat padding-box;
}

.lotto-name-main {
  color: #1a1a1a;
  font-size: 0.9rem;
  white-space: nowrap;
}

.flag-word-main {
  color: white;
  font-size: 1.1rem;
  white-space: nowrap;
}

.lotto-name-main-none {
  color: #707070;
  font-size: 0.9rem;
  margin: 7px 0px;
}

.flag-word-main-none {
  color: #707070;
  font-size: 1rem;
  white-space: nowrap;
}

.remain-time-main {
  color: #00c300;
}

.remain-time-main-none {
  color: #707070;
}

.icon-clock-main {
  font-size: 30px;
  color: #00c300;
  display: flex;
  justify-content: center;
}

.icon-backspace {
  font-size: 30px;
}

.icon-clock-main-none {
  color: #707070;
}

.remain-money-text-m {
  font-size: large;
  color: var(--border-secondary-color);
}

.line-main-m {
  background: linear-gradient(180deg, #403f3f 0%, #01060f 100%) 0% 0% no-repeat padding-box;
  width: 100%;
  padding: 2px;
  border-radius: 5px;
}

.line-regis {
  background: #cb0707;
  width: 100%;
  padding: 1px;
  border-radius: 5px;
}

.remain-left-red {
  color: #15c296;
}

.remain-left-red-0 {
  color: #ff0000;
}

.remain-left-red-none {
  color: #707070;
}

.bg-card-head {
}

.username-text-head {
  color: #fff;
  font-size: large;
}

.bg-balance {
  color: white;
  background: url(../custom/bg-balance.png) no-repeat center;
  font-weight: bold;
  font-size: 1.2rem;
  width: 100%;
  border-radius: 10px;
}

.bg-lottery-product {
  position: relative;
  padding: 0px 5px;
  color: white;
  background: transparent linear-gradient(180deg, #dfdfdf 0%, #dfdfdf 100%) 0% 0% no-repeat
    padding-box;
  border-radius: 20px;
  text-align: center;
  box-shadow: 0 3px 2px -2px #a39c9c;
}

.bg-lottery-product::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 18px;
  padding: 5px;
  background: transparent linear-gradient(180deg, #b3b3b3 0%, #e2e2e2 100%) 0% 0% no-repeat
    padding-box;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.img-lottery-product {
  /*margin-top: 1px;*/
  /*margin-bottom: 1px;*/
  height: 166px;
}

@media screen and (min-width: 583px) and (max-width: 760px) {
  .img-lottery-product {
    /*margin-top: -1px;*/
    /*margin-bottom: -2px;*/
    height: 166px;
    margin-left: -2px;
  }
}

.bg-flag-lottery-product {
  box-shadow:
    inset 0px 3px 6px #00000029,
    0px 3px 3px #00000033;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.bg-product-name-lottery-yk {
  background: transparent linear-gradient(180deg, #dca2b4 0%, #866dac 100%) 0% 0% no-repeat
    padding-box;
  box-shadow: 0px 3px 3px #00000029;
  border-radius: 5px;
  height: 100%;
}

.bg-product-name-lottery-yk5 {
  background: transparent linear-gradient(180deg, #f8e67d 0%, #a56c0b 100%) 0% 0% no-repeat
    padding-box;
  box-shadow: 0px 3px 3px #00000029;
  border-radius: 5px;
  height: 100%;
}

.flag-on-lottery-product {
  height: 35px;
  width: auto;
  border-radius: 50%;
  padding: 1px;
}

.bg-rule-product {
  background: white;
  border-radius: 5px;
}

.flag-bg-product {
  position: initial;
  /*background: url(/assets/custom/flag/YK.png) repeat !important;*/
  background-size: cover !important;
  background-position: center !important;
  border-radius: 15px 0px 0px 15px;
}

.close-period-text {
  color: var(--border-secondary-color);
  font-weight: 500 !important;
  /*font-size: small !important;*/
}

.bg-yk-round {
  background: #ffffff 0% 0% no-repeat padding-box;
  border-radius: 5px;
  color: #97281e;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: xx-large;
}

.bg-bet-num {
  /*background-color: white;*/
  color: black;
  border-radius: 10px;
}

.bg-result {
  background-color: white;
  color: #383838;
  border-radius: 10px;
}

.text-th-award1 {
  font-weight: bold;
  color: var(--text-result);
}

.result-th-award1 {
  font-weight: bold;
  color: var(--text-result);
  font-size: 3rem;
}

.text-th-award {
  font-weight: bold;
  color: var(--text-result);
  font-size: medium;
}

.result-th-award {
  font-weight: bold;
  color: var(--text-result);
}

.text-th-award2 {
  font-weight: bold;
  color: var(--text-result);
  font-size: large;
}

.result-th-award2 {
  font-weight: bold;
  color: red;
  font-size: 3rem;
}

.text-result-topic {
  font-weight: bold;
}

.bg-setting-main {
  background-color: #e6e6e6;
  color: black;
  border-radius: 5px;
}

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

.tel-setting {
  line-height: 1.3 !important;
}

.box-countdown-th {
  width: 100%;
  height: 135px;
  color: white;
  text-align: center;
}

.box-countdown-th-main {
  width: 100%;
  height: 153px;
  color: white;
  text-align: center;
}

.box-countdown-th-main-m {
  width: 100%;
  height: 143px;
  color: white;
  text-align: center;
}

.container-countdown {
  width: 100%;
  /*position: relative;*/
}

.blue-test {
  background-color: rgba(255, 240, 242, 0.7);
  position: absolute;
  top: -58px;
  width: 93%;
  border-radius: 10px;
}

.blue-test-main {
  background-color: rgba(255, 240, 242, 0.7);
  position: absolute;
  top: -58px;
  width: 88%;
  border-radius: 25px;
}

.green-test {
  background: transparent linear-gradient(180deg, #fff4f6 0%, #ff7b8f 51%, #86273a 100%) 0% 0%
    no-repeat padding-box;
  position: absolute;
  top: -49px;
  border-radius: 10px;
}

.green-test-main {
  background: transparent linear-gradient(180deg, #fff4f6 0%, #ff7b8f 51%, #86273a 100%) 0% 0%
    no-repeat padding-box;
  position: absolute;
  top: -49px;
  border-radius: 25px;
}

@media screen and (max-width: 768px) {
  .flag-near-close-lotto-none,
  .flag-near-close-lotto {
    width: 100%;
  }

  .green-test-main {
    border-radius: 15px;
    background: transparent linear-gradient(180deg, #fff4f6 0%, #ff7b8f 51%, #86273a 100%) 0% 0%
      no-repeat padding-box;
  }

  .red-test-main {
    border-radius: 15px;
    margin-top: 13px;
  }

  .blue-test-main {
    border-radius: 15px;
    /*background-color: rgba(134, 39, 58, 0.7);*/
  }

  .main-remain-money {
    border-radius: 15px;
    background-size: cover;
  }
}

.yk-countdown-login {
  background: transparent linear-gradient(180deg, #cb5769 0%, #f27689 100%) 0% 0% no-repeat
    padding-box;
  justify-content: space-around;
  font-size: large;
  opacity: 1;
  border-radius: 20px;
}

.yk-countdown-login-main {
  background: transparent linear-gradient(180deg, #cb5769 0%, #f27689 100%) 0% 0% no-repeat
    padding-box;
  box-shadow: 0px 0px 7px #ffffff29;
  justify-content: space-around;
  font-size: large;
  opacity: 1;
  border-radius: 20px;
}

.yk-countdown-login-remaintime {
  background: white;
  color: #00c300;
  justify-content: space-around;
  border-radius: 10px;
  width: 28%;
  overflow: hidden;
  align-items: center;
}

.btn-statement {
  background-color: #3c326a;
  color: white;
  border-radius: 5px;
  text-align: center;
  padding: 10px;
}

.btn-main2 {
  color: white;
  font-size: 0.8rem;
}

@media screen and (max-width: 768px) {
  .btn-statement {
    display: flex;
    padding: 0.65rem 10px;
  }

  .yk-countdown-login {
    background: transparent linear-gradient(180deg, #cb5769 0%, #f27689 48%, #feadc0 100%) 0% 0%
      no-repeat padding-box;
  }

  .broadcast-row {
    height: 22px;
    border: 1px solid white;
  }
}

@media screen and (min-width: 1200px) {
  .yk-countdown-login-remaintime {
    width: 22%;
  }
}

.yk-countdown-login-yk-round {
  background: black;
  color: white;
  justify-content: space-between;
  border-radius: 7px;
  padding: 2px;
}

.dot-yk-round {
  height: 10px;
  width: 10px;
  background-color: #00c300;
  border-radius: 50%;
  display: inline-block;
  align-self: center;
}

.register-word {
  /*margin-top: -15px;*/
}

.bg-link-product-main {
  background: #ff0000 0% 0% no-repeat padding-box;
  border-radius: 30px;
  justify-content: flex-end;
  align-items: center;
  border: 3px solid #d9e5ee;
}

.bg-link-product-main-green,
.bg-link-product-main {
  margin-bottom: 3px !important;
}

.bg-link-product-main-green {
  background: transparent linear-gradient(90deg, #000000 1%, #00c300 66%) 0% 0% no-repeat
    padding-box;
  border: 3px solid #d9e5ee;
  justify-content: flex-end;
  align-items: center;
  border-radius: 30px;
}

.bg-link-product-main-none {
  background-color: #554c4e;
  border-radius: 3px;
  justify-content: flex-end;
  align-items: center;
}

.bg-transaction-menu {
  background: url(../custom/main-bg-transaction-menu.jpg) no-repeat bottom;
  border-radius: 10px;
  background-size: cover;
  height: 95%;
}

.icon-request-main {
  color: #e96c22;
  background: white;
  font-size: small;
  border-radius: 4px;
  width: 1.5em;
  height: 1.5em;
  line-height: 1.5em !important;
}

.icon-report-main {
  color: #db2036;
  background: white;
  font-size: small;
  border-radius: 4px;
  width: 1.5em;
  height: 1.5em;
  line-height: 1.5em !important;
}

.box-count-down-thai-size {
  margin-bottom: 92px;
  margin-top: 50px;
  position: relative;
}

@media screen and (min-width: 460px) and (max-width: 767px) {
  .box-count-down-thai-size {
    margin-bottom: 108px;
    margin-top: 50px;
    position: relative;
  }
}

.slick-main .slick-slide {
  margin: 12px;
  /*}*/
}

.slick-main .slick-center {
  -moz-transform: scale(1.08);
  -ms-transform: scale(1.08);
  -o-transform: scale(1.08);
  -webkit-transform: scale(1.08);
  opacity: 1;
  transform: scale(1.1);
}

.droupdown-menu {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.user-in-card-main {
  /*background: #FF7B8F 0% 0% no-repeat padding-box;*/
  /*box-shadow: inset 0px 3px 6px #00000029;*/
  color: white;
  /*padding: 6px;*/
  font-size: 2.5rem;
  text-align: center;
}

.box__chip-lists .price {
  padding: 7px !important;
}

.banner-main {
  border-radius: 11px;
}

@media screen and (max-width: 768px) {
  .banner-main {
    border-radius: 0px;
  }
}

.bg-report-statement {
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 5px;
}

.icon-size-main {
  width: 1.8rem;
}

.bg-4main-btn {
  background: transparent linear-gradient(90deg, #6eecfc 0%, #011f46 100%) 0% 0% no-repeat
    padding-box;
  box-shadow: 0px 3px 6px #00000029;
  border-radius: 10px;
}

.bg-4main-btn a {
  color: #ffffff;
  font-size: 1.5rem;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 10px 28px 10px 10px;
  align-items: center;
  border-radius: 7px;
}

.bg-4main-btn .img-center {
  font-size: 1.5rem;
}

.bg-main-remain-time {
  background: #ffffff 0% 0% no-repeat padding-box;
  box-shadow: inset 0px 3px 6px #00000029;
  border: 1px solid #ffffff;
  border-radius: 9px;
  text-align: center;
  width: 6rem;
  padding: 1px 15px 1px 3px;
  font-size: 0.9rem;
  color: #15c296;
}

.bg-huay-append {
  background: transparent;
  height: 50px;
}

.bg-main-remain-time-close {
  text-align: center;
}

.bg-main-btn {
  background: transparent
    linear-gradient(
      180deg,
      rgba(171, 184, 218, 0.5) 0%,
      rgba(134, 109, 172, 0.5) 46%,
      rgba(6, 0, 0, 0.5) 100%
    )
    0% 0% no-repeat padding-box;
  border-radius: 10px;
  margin-bottom: 50px !important;
}

.btn-contactbox-main {
  background: transparent linear-gradient(180deg, rgba(57, 57, 57, 0.8) 0%, rgba(0, 0, 0, 0.8) 100%)
    0% 0% no-repeat padding-box;
  box-shadow: inset 0px 3px 6px #00000029;
  border-radius: 3px;
  text-align: -webkit-center;
}

.btn-contactbox-main-circle {
  background: transparent
    linear-gradient(
      180deg,
      rgba(207, 65, 70, 0.8) 0%,
      rgba(100, 10, 18, 0.8) 50%,
      rgba(207, 65, 70, 0.8) 100%
    )
    0% 0% no-repeat padding-box;
  box-shadow: inset 0px 3px 6px #00000029;
  border-radius: 16px;
  color: white;
  justify-content: center;
  gap: 6px;
  width: 50%;
  padding: 5px;
}

.user-txt-m {
  background: #dca2b4 0% 0% no-repeat padding-box;
  border-radius: 2px;
}

.text-remain-money-m {
  position: absolute;
  text-align: center;
  width: 100%;
  font-size: 1rem;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.bg-main-btn-m {
  /*background: transparent linear-gradient(180deg, #DCA2B4 0%, #866DAC 48%, #ABB8DA 100%) 0% 0% no-repeat padding-box;*/
  /*padding-bottom: 75px;*/
}

.blink1 {
  background-color: #db2036;
  animation: glow1 1s infinite alternate;
}

@keyframes glow1 {
  from {
    box-shadow: 0 0 2px -2px #ff8306;
  }
  to {
    box-shadow: 0 0 2px 2px #dcb849;
  }
}

.bg-main-col-6 {
  background-color: rgba(254, 252, 243, 0.9);
  border-radius: 20px;
}

.bg-main-8menu {
  background: transparent
    linear-gradient(180deg, rgba(77, 42, 12, 0.8) 0%, rgba(15, 8, 2, 0.8) 100%) 0% 0% no-repeat
    padding-box;
  border-radius: 8px;
}

.line-main-8menu {
  background: #fefcf3 0% 0% no-repeat padding-box;
  box-shadow: 0px -3px 3px #00000029;
  padding: 4px;
  border-radius: 5px 5px 0px 0px;
}

.line-main-card {
  background: transparent linear-gradient(180deg, #fefc74 0%, #c67b36 100%) 0% 0% no-repeat
    padding-box;
  border-radius: 10px;
  padding: 4px;
}

.video-wrapper {
  /*object-fit: cover;*/
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -100;
}

.video-wrapper video {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.video-wrapper-login {
  width: 100%;
  height: auto;
}

.video-wrapper-login video {
  width: 100%;
  height: 100%;
}

.bg-user-main {
  background: #d55a1f 0% 0% no-repeat padding-box;
  border-radius: 12px;
  color: white;
  font-size: 1rem;
  align-items: center;
  font-weight: 700;
}

.bg-user-main-username {
  background: #060000 0% 0% no-repeat padding-box;
  border: 1px solid #d55a1f;
  border-radius: 12px;
  letter-spacing: 1.1px;
  font-weight: 100;
}

.display-phet-icon {
  display: grid;
  place-items: center;
  color: #fdf689;
  font-size: 0.8rem;
  font-weight: bold;
}

.main-balance {
  font-size: 2.6rem;
  align-self: center;
  letter-spacing: 2px;
  color: white;
}

.txt-notice-chok {
  align-self: center;
  font-size: 1.2rem;
  width: 98%;
}

.txt-notice-chok-main {
  align-self: center;
  font-size: 1.1rem;
  width: 98%;
  margin-top: 5px;
}

.ads-pop-main-txt {
  color: #333333;
  text-align: center;
  font-weight: bold;
}

.icon-boardcast-img {
  width: auto;
  height: auto;
}

@media screen and (max-width: 768px) {
  .bg-login-form {
    background: transparent
      linear-gradient(
        180deg,
        rgba(13, 20, 36, 0.8) 0%,
        rgba(39, 51, 79, 0.8) 50%,
        rgba(13, 20, 36, 0.8) 100%
      )
      0% 0% no-repeat padding-box;
    border-radius: 20px;
  }

  .text-provider-name-login {
    height: 25px;
  }

  .txt-notice-chok-main {
    font-size: 1rem;
  }

  .flex-column-main {
    flex-direction: column;
  }

  .btn-contactbox-main-circle {
    width: 65%;
    padding: 3px;
    font-size: 1rem;
    font-weight: bold;
  }

  .dot {
    height: 15px;
    width: 15px;
    align-self: center;
  }

  .line-main-card {
    background: transparent linear-gradient(180deg, #fefc74 0%, #c67b36 100%) 0% 0% no-repeat
      padding-box;
    border-radius: 10px;
    padding: 2px;
  }

  .icon-boardcast-img {
    width: 39px;
    margin-top: -1px;
  }

  .line-main-8menu {
    padding: 3px;
    background: transparent linear-gradient(180deg, #c78d36 0%, #d2a03d 100%) 0% 0% no-repeat
      padding-box;
  }

  .bg-main-col-6 {
    background-color: rgba(43, 38, 38, 0);
  }
}

.border-login {
  border: 4px solid #ffba43;
  border-radius: 10px;
  opacity: 1;
  background: rgba(254, 252, 243, 0.7);
}

.login-text-head {
  color: #333333;
  text-align: center;
  font-weight: bold;
  font-size: 1.5rem;
}

.txt-line-through .txt-line-through-app {
  text-align: -webkit-center;
  color: #707070;
  font-size: 1.1rem;
}

.txt-line-through-register,
.txt-line-through {
  display: flex;
  flex-direction: row;
}

.txt-line-through:before,
.txt-line-through:after {
  content: '';
  flex: 1 1;
  border-bottom: 1px solid #9b9393;
  margin: 4px 0px;
}

.txt-line-through-register:before,
.txt-line-through-register:after {
  content: '';
  flex: 1 1;
  border-bottom: 1px solid #ca833a;
  margin: 4px 3px;
}

.login-th-box {
  background: #31809a 0% 0% no-repeat padding-box;
  border-radius: 9px;
  color: #fff;
}

.bg-head-samtua {
  background: #141414;
  font-size: 0.9rem;
  font-weight: 100;
  color: #fff !important;
}

.text-result-head-other {
  color: #fff;
  font-weight: 600;
}

.result-head-org {
  background: transparent linear-gradient(180deg, #fed574 0%, #b46c2b 100%) 0% 0% no-repeat
    padding-box;
  color: white !important;
}

.text-result-head-org {
  color: #d55a1f;
}

.login-la-box {
  background: #31809a 0% 0% no-repeat padding-box;
  border-radius: 9px;
  height: 100%;
}

.login-th-box-date {
  background: transparent
    linear-gradient(180deg, #ffffff 0%, #f2f2f2 13%, #e6e6e6 30%, #ffffff 71%, #cccccc 100%) 0% 0%
    no-repeat padding-box;
  color: #1a1a1a;
  border-radius: 5px;
  padding: 15px 32px;
  text-align: center;
  justify-content: center;
  width: 10%;
}

.th-result-head {
  text-align: center;
  flex-grow: 1;
}

.login-la-box-date {
  background: transparent
    linear-gradient(180deg, #ffffff 0%, #f2f2f2 13%, #e6e6e6 30%, #ffffff 71%, #cccccc 100%) 0% 0%
    no-repeat padding-box;
  border-radius: 5px;
  padding: 15px 32px;
  text-align: center;
  color: #1a1a1a;
  width: 10%;
}

.header-login-aom {
  background: #c62b88 0% 0% no-repeat padding-box;
  border-radius: 3px 3px 0px 0px;
  text-align: center;
  font-size: 1.2rem;
}

.bg-result-aom-baac {
  background: #dfdfdf 0% 0% no-repeat padding-box;
  border-radius: 3px;
  font-size: 1rem;
  text-align: center;
  color: #383838;
  height: 100%;
  justify-content: space-around;
  font-weight: bold;
}

.bg-period-login {
  background: #a0a0a0 0% 0% no-repeat padding-box;
  border-radius: 3px;
  color: black;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 5px;
  margin-bottom: 3px;
  width: 100%;
  display: flex;
  justify-content: center;
  width: 100%;
}

.font-size-result-lotto {
  font-size: 1.5rem;
  font-weight: bold;
}

.bg-head-ads {
  background: transparent linear-gradient(180deg, #ffea6f 0%, #dd881d 100%) 0% 0% no-repeat
    padding-box;
  box-shadow: inset 0px 3px 6px #00000029;
  padding: 10px;
  text-align: center;
  font-weight: bold;
  color: #ffffff;
  border-radius: 10px 10px 0px 0pc;
}

.bg-video-login {
  background: #171717 0% 0% no-repeat padding-box;
  border: 1px solid #ffee00;
  border-radius: 17px;
  margin-bottom: 11px;
}

.forget-password-right {
  font-size: large;
  line-height: 12px;
  display: flex;
  gap: 4px;
  color: white;
  cursor: pointer;
}

.la-name-txt {
  font-size: 1.1rem;
  font-weight: 100;
  color: #fff;
}

.gap-la-2result {
  justify-content: space-around;
  gap: 3px;
  width: 60%;
}

@media screen and (max-width: 768px) {
  .txt-line-through-register,
  .txt-line-through {
    text-align: -webkit-center;
    color: #fff;
    font-size: 1.1rem;
  }

  .gap-la-2result {
    justify-content: space-around;
    gap: 3px;
    width: 100%;
  }

  .la-name-txt {
    font-size: 1rem;
  }

  .login-la-box-date {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .font-size-result-lotto {
    font-size: 1.9rem;
  }

  .login-th-box {
    /*background: transparent linear-gradient(180deg, #FE8A3A 0%, #AF5427 100%) 0% 0% no-repeat padding-box;*/
  }

  .login-th-box.login-th-box-result {
    /*background: #F5B235;*/
  }

  .th-result-login-game {
    /*justify-content: flex-end;*/
    /*gap: 15px;*/
    font-size: 1rem;
  }

  .bg-result-login-inner {
    background: transparent
      linear-gradient(180deg, rgba(234, 208, 174, 0.7) 0%, rgba(206, 164, 97, 0.7) 100%) 0% 0%
      no-repeat padding-box;
  }
}

.btn-group-toggle > .btn-limitnum:hover {
  background: none !important;
  color: #ffcc00 !important;
}

.btn-group-toggle > .btn-limitnum.focus.active,
.btn-group-toggle > .btn-limitnum.active {
  color: white !important;
  background: #ffcc00 !important;
}

.btn-group-toggle > .btn-outline-secondary.focus,
.btn-group-toggle > .btn-outline-secondary:hover {
  background: none !important;
  color: #6c757d !important;
}

.btn-group-toggle > .btn-outline-secondary.focus.active,
.btn-group-toggle > .btn-outline-secondary.active {
  color: white !important;
  background: #6c757d !important;
}

#nav-tab1.nav-pills .nav-link.active {
  color: var(--text-on-bg-primary-color);
  text-shadow: var(--border-primary-color) 1px 1px 0;
  background-color: var(--bg-primary-color);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  padding: 20px 0 !important;
  border-bottom-width: 8px;
}

#nav-tab1.nav-pills .nav-link {
  display: flex;
  justify-content: center;
  align-items: center;
  border: var(--border-primary-color) 1px solid;
  border-radius: 10px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  font-weight: 600;
  text-shadow: rgb(255, 255, 255) 1px 1px;
  background-color: rgba(0, 0, 0, 0.1);
  color: var(--bg-primary-color);
}

.nav-pills .nav-link:hover {
  color: white;
}

#samtua {
  position: relative;
}

/* #ninetybtn,#roodfrontbtn,#roodbackbtn{
    margin-left: -8px;
}
@media screen and (max-width:767.98px){
    #ninetybtn,#roodfrontbtn,#roodbackbtn{
        margin-left: 0px;
    }
} */

.animated-button1 span:nth-child(1) {
  top: 0px;
  left: 0px;
  width: 100%;
  height: 2px;
  background: -webkit-gradient(linear, right top, left top, from(rgba(43, 8, 8, 0)), to(#d92626));
  background: linear-gradient(to left, rgba(43, 8, 8, 0), #d92626);
  -webkit-animation: 2s animateTop linear infinite;
  animation: 2s animateTop linear infinite;
}

@keyframes animateTop {
  0% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
  100% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}

.animated-button1 span:nth-child(2) {
  top: 0px;
  right: 0px;
  height: 100%;
  width: 2px;
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(43, 8, 8, 0)), to(#d92626));
  background: linear-gradient(to top, rgba(43, 8, 8, 0), #d92626);
  -webkit-animation: 2s animateRight linear -1s infinite;
  animation: 2s animateRight linear -1s infinite;
}

@keyframes animateRight {
  0% {
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
  }
  100% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }
}

.animated-button1 span:nth-child(3) {
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 2px;
  background: -webkit-gradient(linear, left top, right top, from(rgba(43, 8, 8, 0)), to(#d92626));
  background: linear-gradient(to right, rgba(43, 8, 8, 0), #d92626);
  -webkit-animation: 2s animateBottom linear infinite;
  animation: 2s animateBottom linear infinite;
}

@keyframes animateBottom {
  0% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
  100% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
}

.animated-button1 span:nth-child(4) {
  top: 0px;
  left: 0px;
  height: 100%;
  width: 2px;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(43, 8, 8, 0)), to(#d92626));
  background: linear-gradient(to bottom, rgba(43, 8, 8, 0), #d92626);
  -webkit-animation: 2s animateLeft linear -1s infinite;
  animation: 2s animateLeft linear -1s infinite;
}

@keyframes animateLeft {
  0% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }
  100% {
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
  }
}

.animated-button1 span:nth-child(1) {
  top: 0px;
  left: 0px;
  width: 100%;
  height: 2px;
  background: -webkit-gradient(linear, right top, left top, from(rgba(43, 8, 8, 0)), to(#d92626));
  background: linear-gradient(to left, rgba(43, 8, 8, 0), #d92626);
  -webkit-animation: 2s animateTop linear infinite;
  animation: 2s animateTop linear infinite;
}

@keyframes animateTop {
  0% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
  100% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}

.animated-button1 span:nth-child(2) {
  top: 0px;
  right: 0px;
  height: 100%;
  width: 2px;
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(43, 8, 8, 0)), to(#d92626));
  background: linear-gradient(to top, rgba(43, 8, 8, 0), #d92626);
  -webkit-animation: 2s animateRight linear -1s infinite;
  animation: 2s animateRight linear -1s infinite;
}

@keyframes animateRight {
  0% {
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
  }
  100% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }
}

.animated-button1 span:nth-child(3) {
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 2px;
  background: -webkit-gradient(linear, left top, right top, from(rgba(43, 8, 8, 0)), to(#d92626));
  background: linear-gradient(to right, rgba(43, 8, 8, 0), #d92626);
  -webkit-animation: 2s animateBottom linear infinite;
  animation: 2s animateBottom linear infinite;
}

@keyframes animateBottom {
  0% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
  100% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
}

.animated-button1 span:nth-child(4) {
  top: 0px;
  left: 0px;
  height: 100%;
  width: 2px;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(43, 8, 8, 0)), to(#d92626));
  background: linear-gradient(to bottom, rgba(43, 8, 8, 0), #d92626);
  -webkit-animation: 2s animateLeft linear -1s infinite;
  animation: 2s animateLeft linear -1s infinite;
}

@keyframes animateLeft {
  0% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }
  100% {
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
  }
}

.animated-button1:hover {
  text-decoration: none;
  color: gold;
}

.topbox {
  border: 1px #333 solid;
  /* border-radius: 5px; */
  display: block;
  margin-top: 0px;
  padding: 8px 0;
  background: #343a40;
  /* color: lightgoldenrodyellow; */
  line-height: 1.2;
}

.marqueemain {
  background-color: #fff;
  border: #555 1px solid;
  padding: 5px 10px;
  margin-bottom: 0px;
}

/********************upload file*****************/
.file-upload {
  background-color: #ffffff;
  width: 100%;
  margin: 0 auto;
  padding: 0 20px 20px 20px;
}

.file-upload-btn {
  width: 100%;
  margin: 0;
  color: #fff;
  background: rgb(31, 119, 178);
  border: none;
  padding: 10px;
  border-radius: 4px;
  border-bottom: 4px solid rgb(21, 96, 130);
  transition: all 0.2s ease;
  outline: none;
  text-transform: uppercase;
  font-weight: 700;
}

.file-upload-btn:hover {
  background: rgb(24, 137, 212);
  color: #ffffff;
  transition: all 0.2s ease;
  cursor: pointer;
}

.file-upload-btn:active {
  border: 0;
  transition: all 0.2s ease;
}

.file-upload-content {
  display: none;
  text-align: center;
}

.file-upload-input {
  position: absolute;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  outline: none;
  opacity: 0;
  cursor: pointer;
}

.image-upload-wrap {
  margin-top: 20px;
  border: 2px dashed rgb(31, 82, 178);
  position: relative;
}

.image-dropping,
.image-upload-wrap:hover {
  background-color: rgb(64, 142, 216);
  border: 2px dashed #ffffff;
}

.image-title-wrap {
  padding: 0 15px 15px 15px;
  color: #222;
}

.drag-text {
  text-align: center;
}

.drag-text h3 {
  font-weight: 100;
  text-transform: uppercase;
  color: rgb(5, 37, 95);
  padding: 60px 0;
}

.file-upload-image {
  max-height: 200px;
  max-width: 200px;
  margin: auto;
  padding: 20px;
}

.remove-image {
  width: 200px;
  margin: 0;
  color: #fff;
  background: #cd4535;
  border: none;
  padding: 10px;
  border-radius: 4px;
  border-bottom: 4px solid #b02818;
  transition: all 0.2s ease;
  outline: none;
  text-transform: uppercase;
  font-weight: 700;
}

.remove-image:hover {
  background: #c13b2a;
  color: #ffffff;
  transition: all 0.2s ease;
  cursor: pointer;
}

.remove-image:active {
  border: 0;
  transition: all 0.2s ease;
}

/********************** carousel slide ****************/
.carousel-view > .bg-danger {
  background-color: #d59929 !important;
  color: white !important;
}

.carousel-inner {
  height: auto;
  width: 100%;
}

/* Count nav-pills */
.nav-slide {
  position: relative;
  right: 0;
  bottom: 0;
  left: 0;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  padding-left: 0;
  margin-right: 0;
  margin-left: 0;
  list-style: none;
}

.nav-slide {
  width: 100%;
  counter-reset: number;
}

.nav-slide > li > span:before {
  content: counter(number);
  counter-increment: number;
  display: inline-block;
}

#nav1.nav-slide > li > span:before {
  content: counter(number);
  counter-increment: none;
  display: inline-block;
  visibility: hidden;
}

#nav1.nav-slide > li > .flag-icon {
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
  vertical-align: middle;
  float: left;
  margin-left: 5px !important;
  margin-top: 3px !important;
}

.card-header .flag-icon {
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
  vertical-align: middle;
  float: left;
  margin-left: 5px !important;
  margin-top: 3px !important;
}

.card-theme-header .flag-icon {
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
  vertical-align: middle;
  float: left;
  margin-left: 5px !important;
  margin-top: 3px !important;
}

.nav-slide .active {
  background-color: #fff;
  -webkit-box-shadow: inset 0px 0px 0px 2px #976f02;
  -moz-box-shadow: inset 0px 0px 0px 2px #976f02;
  box-shadow: inset 0px 0px 0px 2px #976f02;
}

.nav-slide li {
  position: relative;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
  width: auto !important;
  height: auto !important;
  padding: 5px;
  text-align: center;
  margin-right: 2px;
  margin-left: 2px;
  margin-bottom: 3px;
  text-indent: 0px !important;
  cursor: pointer;
}

.nav-slide-yeekee li {
  position: relative;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
  width: auto !important;
  min-width: 30px;
  height: auto !important;
  padding: 5px;
  text-align: center;
  margin-right: 2px;
  margin-left: 2px;
  margin-bottom: 3px;
  text-indent: 0px !important;
  cursor: pointer;
}

.nav-slide-yeekee {
  width: 100%;
  flex-wrap: wrap;
  position: relative;
  right: 0;
  bottom: 0;
  left: 0;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  padding-left: 0;
  margin-right: 0;
  margin-left: 0;
  list-style: none;
}

.nav-slide-yeekee {
  width: 100%;
  counter-reset: number;
}

.nav-slide-yeekee > li > span:before {
  content: counter(number);
  counter-increment: number;
  display: inline-block;
}

.nav-slide-yeekee .active {
  background-color: #fff;
  -webkit-box-shadow: inset 0px 0px 0px 2px #976f02;
  -moz-box-shadow: inset 0px 0px 0px 2px #976f02;
  box-shadow: inset 0px 0px 0px 2px #976f02;
  font-weight: bold;
}

/************************/
.nav-slide li,
.nav-slide-yeekee li {
  background-color: rgba(255, 255, 255, 0.5);
  font-size: 16px !important;
  color: black !important;
  text-shadow: #fff 1px 1px 0px;
}

/************************/
.border-active .nav-slide .active,
.border-active .nav-slide-yeekee .active {
  background-color: #fff;
  -webkit-box-shadow: inset 0px 0px 0px 2px #d59929;
  -moz-box-shadow: inset 0px 0px 0px 2px #d59929;
  box-shadow: inset 0px 0px 0px 2px #d59929;
}

.border-active .nav-slide li,
.border-active .nav-slide-yeekee li {
  color: white !important;
  text-shadow: black 1px 1px 0px;
  background-color: rgba(0, 0, 0, 0.5);
}

.border-active .nav-slide li.active,
.border-active .nav-slide-yeekee li.active {
  color: #444 !important;
  text-shadow: #fff 1px 1px 0px;
  background-color: #fff;
}

/*************************/

.carousel-view ol {
  margin-top: 0;
  margin-bottom: 0rem;
}

.carousel-view {
  display: none;
  margin-bottom: 0rem;
  position: relative;
}

@media screen and (max-width: 768px) {
  .carousel-view {
    display: block;
  }

  .pc-view {
    display: none !important;
  }

  .nav-slide li {
    position: relative;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    /* display: inline-block; */
    /* width: 24% !important; */
    /* width: 32.4% !important; */
    width: 47.5% !important;
    height: auto !important;
    padding: 3px 0;
    text-align: center;
    vertical-align: top;
    margin-right: 1.5px;
    margin-left: 1.5px;
    text-indent: 0px !important;
  }

  .nav-slide {
    position: relative;
    flex-wrap: wrap;
    right: 0;
    bottom: 0;
    left: 0;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    /* display: inline-block; */
    padding-left: 0;
    margin-right: 0;
    margin-left: 0;
    list-style: none;
  }

  .nav-slide-yeekee li {
    position: relative;
    -ms-flex: none;
    flex: none;
    /* display: inline-block; */
    width: 11.3% !important;
    height: auto !important;
    padding: 3px 0;
    text-align: center;
    vertical-align: top;
    margin-right: 1.5px;
    margin-left: 1.5px;
    margin-bottom: 3px;
    text-indent: 0px;
  }

  .nav-slide-yeekee {
    position: relative;
    right: 0;
    bottom: 0;
    left: 0;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    /* display: inline-block; */
    padding-left: 0;
    margin-right: 0;
    margin-left: 0;
    list-style: none;
  }

  .nav-slide li,
  .nav-slide-yeekee li {
    cursor: pointer;
    background-color: rgba(78, 45, 128, 0.5);
    color: var(--text-primary-color);
    font-size: 14px;
    font-weight: 400;
    text-shadow: none;
    border-radius: 2px;
  }
}

@media screen and (max-width: 321px) {
  .nav-slide li {
    width: 32% !important;
    font-size: 11.5px;
  }
}

/********************** end carousel slide ****************/

.text-danger {
  color: rgb(189, 132, 41) !important;
}

.text-danger {
  color: #dc3545 !important;
}

.border-danger {
  border-color: #f5bd70 !important;
}

.bgwhitealpha .card-header {
  font-weight: 400;
  font-size: 100%;
}

.bgwhitealpha h6.text-danger {
  color: #976f02 !important;
  margin: 5px;
  margin-bottom: 10px;
  text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.3);
  font-size: 110%;
}

.bgwhitealpha h6 {
  /* color: #976f02; */
  margin: 5px;
  margin-bottom: 10px;
  text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.3);
  font-size: 110%;
}

.bgwhitealpha h6 span {
  text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5);
  font-weight: 400;
  font-size: 14px;
}

.bgwhitealpha h6 span.badge-danger {
  background-color: #976f02;
}

.bgwhitealpha {
  /* background: rgba(179, 227, 236, 0.6); */
  background: rgba(255, 255, 255, 0.9);
  margin-bottom: 10px;
  border: rgba(255, 255, 255, 1) 2px solid;
}

.bgwhitealpha h6 span.flag-icon {
  font-size: 40px;
  margin-top: -15px;
  margin-left: -15px;
  border-top-left-radius: 4px;
  border-bottom-right-radius: 8px;
  max-width: 50px;
  background-size: cover;
  border: #555 1px solid;
  border-top-color: #ccc;
  border-left-color: #ccc;
}

.card-header span.flag-icon {
  font-size: 30px;
  top: -8px;
  left: -10px;
  border-top-left-radius: 4px;
  border-bottom-right-radius: 8px;
  max-width: 50px;
  background-size: cover;
  display: flex;
  border: #555 1px solid;
  border-top-color: #333;
  border-left-color: #333;
}

.disable-scroll {
  height: 100%;
  overflow: hidden;
  width: 100%;
  position: fixed;
}

.disable-dbl-tap-zoom {
  touch-action: manipulation;
}

.bg-grey {
  background: #eee;
}

.text-normal {
  white-space: normal;
}

.notice-content {
  display: block;
}

@media only screen and (min-width: 740px) {
  .notice-content {
    display: none;
  }
}

.notice-content-desktop {
  display: none;
}

@media only screen and (min-width: 740px) {
  .notice-content-desktop {
    display: block;
  }
}

.underline {
  text-decoration: underline;
}

#section-content {
  margin-bottom: 60px;
}

a:hover {
  text-decoration: none;
}

.login-btn-app-top-position {
  margin-bottom: 6px;
  align-self: center;
}

.img-logo-app-top {
  height: 3.2rem;
  width: auto;
  margin-top: -3px !important;
}

.bg-gradient-theme-primary {
  background: linear-gradient(90deg, rgba(1, 111, 98, 1) 0%, rgba(2, 34, 35, 1) 100%);
  color: white;
  border-radius: 10px 10px 0px 0px;
}

.bg-gradient-theme-secondary {
  background: linear-gradient(90deg, rgba(68, 67, 71, 1) 0%, rgba(11, 13, 12, 1) 100%);
  border-radius: 0px 0px 10px 10px;
  color: white;
}

.btn-gradiant-yellow {
  background: linear-gradient(180deg, rgba(247, 206, 96, 1) 0%, rgba(188, 116, 5, 1) 100%)
    padding-box;
  color: white;
  width: 100%;
  font-size: 1.3rem !important;
  font-weight: bold;
}

.btn-gradiant-yellow-left {
  background: linear-gradient(180deg, rgba(247, 206, 96, 1) 0%, rgba(188, 116, 5, 1) 100%)
    padding-box;
  color: white;
  width: 100%;
  font-size: 1.3rem !important;
  font-weight: bold;
}

.btn-gradiant-login-m {
  background-color: #facc2e;
  color: white;
  width: 100%;
  font-size: 1.1rem !important;
  font-weight: bold;
  border-radius: 22px;
}

.btn-gradiant-login-th {
  background: transparent linear-gradient(180deg, #fc4f6d 0%, #700323 100%) 0% 0% no-repeat
    padding-box;
  color: white;
  width: 100%;
  font-size: 1.1rem !important;
  font-weight: bold;
  height: 100%;
}

.btn-gradiant-green-left {
  background: linear-gradient(90deg, rgba(1, 111, 98, 1) 0%, rgba(2, 34, 35, 1) 100%) padding-box;
  color: white;
  width: 100%;
  font-size: 1.3rem !important;
  font-weight: bold;
}

.badge-theme-primary[href]:hover,
.badge-theme-primary[href]:focus {
  color: var(--text-on-bg-primary-color);
  text-decoration: none;
  background-color: var(--border-primary-color);
}

/***** JACK CSS *****/

/* input
{
  font-size: 18px !important;
} */

.top-header-bar {
  background: url(../custom/top-header-bar.png) no-repeat;
  background-size: cover;
  height: 40px;
}

.header-bar {
  background-color: #001314;
  /*background: url(../custom/header-bar.png) no-repeat top center;*/
  background-size: cover;
}

.btn-login-white {
  background-color: transparent;
  border: 3px solid #fff;
  border-radius: 20px;
  color: #fff;
  font-size: 1.2rem !important;
  height: 100%;
  align-items: center;
}

.btn-login-white.btn-app {
  /*background: transparent linear-gradient(270deg, #ffffff 0%, #ffffff 100%) 0% 0% no-repeat padding-box;*/
}

.huay-card-product-tang {
  background: #d5942b;
}

.huay-card-product-stock {
  background: #2e3192 0% 0% no-repeat padding-box;
  box-shadow: 2px 2px 3px #00000029;
  border-radius: 100px;
}

.huay-card-product-out-stock {
  background: #5e74ec 0% 0% no-repeat padding-box;
  box-shadow: 2px 2px 3px #00000029;
  border-radius: 100px;
}

.huay-card-product-stock-special {
  background: #1a653c;
  box-shadow: 2px 2px 3px #00000029;
  border-radius: 100px;
}

.huay-card-product-out-stock-special {
  background: #5fb256 0% 0% no-repeat padding-box;
  box-shadow: 2px 2px 3px #00000029;
  border-radius: 100px;
}

.huay-card-product-4d {
  background: #8d5ce9;
  box-shadow: 0px 3px 3px #00000029;
  border-radius: 100px;
}

.huay-card-product-yeekee {
  background: transparent linear-gradient(180deg, #e0c277 0%, #d1baa5 100%) 0% 0% no-repeat
    padding-box;
  box-shadow: 2px 2px 3px #00000029;
  text-align: center;
  color: white;
  border-radius: 8px;
  margin-bottom: 6px;
  padding: 3px;
}

.huay-card-product-out-yeekee {
  background: transparent linear-gradient(180deg, #e0c277 0%, #d1baa5 100%) 0% 0% no-repeat
    padding-box;
  box-shadow: 2px 2px 3px #00000029;
}

.huay-card-product-out-yeekee5 {
  background: #ffffff 0% 0% no-repeat padding-box;
  box-shadow: 2px 2px 3px #00000029;
}

.huay-card-product-out-th {
  background: transparent linear-gradient(180deg, #0076fd 0%, #003b7f 100%) 0% 0% no-repeat
    padding-box;
  box-shadow: 2px 2px 3px #00000029;
}

.huay-card-product-out-aom {
  background: transparent linear-gradient(180deg, #ec008c 0%, #793965 100%) 0% 0% no-repeat
    padding-box;
  box-shadow: 2px 2px 3px #00000029;
}

.huay-card-product-out-baac {
  background: transparent linear-gradient(180deg, #5fb256 0%, #30592b 100%) 0% 0% no-repeat
    padding-box;
  box-shadow: 2px 2px 3px #00000029;
}

.huay-card-product-tang-yk,
.huay-card-product-tang-yeekee {
  background: #e1c73d;
}

.huay-card-product-tang-yk5,
.huay-card-product-tang-yeekee5 {
  background: #3ecbda;
}

.huay-card-product-yk {
  background: transparent linear-gradient(180deg, #f0c97a 0%, #ad8b48 100%) 0% 0% no-repeat
    padding-box;
  color: white;
  padding-left: 20%;
}

.huay-card-product-yeekee5 {
  background: transparent linear-gradient(180deg, #1ea4d9 0%, #083359 100%) 0% 0% no-repeat
    padding-box;
  box-shadow: 2px 2px 3px #00000029;
  text-align: center;
  color: white;
  border-radius: 17px;
}

.huay-card-product-yk5 {
  background: transparent linear-gradient(180deg, #fefc74 0%, #c67b36 100%) 0% 0% no-repeat
    padding-box;
  color: white;
  padding-left: 20%;
}

.huay-card-product-th {
  background: transparent linear-gradient(180deg, #0076fd 0%, #003b7f 100%) 0% 0% no-repeat
    padding-box;
  box-shadow: 2px 2px 3px #00000029;
  border-radius: 100px;
}

.huay-card-product-tang-th {
  background: #002b5b;
}

.huay-card-product-aom {
  background: transparent linear-gradient(180deg, #ec008c 0%, #793965 100%) 0% 0% no-repeat
    padding-box;
  box-shadow: 2px 2px 3px #00000029;
  border-radius: 100px;
}

.huay-card-product-tang-aom {
  background: #ec008c;
}

.huay-card-product-tang-hc,
.huay-card-product-tang-n19,
.huay-card-product-tang-hc2,
.huay-card-product-tang-hnsp,
.huay-card-product-tang-vn {
  background: #be1d2d;
  box-shadow: 0px 3px 3px #00000029;
}

.huay-card-product-my {
  background: transparent linear-gradient(180deg, #9c27b0 0%, #9c27b0 100%) 0% 0% no-repeat
    padding-box;
  box-shadow: 2px 2px 3px #00000029;
  border-radius: 100px;
}

.huay-card-product-out-my {
}

.huay-card-product-tang-my {
  background: #1c89d3;
  box-shadow: 0px 3px 3px #00000029;
}

.choke-home-bar {
  padding: 3px;
  background: var(--bg-primary-color);
}

/* @supports (-webkit-touch-callout: none) {
  CSS specific to iOS devices
  .text-money-main {
    color: #9f7928;
    font-size: 2rem;
    font-weight: bold;
    line-height: 35px;
  }
}

@supports not (-webkit-touch-callout: none) {
  CSS for other than iOS devices
  .text-money-main {
    background: radial-gradient(
        ellipse farthest-corner at right bottom,
        #fedb37 0%,
        #fdb931 8%,
        #9f7928 30%,
        #8a6e2f 40%,
        transparent 80%
      ),
      radial-gradient(
        ellipse farthest-corner at left top,
        #ffffff 0%,
        #ffffac 8%,
        #d1b464 25%,
        #5d4a1f 62.5%,
        #5d4a1f 100%
      );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background: #49317b;
    color: #ebab42;
    padding: 20px 15px 15px 15px;
    font-size: 2rem;
    font-weight: bold;
    line-height: 35px;
  }
} */

.text-money-main {
  background: #49317b;
  color: #ebab42;
  padding: 20px 15px 15px 15px;
  font-size: 2rem;
  font-weight: bold;
  line-height: 35px;
  border-radius: 10px;
  margin-top: -10px;
  margin-left: 10px;
  z-index: 0;
}

.card-info-main {
  background: #49317b;
  color: #ffffff;
  border-radius: 10px;
  margin-left: 10px;
}

.card-info-main a {
  color: white;
}

.card-info-main a:hover {
  color: var(--bg-secondary-color);
}

.card-info-main-mobile {
  background: #49317b;
  color: #ffffff;
  border-radius: 10px;
  margin-left: 10px;
  font-size: 0.8rem !important;
}

.card-info-main-mobile a {
  color: white;
  font-size: 0.8rem !important;
}

.card-info-main-mobile a:hover {
  color: var(--bg-secondary-color);
}

.bg-add-price {
  background: transparent linear-gradient(180deg, #193b31 0%, #0e0e0e 100%) 0% 0% no-repeat
    padding-box;
  border-radius: 5px;
}

.bg-countdown-app-pc {
  display: flex;
  align-items: center;
}

.colon-countdown {
  color: white;
  align-self: center;
  font-weight: bold;
  margin: 2px;
  font-size: 2rem;
}

@media screen and (max-width: 768px) {
  .choke-card-sub {
    width: 90% !important;
    padding: 5px !important;
    margin-left: 5% !important;
  }
}

.choke-card-sub {
  border-radius: 10px !important;
  background: linear-gradient(to right, #3c3795, #a53594, #da2128);
  /* border: #fff 1px solid; */
  height: auto;
  margin-bottom: -110px;
  z-index: 100;
  position: relative;
  text-align: center;
  width: 86%;
  margin-left: 7%;
  padding: 10px;
}

.rotate {
  animation: rotation 4s infinite linear;
}

@keyframes rotation {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(359deg);
  }
}

.choke-font-size {
  font-size: 1rem !important;
}

.choke-bg-light {
  background: url(../custom/card-menu-bg.png) no-repeat center !important;
  -webkit-background-size: cover; /* For WebKit*/
  -moz-background-size: cover; /* Mozilla*/
  -o-background-size: cover; /* Opera*/
  background-size: cover; /* Generic*/
  border-radius: 10px;
  padding-top: 120px;
}

.bg-light-main {
  background-image: linear-gradient(#413f41, #5c595c, #c7c7c2, #e4e0e0) !important;
  border-radius: 15px;
}

.broadcast-icon-mobile {
  padding: 5px;
  /* border-right: 1px solid #585858; */
  /*box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px,rgba(0, 0, 0, 0.22) 0px 15px 12px;*/
}

.btn-rule {
  background: linear-gradient(to bottom, #c78d36, #f4d751);
  color: white;
  width: 95%;
  font-size: 0.8rem;
}

.bot-col3-result-number {
  text-align: center;
  font-weight: bold;
}

.header-lotto-login {
  background: url(../custom/pink-bg-2.png) no-repeat center;
  background-size: 100% 100%;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 100;
  color: #fff;
  justify-content: center;
  margin: 0px 9px;
}

.header-lotto-login-th {
  background: #f9f4d7 0% 0% no-repeat padding-box;
  /*border: 1px solid #707070;*/
  border-radius: 9px;
  font-size: 1rem;
  font-weight: 100;
  color: black;
  justify-content: space-between;
}

.img-button {
  width: 100%;
  /*margin-bottom:4px;*/
}

.setting-main-icon {
  width: 100px;
}

.text-countdown-la-name-main2 {
  font-size: large;
  color: white;
  text-align: center;
}

.text-countdown-la-name-close {
  font-size: 0.7rem;
  font-weight: bold;
  color: gray;
  text-align: center;
}

.box-btn:hover {
  /*font-size: 30px;*/
  background: linear-gradient(to bottom, #e26e7f, #892b3e);
  color: white;
}

.bg-aura-btn {
  background: linear-gradient(to bottom, #d97484, #8e2d40);
  border-radius: 50%;
  padding: 4px;
  box-shadow: 0 0 0 0.6px #812f3f;
  margin: 2px;
}

.report-main {
  border-radius: 5px;
  color: white;
  font-weight: bold;
  align-items: center;
  justify-content: space-around;
  padding: 5px;
  margin-bottom: 48px;
  background-color: #db2036;
  font-size: 1rem;
}

.username-text-head {
  color: #fff;
  font-size: large;
}

.bg-balance {
  color: white;
  background: url(../custom/bg-balance.png) no-repeat center;
  font-weight: bold;
  font-size: 1.2rem;
  width: 100%;
  border-radius: 10px;
}

.img-lottery-product {
  /*margin-top: 1px;*/
  /*margin-bottom: 1px;*/
  height: 166px;
}

@media screen and (min-width: 583px) and (max-width: 760px) {
  .img-lottery-product {
    /*margin-top: -1px;*/
    /*margin-bottom: -2px;*/
    height: 166px;
    margin-left: -2px;
  }
}

.blue-test-main {
  background-color: rgba(255, 240, 242, 0.7);
  position: absolute;
  top: -58px;
  width: 88%;
  border-radius: 25px;
}

.green-test {
  background: transparent linear-gradient(180deg, #fff4f6 0%, #ff7b8f 51%, #86273a 100%) 0% 0%
    no-repeat padding-box;
  position: absolute;
  top: -49px;
  border-radius: 10px;
}

.green-test-main {
  background: transparent linear-gradient(180deg, #fff4f6 0%, #ff7b8f 51%, #86273a 100%) 0% 0%
    no-repeat padding-box;
  position: absolute;
  top: -49px;
  border-radius: 25px;
}

.yk-countdown-login {
  background: transparent linear-gradient(180deg, #cb5769 0%, #f27689 100%) 0% 0% no-repeat
    padding-box;
  justify-content: space-around;
  font-size: large;
  opacity: 1;
  border-radius: 20px;
}

.yk-countdown-login-main {
  background: transparent linear-gradient(180deg, #cb5769 0%, #f27689 100%) 0% 0% no-repeat
    padding-box;
  box-shadow: 0px 0px 7px #ffffff29;
  justify-content: space-around;
  font-size: large;
  opacity: 1;
  border-radius: 20px;
}

.btn-main2 {
  color: white;
  font-size: 0.8rem;
}

@media screen and (min-width: 1200px) {
  .yk-countdown-login-remaintime {
    width: 22%;
  }
}

.yk-countdown-login-yk-round {
  background: black;
  color: white;
  justify-content: space-between;
  border-radius: 7px;
  padding: 2px;
}

.dot-yk-round {
  height: 10px;
  width: 10px;
  background-color: #00c300;
  border-radius: 50%;
  display: inline-block;
  align-self: center;
}

.bottom-line {
  border-bottom: 1px solid #707070;
}

.bottom-line:before {
  content: '';
  width: 1px;
  height: 36px;
  background: #707070;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  bottom: 7px;
}

.bottom-line-result {
  border-bottom: 1px solid #707070;
}

.bottom-line-result:before {
  content: '';
  width: 1px;
  height: 45px;
  background: #707070;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  bottom: 16px;
}

.bottom-line-result-aom-baac {
  border-bottom: 1px solid #707070;
}

.bottom-line-result-aom-baac:before {
  content: '';
  width: 1px;
  height: 46px;
  background: #707070;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  bottom: 12px;
}

.fixed-height-result-login {
  height: 860px;
  overflow-y: scroll;
  overflow-x: hidden;
}

.bg-head-ads {
  background: transparent linear-gradient(180deg, #ffea6f 0%, #dd881d 100%) 0% 0% no-repeat
    padding-box;
  box-shadow: inset 0px 3px 6px #00000029;
  padding: 10px;
  text-align: center;
  font-weight: bold;
  color: #ffffff;
  border-radius: 10px 10px 0px 0pc;
}

.bg-video-login {
  background: transparent linear-gradient(180deg, #0f2a4e 0%, #030810 100%) 0% 0% no-repeat
    padding-box;
  border: 1px solid #ffee00;
  border-radius: 17px;
  margin-bottom: 11px;
}

.headder-game-app {
  background: transparent linear-gradient(180deg, #ffea6f 0%, #dd881d 100%) 0% 0% no-repeat
    padding-box;
  box-shadow: inset 0px 3px 6px #00000029;
  border-radius: 5px 5px 0px 0px;
  opacity: 1;
  width: 100%;
  padding: 10px;
  text-align: center;
  font-weight: bold;
  color: white;
  height: 42px;
}

.app-provider-name {
  background: transparent linear-gradient(90deg, #19313b 0%, #101415 100%) 0% 0% no-repeat
    padding-box;
  box-shadow: inset 0px 3px 6px #00000029;
  border-radius: 3px;
  text-align: center;
  color: white;
  font-size: 1rem;
  padding: 3px;
  width: 100%;
  position: relative;
  font-weight: 500;
}

.bg-app-provider-name {
  background: transparent linear-gradient(180deg, #7533ff 0%, #5a6bff 100%) 0% 0% no-repeat
    padding-box;
  border-radius: 3px;
  padding: 3px;
}

.btn-go-to-casino {
  background: transparent linear-gradient(270deg, #fe8a3a 0%, #af5427 100%) 0% 0% no-repeat
    padding-box;
  border-radius: 5px;
  color: white;
  text-decoration: underline;
  padding: 7px 0px;
  text-align-last: center;
}

.btn-go-to-casino:hover {
  color: black;
  text-decoration: underline;
}

.date-name-la {
  background: #e96c22 0% 0% no-repeat padding-box;
  border-radius: 5px;
  color: white;
  font-size: 1rem;
  padding: 3px;
  font-size: 1rem;
}

.period-name-la {
  color: black;
  font-size: 1rem;
  font-weight: 100;
  align-self: center;
}

.slick-app .slick-slide {
  margin: 25px;
  /*}*/
}

.slick-app .slick-center {
  -moz-transform: scale(1.08);
  -ms-transform: scale(1.08);
  -o-transform: scale(1.08);
  -webkit-transform: scale(1.08);
  opacity: 1;
  transform: scale(1.1);
  border-radius: 10px;
}

.bg-main-content-custom {
  background: rgba(57, 147, 61, 0.8);
  border-radius: 24px;
}

.bg-bank-content-custom {
  background: transparent linear-gradient(180deg, #3c4240 0%, #0c0d0d 100%) 0% 0% no-repeat
    padding-box;
  border-radius: 13px;
}

.text-topic-bank-add {
  font-size: 1.3rem;
  color: #fff;
}

.text-topic-bank-add img {
  /*filter: invert(100%);*/
}

.color-txt-price {
  color: #fdf58f;
}

.color-txt-num {
  color: #cd8b3e;
}

.multiply-change .color-txt-num {
  color: #000;
}

.font-size-txt-price {
  font-size: 1.1rem !important;
}

.font-size-credit-price-confirm {
  font-size: 1.9rem !important;
}

.border-same-price {
  border: 1px solid #c67b36;
  border-radius: 5px;
}

.bg-head-custom {
  background: #ffffff 0% 0% no-repeat padding-box;
  box-shadow: inset 0px 3px 6px #00000029;
  border-radius: 5px;
}

.container-login {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

.img-topic-slot-casino {
  width: 50%;
  height: auto;
  margin: -10px 25% 0% 25%;
}

.win-rate {
  border-radius: 0px;
  text-align: center;
}

.btn-login-register-admin {
  font-size: 1.3rem !important;
  background: #00c300 0% 0% no-repeat padding-box;
  border-radius: 35px;
  color: white;
  padding: 3%;
}

@media screen and (max-width: 768px) {
  .text-topic-bank-add {
    font-size: 1.2rem;
  }

  .padding-regis {
    padding: 2% 13%;
  }

  .font-bank-name-w {
    font-size: 0.7rem;
    padding: 4px 0px;
  }

  .font-size-credit-price-confirm {
    font-size: 1.5rem !important;
  }

  .font-size-txt-price {
    font-size: 0.9rem !important;
  }

  .img-topic-slot-casino {
    width: 100%;
    margin: 0;
  }

  .app-provider-name {
    font-size: 0.8rem;
    width: 92%;
    padding: 6px;
  }

  .app-provider-name.app-provider-name-main {
    font-size: 0.7rem;
    width: 92%;
    padding: 6px;
  }

  .container.container-login {
    padding-left: 5px;
    padding-right: 5px;
  }

  .bg-result-login {
    background: rgba(77, 42, 12, 0.53) 0% 0% no-repeat padding-box;
    border-radius: 14px;
    padding: 5px;
  }

  .display-result-lotto-m {
    display: block !important;
  }
}

.left-img {
  margin-left: -8px;
  z-index: 1;
}

.lottery-rule {
  background: transparent linear-gradient(180deg, #474747 0%, #0e0e0e 100%) 0% 0% no-repeat
    padding-box;
  border-radius: 5px;
  color: white;
  font-size: 0.8rem;
  font-weight: bold;
  width: 50%;
  display: flex;
  align-self: center;
  height: 1.2rem;
  justify-content: center;
  align-items: center;
}

.bg-lottery-card-bottom {
  background: #dfdfdf 0% 0% no-repeat padding-box;
  border-radius: 3px;
  justify-content: space-between;
}

.bg-period-lottery-card {
  background: #ffffff 0% 0% no-repeat padding-box;
  border-radius: 3px;
  color: black;
  font-size: 0.7rem;
  font-weight: bold;
  padding: 4px 15px;
  place-self: center;
}

.txt-open {
  color: #fff;
  font-size: 0.7rem;
  align-self: center;
  margin-bottom: -2px;
}

.txt-open-time {
  color: #022223;
  color: #ffffff;
  align-self: center;
}

.banner-radius {
  border-radius: 15px;
}

.banner-radius-deposit {
  border-radius: 8px;
}

.bg-app-provider {
  background: transparent linear-gradient(180deg, #ffffff 0%, #000000 100%) 0% 0% no-repeat
    padding-box;
  box-shadow:
    inset 0px 5px 5px #00000029,
    3px 3px 3px #00000029;
  border: 1px solid #fefcfc;
  opacity: 0.26;
  height: 82%;
  width: 80%;
  position: absolute;
  display: flex;
  margin-top: 17%;
  border-radius: 3px;
}

.bg-game-provider-login {
  background: transparent linear-gradient(180deg, #fe8a3a 0%, #af5427 100%) 0% 0% no-repeat
    padding-box;
  border-radius: 5px;
  height: 100%;
  text-align: -webkit-center;
}

.img-provider-app {
  width: 100%;
  height: auto;
  position: relative;
  box-shadow: inset 0px 3px 6px #00000029;
  border-radius: 5px;
}

.img-provider-app.grayout {
  filter: grayscale(100%);
}

.ads-login-border {
  border-radius: 5px;
  width: 100%;
}

.bg-app-logo-img {
  background: url(../custom/bg-logo-mobile.jpg) no-repeat top center;
  background-size: cover;
}

.bg-provider-app {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 5px;
}

.btn-login-center-txt {
  margin-left: -20px;
  display: inline-block;
  width: 100%;
  font-weight: 100;
}

.btn-regis-admin-center-txt {
  margin-left: -8px;
  display: inline-block;
  width: 100%;
  font-weight: 100;
}

.btn.btn-success.btn-block.btn-withdraw {
  height: 100%;
}

.drop-shadow-main-3 {
  /*filter: drop-shadow(0 0 0.2rem #929699);*/
}

.last-result-txt {
  color: white;
  text-align: center;
  font-size: 2rem;
  font-weight: 600;
}

.text-day-num {
  font-size: 2rem;
  color: white;
  font-weight: 600;
}

.text-thai-name-login {
  font-size: 1.6rem;
  font-weight: 100;
  color: white;
}

.th-result-head .p-1 {
  font-weight: 600;
}

.bg-slot-casino-hot {
  background: transparent
    linear-gradient(180deg, rgba(77, 42, 12, 0.7) 0%, rgba(15, 8, 2, 0.7) 100%) 0% 0% no-repeat
    padding-box;
}

.bg-slot-casino-hot-main {
  background: transparent
    linear-gradient(180deg, rgba(77, 42, 12, 0.7) 0%, rgba(15, 8, 2, 0.7) 100%) 0% 0% no-repeat
    padding-box;
  border-radius: 10px;
}

.bg-result-all {
  background: transparent linear-gradient(180deg, #16324e 0%, #030410 100%) 0% 0% no-repeat
    padding-box;
  border-radius: 20px;
}

.bg-head-app-top-login {
  background: transparent linear-gradient(180deg, #393939 0%, #000000 100%) 0% 0% no-repeat
    padding-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.bg-countdown-th-app {
  background: transparent linear-gradient(180deg, #4d2a0c 0%, #0f0802 100%) 0% 0% no-repeat
    padding-box;
  border-radius: 5px;
}

.bg-countdown-th-app-main {
  background: transparent linear-gradient(180deg, #4d2a0c 0%, #0f0802 100%) 0% 0% no-repeat
    padding-box;
  border-radius: 5px;
}

.huaygroups-txt {
  color: white;
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: 2px;
}

input.largerCheckbox {
  width: 1.2rem;
  height: 1.4rem;
}

.btn-call-app {
  background: #34ae01 0% 0% no-repeat padding-box;
  border-radius: 5px;
  color: white;
  font-size: 1.4rem;
}

.remember-me {
  color: #f1f1f1;
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 1rem;
}

.bg-flag-countdown-th {
  background: transparent linear-gradient(180deg, #b24c1c 0%, #82280d 100%) 0% 0% no-repeat
    padding-box;
  border-radius: 9px;
}

.bg-flag-countdown-th-main {
  background: transparent linear-gradient(180deg, #b24c1c 0%, #82280d 100%) 0% 0% no-repeat
    padding-box;
  border-radius: 4px;
}

.bg-th-name-bottom-flag {
  background: #ffffff 0% 0% no-repeat padding-box;
  box-shadow: inset 0px 3px 6px #00000029;
  border-radius: 0px 0px 9px 9px;
  color: #707070;
  margin: 3px 0px;
  padding: 3px;
  text-align: center;
}

.width-box-countdown-th {
  width: 25%;
}

.bg-open-bet-th {
  background: #ffffff 0% 0% no-repeat padding-box;
  border-radius: 3px;
}

.open-bet-th-txt {
  color: #45e601;
  font-size: 1.2rem;
  text-align: center;
  align-self: center;
}

.bet-now-txt {
  background: transparent linear-gradient(180deg, #fe8a3a 0%, #af5427 100%) 0% 0% no-repeat
    padding-box;
  border-radius: 0px 3px 3px 0px;
  color: #ffffff;
  font-size: 1.1rem;
  text-align: center;
}

#coloredInput-p1:-webkit-autofill,
#coloredInput-p2:-webkit-autofill {
  padding: 10px;
}

.form-control-app-login {
  background-color: transparent;
  color: #fff;
  padding: 16px;
  border: 1px solid #fff;
  border-radius: 7px;
}

.form-control-app-login.popup,
.form-control:focus.form-control-app-login.popup {
  padding: 10px;
  background-color: #f1f1f1;
  color: #000;
  padding-inline-start: 37px;
}

.bg-regis-2-btn {
  background: #4d2a0c 0% 0% no-repeat padding-box;
  border-radius: 5px;
}

.btn-login-register-admin.popup,
.btn-gradiant-login.popup {
  padding: 10px;
}

.btn-register.popup {
  padding: 7px;
}

.setting-main-txt {
  color: #fff;
  font-size: 1rem;
}

.app-add-icon {
  width: 1.3rem;
  margin: -4px 4px -10px;
}

.icon-logo-app-balance {
  border-radius: 50%;
  width: 1.3rem;
}

.bg-username-setting {
  background: #c28e11;
  border-radius: 50px;
  width: fit-content;
  font-size: 1.4rem;
  padding: 5px;
  align-items: center;
  align-self: center;
}

.icon-fa-backspace {
  margin: 1px;
  font-size: 1.4rem;
}

.bg-username-dp-m {
  background: grey;
  color: white;
  align-self: center;
  border-radius: 27px;
  align-items: center;
  /*padding: 1px;*/
  width: 100%;
}

.txt-balance-app-top {
  text-align: center;
  padding: 0px 16px 0px 16px;
  font-size: 1rem;
}

.bg-username-setting-icon {
  background: transparent linear-gradient(180deg, #b24c1c 0%, #82280d 100%) 0% 0% no-repeat
    padding-box;
  border-radius: 0px 1px 1px 0px;
  padding: 6px 7px;
  text-align: center;
  justify-content: center;
}

.flex-bottom-main {
  /*margin-bottom: -12%;*/
  /*margin-top: 4%;*/
}

.card-main-bg {
  background: transparent
    linear-gradient(180deg, rgba(13, 107, 21, 0.8) 0%, rgba(47, 114, 45, 0.8) 100%) 0% 0% no-repeat
    padding-box;
  border-radius: 10px;
}

.near-close-huay {
  background: transparent
    linear-gradient(180deg, rgba(13, 107, 21, 0.7) 0%, rgba(47, 114, 45, 0.7) 100%) 0% 0% no-repeat
    padding-box;
  border-radius: 10px;
}

.btn-request-all {
  background: transparent linear-gradient(180deg, #25594a 0%, #0e0e0e 100%) 0% 0% no-repeat
    padding-box;
  border-radius: 21px;
  color: white;
  padding: 8px;
  font-size: 1rem;
}

.width-setting-icon {
  width: 20%;
}

.justify-content-menu-pc {
  justify-content: space-between;
}

.balance-amount-num {
  color: #000;
  font-size: 3.5rem;
  text-align: center;
  font-weight: bolder;
}

.balance-amount-txt {
  font-size: 1.5rem;
  color: #000;
  text-align: center;
  font-weight: bolder;
}

.font-username-card {
  font-size: 1.5rem;
}

.bg-box-huay-almost-close {
  border: 1px solid #72dbe7;
  border-radius: 14px;
}

.huay-almost-close-txt {
  color: #ffffff;
  white-space: nowrap;
  width: 100%;
  font-size: 1.9rem;
  /*background: transparent linear-gradient(90deg, #6deafa 0%, #022248 100%) 0% 0% no-repeat padding-box;*/
  /*border-radius: 100px;*/
}

.img-icon-username-main {
  width: 1.5rem;
}

.bg-link-product-main-close {
  background: #707070 0% 0% no-repeat padding-box;
  border-radius: 26px 22px 22px 25px;
  margin-bottom: 3px !important;
}

.bottom-main-slot {
  margin-bottom: 3% !important;
}

.menu-txt-dd {
  color: #fff;
  float: right;
  font-size: 1rem;
}

.username-text-dd {
  font-size: 1rem;
}

.menu-txt-dd i.fas.fa-backspace {
  color: #fff !important;
}

.logo-head-side-bar {
  width: 5rem;
  /*margin: -5% -2%;*/
}

.line-menu {
  background: #fff 0% 0% no-repeat padding-box;
  box-shadow: inset 0px 3px 6px #00000029;
  border-radius: 6px;
  padding: 2px;
  width: 100%;
}

.line-menu-logout {
  background: #fff 0% 0% no-repeat padding-box;
  box-shadow: inset 0px 3px 6px #00000029;
  border-radius: 6px;
  padding: 2px;
  margin: 6px 0px;
}

.bg-deposit {
  background: transparent
    linear-gradient(180deg, rgba(22, 50, 78, 0.9) 0%, rgba(3, 4, 16, 0.9) 100%) 0% 0% no-repeat
    padding-box;
  border-radius: 30px;
}

.lotto-title-deposit {
  color: white;
}

/*.ng-invalid:not(form)  {*/
/*  border-left: 1px solid #fff !important; !* red *!*/
/*}*/

/*.ng-valid[required], .ng-valid.required  {*/
/*  border-left: 1px solid #fff !important; !* green *!*/
/*}*/
#coloredInputDeposit1:-webkit-autofill:focus {
  transition: background-color 5000s ease-in-out 0s;
  -webkit-text-fill-color: black;
  /*padding: 28px;*/
}

#coloredInputR2:-webkit-autofill,
#acc:-webkit-autofill,
#reacc:-webkit-autofill,
#coloredInputR:-webkit-autofill {
  transition: background-color 5000s ease-in-out 0s;
  -webkit-text-fill-color: black;
  /*padding: 13px;*/
}

.form-control:focus.form-control-deposit {
  background-color: transparent;
  color: white;
}

.form-control:focus.form-control-register {
  background-color: transparent;
  color: white;
}

.mat-select-placeholder {
  color: #b2b2b2 !important;
}

.form-control-deposit {
  background: transparent;
  border: 1px solid #c5c5c5;
  border-radius: 5px;
  color: #ffffff;
  padding: 12px;
  background-color: transparent;
}

.form-control-register {
  background: none !important;
  border: 1px solid #c5c5c5;
  border-radius: 5px;
  color: #ffffff;
  padding: 12px;
}

.mat-select-arrow {
  color: #b2b2b2 !important;
}

.fa-square-check-color {
  color: white;
}

.border-tablist-tang {
  border: 1px solid #fed776;
  border-radius: 5px;
}

.tanghuay-product-name {
  /*background-color: #0076FD;*/
  border-radius: 9px;
  display: flex;
  justify-content: space-between;
  padding: 15px;
  font-weight: bold;
  align-items: center;
}

.flag-circle {
  border-radius: 50%;
  width: 1.3rem;
  margin: 4px;
}

.bg-row-btn-tanghuay {
  border-radius: 4px;
  color: #fff;
  border: 2px solid #f4f2c5;
  background: none;
  padding: 3px;
  font-size: 1.2rem;
}

.bg-row-btn-tanghuay-new {
  border: 2px solid #f4f2c5;
}

.bg-row-btn-tanghuay.active {
  background: transparent linear-gradient(89deg, #af7f0a 0%, #d6a80d 100%) 0% 0% no-repeat
    padding-box;
  border: 2px solid #f4f2c5;
  padding: 3px;
  font-size: 1.2rem;
}

.bg-option-select {
  background: transparent linear-gradient(180deg, #393939 0%, #000000 100%) 0% 0% no-repeat
    padding-box;
  border-radius: 5px;
}

.badge-option-select {
  background: transparent linear-gradient(180deg, #fefc74 0%, #c67b36 100%) 0% 0% no-repeat
    padding-box;
  border-radius: 5px;
  color: black;
  font-size: 75%;
  margin: 2px 2px !important;
}

.poy-list-lot {
  background: transparent
    linear-gradient(180deg, rgba(60, 66, 64, 0.8) 0%, rgba(12, 13, 13, 0.8) 100%) 0% 0% no-repeat
    padding-box;
  border-radius: 9px;
  margin-bottom: 3%;
}

.poy-list-lot-txt {
  font-size: 1.7rem;
  color: white;
  text-align: center;
}

.poy-list-lot-game-txt {
  background: rgba(0, 0, 0, 0.48) 0% 0% no-repeat padding-box;
  width: 100%;
  text-align: center;
  color: #cd8b3e;
  font-size: 1.3rem;
  padding: 3px;
  margin: 13px 0px;
}

.bg-item-show-bet {
  /*background: rgba(0,0,0,0.6) 0% 0% no-repeat padding-box;*/
  padding: 5px;
  font-size: 1.3rem;
  width: calc(100% / 7);
  justify-content: space-around;
}

.bg-item-show-bet .bg-item-show-bet-inner {
  padding: 10px;
  background: rgba(0, 0, 0, 0.6) 0% 0% no-repeat padding-box;
  display: flex;
  justify-content: space-evenly;
}

.fa-times-circle {
  color: red;
}

.fa-times-circle.text-white {
  font-size: medium;
}

.txt-lot-condition {
  color: #ffffff;
  font-size: 1.3rem;
  font-weight: bold;
  margin: 10px 0px;
}

.btn-swap-num {
  color: #fdf58f;
  background: none;
  border: 2px solid #c67b36;
}

.or-color-register {
  background: transparent linear-gradient(270deg, #fefc74 0%, #c67b36 100%) 0% 0% no-repeat
    padding-box;
  border-radius: 5px;
  color: white;
  width: 25%;
  padding: 3px;
}

.img-step-r3 {
  width: 30%;
}

.mr-icon-withdraw-topic {
  /*margin-right: 39%;*/
}

.bg-list-price {
  border: 1px solid #fcc45a !important;
  border-radius: 4px !important;
  color: #fcc45a;
}

.box__chip-lists .price {
  background: transparent linear-gradient(180deg, #160e07 0%, #39312b 100%) 0% 0% no-repeat
    padding-box !important;
}

.line-credit {
  background: transparent linear-gradient(180deg, #f0dbbc 0%, #bca989 100%) 0% 0% no-repeat
    padding-box;
  border-radius: 1px;
  height: 90%;
  width: 2px;
}

.padding-countdown-th-main {
  padding: 3% 29%;
}

.col9-cd-th-main {
  display: flex;
  bottom: 0;
  flex-direction: column;
  justify-content: center;
}

.bg-item-in-list-poy {
  background: #4d2a0c;
  color: #fdf58f;
  padding: 2px 3px;
  align-self: center;
}

.bg-item-in-list-poy .flex-grow-1 {
  align-self: center;
}

@media screen and (max-width: 768px) {
  .bg-tab-main {
    margin-bottom: -6% !important;
    z-index: 1000;
    position: relative;
  }

  .balance-m {
    border-radius: 15px !important;
  }

  .balance-amount-txt {
    font-size: 1.2rem;
  }

  .balance-amount-num {
    font-size: 2rem;
  }

  .bg-btn-tab-main {
    display: flex;
    color: white;
    height: 100%;
    font-weight: bold;
    justify-content: center;
    padding: 17px 13px !important;
    background: transparent linear-gradient(180deg, #1ea4d9 0%, #083359 100%) 0% 0% no-repeat
      padding-box;
  }

  .tab-label-main-huay {
    border-radius: 5px 0px 0px 0px;
  }

  .tab-label-main-mini {
    border-radius: 0px 5px 0px 0px;
  }

  .tab-label-main.active .bg-btn-tab-main {
    background: transparent linear-gradient(180deg, #b32a22 0%, #df4338 100%) 0% 0% no-repeat
      padding-box;
  }

  .card-main-bg {
    /*margin-top: 5% !important;*/
    /*padding-top: 6% !important;*/
  }

  .bg-deposit {
    border-radius: 8px;
  }

  .fa-times-circle.text-white {
    font-size: small;
  }

  .bg-flag-countdown-th-main {
    background: transparent linear-gradient(180deg, #fed574 0%, #b46c2b 100%) 0% 0% no-repeat
      padding-box;
    border-radius: 4px;
  }

  .mr-icon-withdraw-topic {
    margin-right: 4%;
  }

  .or-color-register {
    width: 35%;
  }

  .padding-withdraw {
    padding: 0% 4%;
  }

  .padding-register {
    padding: 0% 8%;
  }

  .img-step-r3,
  .img-step-r {
    width: 48%;
  }

  .img-step-f2,
  .img-step-r2 {
    width: 44%;
  }

  .flag-circle {
    width: 10%;
    margin: 0px;
  }

  .tanghuay-product-name {
    color: white;
    padding: 8px;
  }

  .countdown-number {
    color: #fdf58f;
  }

  .bg-row-btn-tanghuay,
  .bg-row-btn-tanghuay.active {
    font-size: 1.1rem;
  }

  .bg-item-show-bet {
    width: calc(100% / 3);
  }

  .btn-choke-rule {
    padding: 2px 16px 2px 16px !important;
  }

  .fa-square-check-color {
    /*color: black;*/
  }

  .bottom-main-slot {
    margin-bottom: 17% !important;
  }

  .bg-slot-casino-hot-main {
    border-radius: 0px;
  }

  .btn-request-all {
    font-size: 0.8rem;
    padding: 7px;
  }

  .font-username-card {
    font-size: 1.2rem;
  }

  .img-icon-username-main {
    width: 1.3rem;
  }

  .justify-content-menu-pc {
    justify-content: flex-end;
  }

  .width-setting-icon {
    width: 15%;
  }

  .border-top-navbar {
    padding-top: 8px;
  }

  #coloredInput-m:-webkit-autofill,
  #coloredInputR4:-webkit-autofill,
  #val_password:-webkit-autofill,
  #val_password:-webkit-autofill:focus,
  #coloredInputR6:-webkit-autofill,
  #coloredInputR5:-webkit-autofill,
  #coloredInput-p1:-webkit-autofill,
  #coloredInput-p2:-webkit-autofill,
  #coloredInput2-m:-webkit-autofill {
    transition: background-color 5000s ease-in-out 0s;
    -webkit-text-fill-color: black;
    /*padding: 11px;*/
    padding-inline-start: 37px;
    background: rgba(0, 0, 0, 0) !important;
  }

  .no-border-input {
    /*border: none; !* Remove the default border *!*/
    /*border-bottom: 2px solid #fff; !* Add a border at the bottom *!*/
    /*border-radius: 0; !* Optionally remove border radius *!*/
  }

  #coloredInput-popup1:-webkit-autofill,
  #coloredInput-popup2:-webkit-autofill {
    background-color: transparent;
    -webkit-box-shadow: 0 0 0px 1000px white inset;
    -webkit-text-fill-color: black !important;
  }

  .form-control-app-login.popup,
  .form-control:focus.form-control-app-login,
  .form-control-app-login {
    padding: 11px;
    padding-inline-start: 37px;
  }

  .banner-radius {
    border-radius: 5px;
  }

  .text-thai-name-login {
    font-size: 1rem;
  }

  .last-result-txt {
    font-size: 1.3rem;
  }

  .remember-me {
    font-size: 1.1rem;
  }

  .color-text-regis-app {
    color: white;
    font-size: 0.8rem;
    text-align-last: center;
  }

  .btn-register {
    font-size: 1.1rem !important;
  }

  .bg-flag-countdown-th {
    border-radius: 3px;
  }

  .bg-th-name-bottom-flag {
    border-radius: 0px 0px 3px 3px;
  }

  .padding-login-app-m {
    padding: 0 25px !important;
  }

  .padding-banner-login {
    padding: 0 10px !important;
  }

  .bg-login-m {
    background: transparent linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgb(0 0 0) 59%) 0%
      0% no-repeat padding-box;
  }

  .flag-on-top-lotto {
    height: 20px;
  }

  .bg-username-setting {
    font-size: 0.8rem;
    padding: 3px 6px;
    border-radius: 27px;
  }

  .bg-username-setting-icon {
    padding: 0;
    font-size: 0.8rem;
    height: 100%;
    align-items: center;
    justify-content: center;
  }

  .setting-txt {
    font-size: 0.7rem;
    align-self: center;
    display: flex;
    place-items: center;
    place-content: center;
    width: 50%;
  }

  .bg-box-huay-almost-close {
    background: none;
    border: none;
  }

  .font-size-tang-text {
    font-size: 1.1rem;
  }

  .lotto-name-main {
    font-size: 1rem;
  }
}

.img-width-side {
  width: 100%;
  /*padding: 3px;*/
}

.img-width-side2 {
  width: 12rem;
  padding: 9px 2px;
}

.img-width-side3 {
  width: 6rem;
}

.bg-main-gradient {
  background: transparent
    radial-gradient(closest-side at 50% 50%, rgba(77, 42, 12, 0.9) 0%, rgba(15, 8, 2, 0.9) 100%) 0%
    0% no-repeat padding-box !important;
}

.mr-ball-lot-yk {
  margin-right: 2%;
  width: 1.3rem !important;
}

.bg-all-main {
  background: transparent
    linear-gradient(180deg, rgba(191, 145, 105, 0.3) 0%, rgba(224, 194, 119, 0.3) 100%) 0% 0%
    no-repeat padding-box;
  border-radius: 10px 10px 0px 0px;
}

.bg-all-main-bottom {
  background: transparent;
  border-radius: 0px 0px 10px 10px;
}

.bg-main-middle {
  background: rgba(3, 4, 16, 0.9) 0% 0% no-repeat padding-box;
}

.flag-on-countdown-m {
  height: 40px;
  width: auto;
  border-radius: 50%;
  align-self: center;
  padding-right: 1px;
}

.strike-center .--content {
  background: transparent linear-gradient(270deg, #fefc74 0%, #c67b36 100%) 0% 0% no-repeat
    padding-box !important;
  border-radius: 5px;
  color: white;
  padding: 3px 49px !important;
}

.strike-center::after {
  border-bottom: 3px #ca833a solid !important;
}

.margin-top-banner-top {
  margin-top: 4rem;
}

.bg-black-result-login {
  background: transparent linear-gradient(180deg, #393939 0%, #000000 100%) 0% 0% no-repeat
    padding-box;
  border-radius: 10px;
}

.text-white i.fas.fa-bars.image-btn-effect2 {
  color: #fff;
}

.username-main-m {
  color: #fff;
  background: url(/assets/custom/user-bg.png) no-repeat top center;
  background-size: 100% 100%;
  border-radius: 10px 10px 0px 0px;
  padding: 15px;
  font-size: 1.2rem;
}

.balance-m {
  background: rgba(255, 255, 255, 0.8);
  border-radius: 25px;
  overflow: hidden;
  /*height: 5rem;*/
}

.img-main-logo-card-main {
  width: 100%;
  align-self: center;
}

@media screen and (max-width: 768px) {
  .img-main-logo-card-main {
    height: 75px;
    align-self: center;
  }

  .bar-back-bg {
    background: transparent linear-gradient(90deg, #f60606 0%, #7b0303 100%) 0% 0% no-repeat
      padding-box;
    border-radius: 100px;
  }

  .padding-banner-login-color img.my-0 {
    width: 20% !important;
    margin: 3% !important;
  }

  .bg-black-result-login {
    background: transparent linear-gradient(180deg, #393939 0%, #000000 100%) 0% 0% no-repeat
      padding-box;
  }

  .margin-top-banner-top {
    margin-top: 0%;
  }

  .padding-banner-login-color {
    position: relative;
    background: transparent linear-gradient(180deg, #ff9800 0%, #9f6207 100%) 0% 0% no-repeat
      padding-box;
  }
  .padding-banner-login-bg {
    background: transparent
      linear-gradient(180deg, #4caf50 0%, rgb(52 139 56) 50%, rgb(22 72 24) 100%) 0% 0% no-repeat
      padding-box;
    padding-top: 1% !important;
    border-radius: 10px;
  }

  .bg-all-main {
    background: transparent;
  }

  .bg-countdown-card {
    background: transparent linear-gradient(180deg, #393939 0%, #000000 100%) 0% 0% no-repeat
      padding-box;
    color: white;
    padding: 4px;
  }

  .collon-countdown {
    height: 100%;
    align-self: center;
    padding: 2px;
  }

  .bg-tang-th {
    padding: 2px;
  }

  .huay-almost-close-txt {
    background: transparent;
    font-size: 1.7rem;
  }

  .bg-4main-lotto-close-top {
    background: transparent
      linear-gradient(180deg, rgba(13, 20, 36, 0.8) 0%, rgba(39, 51, 79, 0.8) 100%) 0% 0% no-repeat
      padding-box;
    border-radius: 20px 20px 0 0;
  }

  .bg-4main-lotto-close-bottom {
    background: transparent
      linear-gradient(180deg, rgba(39, 51, 79, 0.8) 0%, rgba(13, 20, 36, 0.8) 100%) 0% 0% no-repeat
      padding-box;
    border-radius: 0px 0px 20px 20px;
  }
}

.transparent-input {
  background-color: transparent !important;
  color: white;
}

.transparent-input:-webkit-autofill {
  transition: background-color 5000s ease-in-out 0s;
  -webkit-text-fill-color: black;
  /*padding: 11px;*/
}

.click-provider-name-login {
  background-color: #3e8e41;
  border: 3px solid #fff;
}

.click-provider-name-login.active {
  background-color: #3e8e41;
  border: 3px solid red;
}

/*input:-internal-autofill-selected {*/
/*  background-color: red !important;*/
/*  color: black;*/
/*}*/

/*input:-webkit-autofill {*/
/*  background-color: yellow;*/
/*  -webkit-box-shadow: 0 0 0px 1000px white inset;*/
/*  -webkit-text-fill-color: black !important;*/
/*}*/

.container .bg-light.main-content {
  /*background: transparent linear-gradient(180deg, rgba(13, 20, 36, 0.9) 0%, rgba(39, 51, 79, 0.9) 51%, rgba(13, 20, 36, 0.9) 100%) 0% 0% no-repeat padding-box;*/
  /*color: white;*/
}

.container .bar-back {
  background: #c28e11 0% 0% no-repeat padding-box;
}

.container .bar-back a {
  color: #fff;
}

a.btn.btn-theme-primary {
  color: white;
}

.w-game-result {
  height: 40%;
}

.w-result {
  height: 60%;
  align-items: center;
}

.bg-white {
  color: black;
}

.text-secondary.shadow-sm.rounded.p-2.xtarget.col-lotto.mb-5.bg-result-detail-product {
  background: white;
}

.container .bg-light.main-content .bgwhitealpha {
  color: black;
}

.bg-white label.number {
  border: solid 1px #3e6795;
}

.bg-white .btn-theme-number-pad {
  background: #c09369;
  color: white;
}

.bg-topic-result-all {
  background: transparent linear-gradient(180deg, #70f0ff 0%, #001e45 100%) 0% 0% no-repeat
    padding-box;
  box-shadow: inset 0px 3px 6px #00000029;
  border-radius: 5px;
  color: #fff;
  align-items: center;
  font-size: 1.4rem;
}

.card .card-text:last-child {
  color: black;
}

.container .bg-light.main-content a.btn-af.btn.btn-theme-outline-primary {
  background-color: white !important;
}

.container
  .bg-light.main-content
  a.btn-af.btn.btn-theme-outline-primary:not(:disabled):not(.disabled).active {
  background-color: var(--bg-primary-color) !important;
  color: white !important;
}

.button-consonants-item.active {
  background-color: #61d6e7 !important;
  color: #ffffff !important;
}

@media screen and (min-width: 992px) {
  .dream-item-container.col-lg-4 {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
  .dream-item-container.col-md-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

div#nav-dream-tab {
  margin: 0;
}

.side-bar-bottom-text {
  color: white;
  align-items: center;
}

.plus-icon-dp-m {
  width: 2rem;
  margin-bottom: -5px !important;
  margin-left: 2px;
}

.bg-date-main {
  background: transparent
    linear-gradient(180deg, rgba(243, 244, 245, 0.6) 0%, rgba(255, 255, 255, 0.6) 100%) 0% 0%
    no-repeat padding-box;
  border-radius: 27px;
  width: 100%;
  padding: 5px;
  height: fit-content;
  color: white;
  font-size: 1.2rem;
}

.bg-announce-main {
  background: #191e1e 0% 0% no-repeat padding-box;
  border-radius: 5px;
  display: flex;
  align-items: center;
  height: 100%;
}

.bg-history-game-main {
  background: transparent linear-gradient(180deg, #b32a22 0%, #df4338 100%) 0% 0% no-repeat
    padding-box;
  border-radius: 6px;
  color: white;
}

.game-head-title-main {
  font-size: 1rem;
  font-weight: 600;
  color: white;
  align-self: center;
  position: absolute;
}

.header {
  height: 25px;
  overflow: hidden;
  color: white;
}

.boxgame::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 15px;
  padding: 4px; /* control the border thickness */
  background: linear-gradient(to right, #0a6b37, #0f2a17);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.img-game-main {
  width: 100%;
  height: auto;
  border-radius: 6px;
}

.img-game-main.grayout {
  filter: grayscale(100%);
}

.boxgame-main {
  position: relative;
  background: rgba(255, 255, 255, 0.7);
  border: 2px solid #d55d0d;
  border-radius: 20px;
}

.bg-lottory-detail {
  background: #ffffff 0% 0% no-repeat padding-box;
  box-shadow: inset 0px 3px 6px #00000029;
  border-radius: 8px;
  padding: 1px;
}

.bg-lottory-detail-in {
  background: #f3f4f5 0% 0% no-repeat padding-box;
  box-shadow: inset 0px 3px 6px #00000029;
  border: 0.5px solid #ffffff;
  border-radius: 8px;
  /*margin: 1px;*/
}

.bg-lottery-rule {
  background: transparent linear-gradient(180deg, #19313b 0%, #101415 100%) 0% 0% no-repeat
    padding-box;
  box-shadow: 2px 2px 3px #00000029;
  border: 0.699999988079071px solid #ffffff;
  border-radius: 10px;
  color: white;
  font-size: 0.8rem;
  padding: 2px;
  text-align: center;
}

.bg-lottery-yk-text-close {
  background: #fbb03b 0% 0% no-repeat padding-box;
  box-shadow: 2px 2px 3px #00000029;
  border: 0.699999988079071px solid #ffffff;
  border-radius: 10px;
  font-size: 0.8rem;
  padding: 2px;
  color: white;
  text-align: center;
}

.font-size-calendar {
  font-size: 0.7rem;
}

.font-lottery-date {
  font-size: 0.8rem;
  color: #707070;
}

.bg-lottery-text-tang {
  border-radius: 0px 8px 8px 0px;
  color: white;
  background: transparent linear-gradient(270deg, #00c300 0%, #148341 100%) 0% 0% no-repeat
    padding-box;
}

.lottery-text-tang {
  height: 100%;
  text-align: center;
  justify-content: center;
  display: flex;
  align-items: center;
}

.line-lottory {
  background: #cccccc 0% 0% no-repeat padding-box;
  width: 2px;
  height: 97%;
  margin-left: 8px;
}

.image-container {
  position: relative;
  text-align: center;
  align-self: center;
}

.overlay-image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  object-fit: cover; /* Maintain aspect ratio */
  opacity: 0.7;
  z-index: 1; /* Put overlay on top of the base image */
}

.bg-result-date {
  background: #ffffff 0% 0% no-repeat padding-box;
  box-shadow: inset 0px 3px 6px #00000029;
  border: 0.5px solid #ffffff;
  border-radius: 3px;
  font-size: 0.7rem;
  text-align: center;
}

.bg-btn-history-result {
  box-shadow: 2px 2px 3px #00000029;
  border: 0.699999988079071px solid #7533ff;
  border-radius: 4px;
  font-size: 0.8rem;
  text-align: center;
  color: #7533ff;
}

.bg-date-history-result {
  background: rgba(255, 255, 255, 0.6) 0% 0% no-repeat padding-box;
  box-shadow: inset 0px 3px 6px #00000029;
  border: 0.5px solid #ffffff;
  border-radius: 5px;
  margin: 0px;
  padding: 2px !important;
}

@media screen and (max-width: 768px) {
  .bg-form-login-m {
    border-radius: 20px;
    margin: 1px;
    background: transparent
      linear-gradient(180deg, rgba(22, 50, 78, 0.2) 0%, rgba(3, 4, 16, 0.2) 100%) 0% 0% no-repeat
      padding-box;
    box-shadow: inset 0px 3px 6px rgba(0, 0, 0, 0.16);
  }

  .bg-date-main {
    font-size: 1rem;
  }

  .container .bar-back.bar-back-bg {
    background: transparent linear-gradient(90deg, #1ea4d9 0%, #083359 100%) 0% 0% no-repeat
      padding-box;
    border-radius: 100px;
    padding: 1px;
  }

  .text-header {
    font-size: 1.4rem;
  }
}

.bg-result-detail {
  background: rgba(255, 255, 255, 0.5) 0% 0% no-repeat padding-box;
  box-shadow: inset 0px 3px 6px rgba(0, 0, 0, 0.16);
  border: 0.5px solid rgba(255, 255, 255, 1);
  border-radius: 5px;
  font-size: 1.2rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.bg-result-number {
  background: #ffffff 0% 0% no-repeat padding-box;
  box-shadow: inset 0px 3px 6px #00000029;
  border: 0.5px solid #ffffff;
  border-radius: 5px;
  color: #15c296;
  font-weight: 700;
  display: flex;
  justify-content: center;
  padding: 1px;
  padding-top: 2px;
}

.bg-main-casino {
  background: transparent linear-gradient(180deg, #b32a22 0%, #df4338 100%) 0% 0% no-repeat
    padding-box;
  border-radius: 11px;
  font-size: 1.3rem;
  text-align: center;
  color: white;
}

.bg-main-mini {
  background: transparent linear-gradient(180deg, #1ea4d9 0%, #083359 100%) 0% 0% no-repeat
    padding-box;
  border-radius: 11px;
  font-size: 1.3rem;
  color: white;
  text-align: center;
}

.bg-main-mini a,
.bg-main-casino a {
  color: white;
}

.plus-icon-app {
  width: 1.1rem;
  margin: -16px 0 -10px 1px;
}

.live-bottom-bar[class] {
  --m_live-bottom-bar_bottom: 60px;
}