/* macaujc static shell — match original flexible rem + 1164 desktop width */

/*
  Original dump used html font-size ≈ viewport/10 (e.g. 137.3px on wide screens)
  and .page-width { width: 1164px }. Scale rem with viewport; cap at 1164 design.
*/
html {
  font-size: 10vw !important;
}
@media (min-width: 1164px) {
  html {
    font-size: 116.4px !important;
  }
}

html,
body {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  background: #dcdcdc !important;
  display: block !important;
  border: 0 !important;
  box-sizing: border-box !important;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

#app,
.page-width {
  width: 100% !important;
  max-width: 1164px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  background: #fff !important;
  /* visible so rem children are not cropped on the right at desktop */
  overflow-x: visible !important;
}

.site-topbar {
  width: 100%;
  max-width: 1164px;
  margin: 0 auto;
  background: #000;
  text-align: right;
  padding: 8px 12px;
  box-sizing: border-box;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}
.site-topbar a {
  color: #ffd400;
  font-weight: 700;
  text-decoration: none;
  font-size: 15px;
}

/* SEO intro: always px so rem never blows copy */
[data-bing-home] {
  width: 100% !important;
  max-width: 1164px !important;
  margin: 0 auto !important;
  padding: 12px 14px 8px !important;
  background: #0a1f14 !important;
  color: #f3f7f2 !important;
  box-sizing: border-box;
  line-height: 1.6 !important;
  overflow: visible !important;
  white-space: normal !important;
}
[data-bing-home] h1 {
  font-size: 20px !important;
  margin: 0 0 8px !important;
  line-height: 1.35 !important;
  white-space: normal !important;
  overflow: visible !important;
}
[data-bing-home] p {
  font-size: 14px !important;
  margin: 0 0 8px !important;
  white-space: normal !important;
  overflow: visible !important;
  word-break: break-word;
}
[data-bing-home] a {
  color: #e6c35c !important;
  font-size: 14px !important;
}

.daohang {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}
.daohang > a {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  display: block !important;
  text-decoration: none !important;
  color: #000 !important;
}
.daohangdiv {
  /* 38px @ 375 design → ~1.01rem when html = 10vw */
  height: 1.013rem !important;
  line-height: 1.013rem !important;
  text-align: center !important;
  color: #fff !important;
  font-size: 0.28rem !important;
  overflow: visible;
  white-space: nowrap;
  padding: 0 2px;
  box-sizing: border-box !important;
}

.logo-box {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-end !important;
  gap: 8px;
  background: #fff !important;
  padding: 10px 8px 8px !important;
  box-sizing: border-box;
  width: 100% !important;
  max-width: 100% !important;
}
.logo-img {
  width: 4.613rem !important;
  max-width: 48% !important;
  height: auto !important;
}
.switch_style {
  flex: 0 0 auto;
  max-width: 48%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Dump artifacts: fixed desktop widths that blow phones */
.lotteryMain,
.find-div,
.main_contact .title,
.main_contact .article_contact,
.mainText .title,
.mainText .main,
#video,
.video-box {
  width: 100% !important;
  max-width: 100% !important;
}

.carousel-container {
  width: 100% !important;
  max-width: 100% !important;
  height: 3.36rem !important;
  overflow: hidden !important;
  position: relative;
}
.carousel-slide,
.carousel-slide img,
.carousel-container img,
img {
  max-width: 100% !important;
  height: auto;
}

.open_code_zone {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0.12rem 0.1rem !important;
  height: auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
}
.open_code_zone_left {
  flex: 1 1 2.2rem !important;
  min-width: 0 !important;
  max-width: 100% !important;
}
.open_code_zone_left-content {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: space-between !important;
  width: 100% !important;
  max-width: 100% !important;
  gap: 4px;
}
.open_code_zone_left-item {
  margin-right: 0 !important;
  flex: 0 1 auto;
}

.hisWrapper,
.hisItem,
.hisSubject,
.frequency-box,
.lotteryTitle,
.open_zone {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* History row: 直播 button had width:87px + margin-left:74px → overflow */
.hisItem {
  display: flex !important;
  align-items: center !important;
  overflow: hidden !important;
}
.hisPlay {
  width: auto !important;
  max-width: 22% !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;
  overflow: hidden !important;
}
.hisPlay .button-primary,
.button-primary {
  width: 100% !important;
  max-width: 87px !important;
  margin-left: auto !important;
  margin-right: 4px !important;
  box-sizing: border-box !important;
}

/* Pagination */
.macaujc-pagination {
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  overflow: hidden !important;
  padding: 0.12rem 0.04rem !important;
  box-sizing: border-box !important;
}
.macaujc-pagination .items {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 100% !important;
  gap: 4px;
}
.macaujc-pagination .item,
.macaujc-pagination .prev,
.macaujc-pagination .next {
  min-width: 28px !important;
  width: auto !important;
  height: 28px !important;
  line-height: 26px !important;
  margin: 0 !important;
  font-size: 12px !important;
  padding: 0 6px !important;
  box-sizing: border-box !important;
}

#canvas {
  max-width: 100% !important;
  width: 100% !important;
  left: 0 !important;
  right: 0 !important;
}

footer {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

.countdown,
.countdown-item {
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.countdown {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  overflow: hidden !important;
}

/* Homepage guide list (passthrough; not jump) */
.home-guides {
  margin: 16px 10px 20px;
  padding: 14px 14px 16px;
  background: #fff;
  border: 1px solid #ddd;
  box-sizing: border-box;
  width: calc(100% - 20px);
  max-width: 100%;
}
.home-guides h2 {
  margin: 0 0 8px;
  font-size: 16px !important;
  color: #1a3d96;
  line-height: 1.35;
}
.home-guides > p {
  margin: 0 0 10px;
  font-size: 13px !important;
  color: #555;
  line-height: 1.55;
}
.home-guides ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 6px 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.home-guides a {
  font-size: 13px !important;
  color: #1a3d96;
  text-decoration: none;
}
.home-guides a:hover {
  text-decoration: underline;
}
.home-guides .more-guides {
  margin: 12px 0 0;
  font-weight: 700;
  font-size: 13px !important;
}

/* Frequency tabs + lottery chrome: keep inside 1164, wrap instead of crop */
.frequency-box {
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  flex-wrap: wrap !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}
.frequency-item {
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.lotteryTitle {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
  overflow: visible !important;
}
.lotteryTitle-l,
.lotteryTitle-r {
  max-width: 100% !important;
  white-space: normal !important;
  overflow: visible !important;
}