/* CSS Variables */
:root {
  --color-magnum: #ffc20f;
  --color-sportstoto: #e00a14;
  --color-sabah88: #2b7bf8;
  --color-sandakan: #f3c033;
  --color-damacai: #1c377c;
  --color-sgpools: #05608f;
  --color-cashsweep: #408703;
  --color-granddragon: #a1040f;
  --color-perdana: #0065ca;
  --color-luckyharihari: #000080;
}

/* Base */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Noto Sans", sans-serif;
  font-weight: 400;
  font-style: normal;
  color:#212529;
  background-image: url('../assets/img/so-white.png')
}

img {
  vertical-align: middle;
}

/* Utils */
.cn {
  font-family: "Noto Sans SC", sans-serif;
  font-style: normal;
}

.border-right {
  border-right: 1px solid #eee;
}

.border-bottom {
  border-bottom: 1px solid #eee;
}

.title {
  text-align: center;
  font-size: 18px;
  background-color: rgb(185, 10, 12, 0.85);
  color: white;
  padding-block: 5px;
  border-radius: 10px;
}

.sitelogo {
  font-size: 18px;
  font-weight: 900;
  color: #b90a0c;
}

.live-text {
  color: #b90a0c;
  font-weight: 700;
  font-size: 14px;
  display: none;
}

span.is-changed {
  color: red;
}

/* Layout  */
header {
  border-top: 5px solid #b90a0c;
  border-bottom: 1px solid #eee;
}

footer {
  border-bottom: 5px solid #b90a0c;
}

main {
  position: relative;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.container {
  padding: 20px;
  margin: 0 auto;
  max-width: 1200px;
}

.live-lottery {
  margin-bottom: 50px;
  border: 2px dashed #b90a0c;
  padding: 5px;
  border-radius: 10px;
}

.results {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 10px;
  align-items: flex-start;
}

#west-my { display: none; }
#east-my { display: none; }
#singapore { display: none; }
#cambodia { display: none; }

@media screen and (min-width: 768px) {
  .results {
    grid-template-areas:
      "_4d _4d"
      "magnum4d damacai4d"
      "sporstoto4d sabah884d"
      "sandakan4d cashsweep4d"
      "sgpools4d granddragon4d "
      "perdana4d lucky4d"
      "others others"
      "magnum-others damacai6d"
      "sportstoto-lotto sabah88-lotto"
      "sgpools-toto granddragon6d"
    ;
    grid-auto-columns: 1fr;
  }

  #_4d { grid-area: _4d; }
  #magnum4d { grid-area: magnum4d; }
  #sporstoto4d { grid-area: sporstoto4d; }
  #damacai4d { grid-area: damacai4d; }
  #sabah884d { grid-area: sabah884d; }
  #sandakan4d { grid-area: sandakan4d; }
  #cashsweep4d { grid-area: cashsweep4d; }
  #sgpools4d { grid-area: sgpools4d; }
  #granddragon4d { grid-area: granddragon4d; }
  #perdana4d { grid-area: perdana4d; }
  #lucky4d { grid-area: lucky4d; }
  #others { grid-area: others; }
  #magnum-others { grid-area: magnum-others; }
  #sportstoto-lotto { grid-area: sportstoto-lotto; }
  #damacai6d { grid-area: damacai6d; }
  #sabah88-lotto { grid-area: sabah88-lotto; }
  #sgpools-toto { grid-area: sgpools-toto; }
  #granddragon6d { grid-area: granddragon6d; }
}

@media screen and (min-width: 1136px) {
  #_4d { display: none; }
  #others { display: none; }
  #west-my { display: block; }
  #east-my { display: block; }
  #singapore { display: block; }
  #cambodia { display: block; }

  .results {
    grid-template-areas:
      "west-my west-my west-my"
      "magnum4d damacai4d sporstoto4d"
      "magnum-others damacai6d sportstoto-lotto"
      "east-my east-my east-my"
      "sabah884d sandakan4d cashsweep4d"
      "sabah88-lotto . ."
      "singapore singapore singapore"
      "sgpools4d sgpools-toto ."
      "cambodia cambodia cambodia"
      "granddragon4d perdana4d lucky4d"
      "granddragon6d . ."
    ;
    grid-auto-columns: 1fr;
  }

  #west-my { grid-area: west-my; }
  #east-my { grid-area: east-my; }
  #singapore { grid-area: singapore; }
  #cambodia { grid-area: cambodia; }
}

.nav-region {
  margin-bottom: 20px;
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
  display: none;
}
.nav-region ul {
  display: flex;
  list-style: none;
  background-color: #b90a0c;
}
.nav-region li {
  flex: 1;
  border-right: 1px solid rgba(255,255,255,0.5);
}
.nav-region a {
  display: block;
  text-align: center;
  text-decoration: none;
  padding-block: 10px;
  color: white;
  font-weight: 700;
  transition-duration: 300ms;
  background-color: #b90a0c;
}
.nav-region a:hover {
  transform: scale(1.1);
}

@media screen and (min-width: 1050px) {
  .nav-region { display: block; }
}