/* ==========================================================================
   8xbet - Trang chu
   Style chinh (chuyen tu WordPress/Flatsome sang HTML tinh)
   ========================================================================== */

/* ---------- 1. Fonts ---------- */
@font-face {
  font-family: 'Lexend Deca';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/lexenddeca/v25/K2FifZFYk-dHSE0UPPuwQ7CrD94i-NCKm-U48M1wpBnDmLM.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
    U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
    U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Lexend Deca';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/lexenddeca/v25/K2FifZFYk-dHSE0UPPuwQ7CrD94i-NCKm-U48M1wqxnD.woff2) format('woff2');
}

/* ---------- 2. Bien mau ---------- */
:root {
  --primary-color: #1056bc;
  --link-color: #1264d4;
  --link-color-hover: #0d3f8a;
  --nav-link-color: #1e73be;
  --section-blue: #5199df;
  --body-text: #3a4654;
  --heading-color: #10243d;
  --border-light: #e3e8ef;

  /* Footer toi de noi bat tren nen anh */
  --footer-bg: #10243d;
  --footer-bg-deep: #0a1828;
  --footer-text: rgba(255, 255, 255, .78);
  --footer-heading: #57ebfc;
  --footer-border: rgba(255, 255, 255, .14);
  --btn-gradient: linear-gradient(to bottom, #1056bc 50%, #57ebfc);
  --container-width: 1050px;
  --site-width: 1170px;
}

/* ---------- 3. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  background-color: #5b5b5b;
  background-image: url('../images/bg-8xbet.webp');
  background-size: cover;
  background-attachment: fixed;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0 auto;
  max-width: var(--site-width);
  background-color: transparent;
  font-family: 'Lexend Deca', Lato, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--body-text);
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; border: 0; vertical-align: middle; }
a { color: var(--primary-color); text-decoration: none; transition: color .25s, opacity .25s; }
a:hover { color: var(--link-color-hover); }
ul, ol { padding-left: 1.3em; }
p { margin: 0 0 1em; }

h1, h2, h3, h4, h5, h6 {
  color: var(--heading-color);
  font-family: 'Lexend Deca', Lato, sans-serif;
  font-weight: 700;
  margin: 0 0 .5em;
  line-height: 1.3;
}
h1 { font-size: 1.7rem; }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.125rem; }
h5 { font-size: 1rem; }

/* ---------- 4. Layout: container / row / col ---------- */
.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding-left: 15px;
  padding-right: 15px;
  width: 100%;
}

.row {
  max-width: var(--container-width);
  margin: 0 auto;
  display: flex;
  flex-flow: row wrap;
  width: 100%;
}

.col {
  position: relative;
  width: 100%;
  padding: 0 15px 30px;
  margin: 0;
}
.col-inner { position: relative; width: 100%; }

.large-3  { flex-basis: 25%;    max-width: 25%; }
.large-4  { flex-basis: 33.33%; max-width: 33.33%; }
.large-12 { flex-basis: 100%;   max-width: 100%; }

.flex-row {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.flex-col { max-height: 100%; }
.flex-grow { flex: 1; }
.flex-left { margin-right: auto; }
.flex-right { margin-left: auto; }
.flex-center { margin: 0 auto; }

.section { position: relative; width: 100%; }
.section-content { position: relative; }
.relative { position: relative; }
.text-center { text-align: center; }

/* ---------- 5. Header ---------- */
#header { position: relative; z-index: 30; }
.header-wrapper { position: relative; width: 100%; }

.header-main { height: 90px; background-color: transparent; }
.header-inner { height: 100%; }

#logo { width: 200px; flex: 0 0 auto; margin-right: 20px; }
#logo a { display: block; }
#logo img { max-height: 90px; width: auto; display: block; }

.header-nav {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.header-nav > li { position: relative; margin: 0; }

/* Nut Dang ky / Dang nhap */
/* Khung vien chay tran ra 10px moi ben, nen khoang cach thuc te
   phai cong them 20px thi hai nut moi troi ra ro rang.
   Dung do uu tien cao hon ".header-nav > li { margin: 0 }". */
.header-nav > li.header-button-1,
.header-nav > li.header-button-2 { margin: 0; }
.header-nav > li.header-button-1 + li.header-button-2,
.header-bottom-nav > li.header-button-1 + li.header-button-2 { margin-left: 44px; }

.header-button { position: relative; display: inline-block; }

.header-button a.button {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: var(--btn-gradient);
  height: 33px;
  width: 170px;
  border-radius: 99px;
  font-size: .85em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  line-height: 1;
  margin: 0;
  border: 0;
  cursor: pointer;
  text-align: center;
}
.header-button a.button:hover { color: #fff; opacity: .92; }

/* Vien chay quanh nut */
.header-button::before,
.header-button::after {
  content: "";
  position: absolute;
  top: -5px; left: -10px; right: -10px; bottom: -5px;
  border: 3px solid #0d7de7;
  border-radius: 1px;
  transition: all .5s;
  animation: clippath 3s infinite linear;
  pointer-events: none;
}
.header-button::after { animation-delay: -1.5s; }

@keyframes clippath {
  0%, 100% { clip-path: inset(0 0 98% 0); }
  25%      { clip-path: inset(0 98% 0 0); }
  50%      { clip-path: inset(98% 0 0 0); }
  75%      { clip-path: inset(0 0 0 98%); }
}

.header-divider { margin-left: 12px; }
.top-divider {
  margin-bottom: -1px;
  border-top: 1px solid currentColor;
  opacity: .1;
}

/* Thanh menu chinh */
.header-bottom {
  background-color: #f1f1f1;
  min-height: 58px;
  position: relative;
  z-index: 10;
}
.header-bottom .flex-row { min-height: 58px; }

.header-bottom-nav {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.header-bottom-nav > li > a {
  display: block;
  color: var(--nav-link-color);
  font-family: 'Lexend Deca', Lato, sans-serif;
  font-size: .95em;
  font-weight: 700;
  /* Giu nguyen kieu chu trong HTML: chu dau viet hoa, con lai viet thuong */
  text-transform: none;
  line-height: 29px;
  padding: 10px 12px;
  white-space: nowrap;
}
.header-bottom-nav > li > a:hover,
.header-bottom-nav > li.active > a { color: #111; }

/* Thanh nut Dang ky / Dang nhap dinh tren dien thoai khi cuon */
.wide-nav-spacer { display: none; }

@media (max-width: 849px) {
  .wide-nav-spacer.is-active { display: block; }

  /* Khong dung animation dich chuyen: neu trinh duyet khong chay animation
     (tab nen, tiet kiem pin) thanh se ket o ngoai man hinh. Chi fade nhe. */
  #wide-nav.is-stuck {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    max-width: var(--site-width);
    z-index: 60;
    box-shadow: 0 3px 16px rgba(0, 0, 0, .38);
    transition: box-shadow .25s ease;
  }
  /* Nut gon hon khi thanh da dinh */
  #wide-nav.is-stuck .header-bottom-nav.mobile-nav { padding: 7px 0; }
  #wide-nav.is-stuck .header-button a.button { height: 34px; }
}

/* ---------- 6. Slider banner ---------- */
.slider-wrapper { position: relative; overflow: hidden; }
.slider { position: relative; width: 100%; display: block; }

.slider .slide { display: none; width: 100%; }
.slider .slide.is-selected { display: block; }
.slider .slide img { width: 100%; display: block; }

.slider-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .8);
  background: rgba(0, 0, 0, .18);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  opacity: 0;
  transition: opacity .3s, background .3s;
}
.slider-wrapper:hover .slider-nav-btn { opacity: 1; }
.slider-nav-btn:hover { background: rgba(0, 0, 0, .4); }
.slider-nav-btn.prev { left: 18px; }
.slider-nav-btn.next { right: 18px; }
.slider-nav-btn svg { width: 16px; height: 16px; fill: currentColor; }

.slider-dots {
  position: absolute;
  bottom: 12px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 8px;
  z-index: 5;
}
.slider-dots button {
  width: 10px; height: 10px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid #fff;
  background: transparent;
  cursor: pointer;
}
.slider-dots button.is-selected { background: #fff; }

/* ---------- 7. Luoi sanh game ---------- */

/* Dai nen toi dat duoi 7 o sanh game */
.games-section {
  background:
    linear-gradient(180deg, rgba(14, 33, 55, .92) 0%, rgba(9, 21, 36, .96) 100%);
  border-top: 3px solid var(--section-blue);
  border-bottom: 3px solid var(--section-blue);
  padding: 26px 0 10px;
}

.game-grid { justify-content: center; }
.game-grid .col { padding: 0 10px 18px; }
.game-grid .img { width: 100%; }

/* 3 o dau hang tren, 4 o con lai hang duoi */
.game-grid .col                { flex-basis: 33.333%; max-width: 33.333%; }
.game-grid .col:nth-child(n+4) { flex-basis: 25%;     max-width: 25%; }

.game-grid .img-inner {
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .32);
  transition: transform .3s, box-shadow .3s, border-color .3s;
}
.game-grid .has-hover:hover .img-inner {
  transform: translateY(-4px);
  box-shadow: 0 9px 24px rgba(0, 0, 0, .48);
  border-color: rgba(87, 235, 252, .6);
}

/* Giu moi o game cung ty le 16:9 du anh nguon khac kich thuoc */
.game-grid .img-inner img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  width: 100%;
  height: auto;
  display: block;
}

.img-inner {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}
.img-inner img {
  width: 100%;
  display: block;
  transition: transform .5s, filter .5s;
}
.has-hover:hover .img-inner img { transform: scale(1.06); }

/* ---------- 8. Khoi noi dung chinh ---------- */
#section-content {
  padding-top: 30px;
  padding-bottom: 30px;
  background-color: var(--section-blue);
}

.body-content-data .col { padding-bottom: 30px; }

/* The noi dung mau trang tren nen xanh -> tang do tuong phan */
.home_content {
  width: 100%;
  background: #fff;
  color: var(--body-text);
  border-radius: 8px;
  padding: 34px 38px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .16);
}
.home_content h1 {
  font-size: 1.75rem;
  text-align: center;
  color: var(--heading-color);
  margin-bottom: .7em;
  padding-bottom: .5em;
  border-bottom: 3px solid var(--section-blue);
}
.home_content h2 {
  font-size: 1.42rem;
  color: var(--heading-color);
  margin-top: 1.5em;
  padding-left: 12px;
  border-left: 5px solid var(--primary-color);
  line-height: 1.35;
}
.home_content h3 {
  font-size: 1.14rem;
  color: #14406f;
  margin-top: 1.3em;
}
.home_content p  { margin-bottom: 1em; line-height: 1.75; }
.home_content a  { color: var(--link-color); font-weight: 600; }
.home_content a:hover { color: var(--link-color-hover); text-decoration: underline; }
.home_content strong, .home_content b { color: #16324f; }
/* strong/b nam trong link phai lay mau cua link, khong lay mau chu dam */
.home_content a strong,
.home_content a b,
.home_content a em,
.home_content a i { color: inherit; }

.home_content ul { margin: 0 0 1.3em; padding-left: 1.3em; }
.home_content ul li { margin-bottom: .6em; line-height: 1.7; }
.home_content ul li::marker { color: var(--primary-color); }

/* Bang */
.home_content table {
  width: 100%;
  margin-bottom: 1.4em;
  border-collapse: collapse;
  font-size: .96em;
  background: #fff;
}
.home_content table td {
  padding: 11px 14px;
  border: 1px solid var(--border-light);
  vertical-align: top;
  color: var(--body-text);
  line-height: 1.6;
}
.home_content table tr:first-child td {
  font-weight: 700;
  color: #fff;
  background: var(--primary-color);
  border-color: var(--primary-color);
}
.home_content table tr:nth-child(even):not(:first-child) td { background: #f5f8fc; }
.home_content table tr:hover:not(:first-child) td { background: #eaf2fd; }

.home_content figure img { box-shadow: 0 3px 12px rgba(0, 0, 0, .12); }
.home_content .wp-caption-text { color: #6b7684; }

/* Anh co chu thich */
.wp-caption {
  max-width: 100%;
  margin: 0 auto 1.5em;
  padding: 0;
}
.wp-caption.aligncenter { text-align: center; }
.wp-caption img { display: block; margin: 0 auto; border-radius: 4px; }
.wp-caption-text {
  color: var(--body-text);
  font-size: .9em;
  font-style: italic;
  text-align: center;
  padding: 6px 0;
  margin: 0;
}

/* Breadcrumb tren cac trang con */
.breadcrumb {
  font-size: .88em;
  color: rgba(255, 255, 255, .85);
  margin: 0 0 14px;
  padding: 0 2px;
}
.breadcrumb a { color: #fff; font-weight: 600; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb .sep { margin: 0 7px; opacity: .6; }
.breadcrumb [aria-current="page"] { color: rgba(255, 255, 255, .8); }

/* Khoi lien ket noi bo cuoi bai */
.related-links {
  margin: 2.2em 0 0;
  padding: 20px 24px;
  background: #eef5ff;
  border: 1px solid #cfe0f7;
  border-radius: 8px;
}
.related-links .related-title {
  font-weight: 700;
  color: var(--heading-color);
  text-transform: uppercase;
  font-size: .95em;
  letter-spacing: .02em;
  margin-bottom: .7em;
}
.related-links ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
}
.related-links li { margin: 0; }
.related-links a {
  display: inline-block;
  padding: 7px 14px;
  background: #fff;
  border: 1px solid #cfe0f7;
  border-radius: 99px;
  color: var(--primary-color);
  font-size: .92em;
  font-weight: 600;
  transition: background .25s, color .25s, border-color .25s;
}
.related-links a:hover {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: #fff;
  text-decoration: none;
}

/* Hop luu y / choi co trach nhiem */
.notice-box {
  background: #eef5ff;
  border: 1px solid #cfe0f7;
  border-left: 5px solid var(--primary-color);
  border-radius: 6px;
  padding: 16px 20px;
  margin: 0 0 1.8em;
}
.notice-box .notice-title {
  font-weight: 700;
  color: var(--heading-color);
  text-transform: uppercase;
  font-size: .95em;
  letter-spacing: .02em;
  margin-bottom: .5em;
}
.notice-box p { margin-bottom: .7em; }
.notice-box p:last-child { margin-bottom: 0; }

/* Khoi cac buoc: Buoc 1 / Buoc 2 / Buoc 3 */
.step-block {
  margin: 0 0 1.8em;
  background: #f5f8fc;
  border: 1px solid var(--border-light);
  border-radius: 6px;
  padding: 6px 18px;
}
.step-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid var(--border-light);
}
.step-item:last-child { border-bottom: 0; }
.step-num {
  flex: 0 0 auto;
  display: inline-block;
  min-width: 74px;
  text-align: center;
  background: var(--primary-color);
  color: #fff;
  font-weight: 700;
  font-size: .82em;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: 5px 10px;
  border-radius: 99px;
  margin-top: 2px;
}
.step-item p { margin: 0; }

@media (max-width: 549px) {
  .step-item { flex-direction: column; gap: 6px; }
  .step-num { min-width: 0; }
}

/* ---------- 9. Tieu de khu vuc ---------- */
.section-title-container { margin-bottom: 1.5em; }

.section-title {
  display: flex;
  align-items: center;
  margin: 0 0 10px;
  padding: 0;
  font-size: 1em;
}
.section-title-normal { border-bottom: 2px solid rgba(255, 255, 255, .35); }
.section-title-normal .section-title-main {
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 0 0 7.5px;
  border-bottom: 3px solid #fff;
  margin-bottom: -2px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .18);
}
.section-title-center { justify-content: center; text-align: center; }
.section-title-center .section-title-main {
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 0;
}

/* ---------- 10. Bai viet moi nhat ---------- */
.blog-slider-wrapper { position: relative; }

.post-row {
  display: flex;
  flex-flow: row wrap;
  margin: 0 auto;
  max-width: var(--container-width);
}
.post-item {
  flex-basis: 33.333%;
  max-width: 33.333%;
  padding: 0 15px 30px;
}

.box-blog-post {
  position: relative;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  height: 100%;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .16);
  transition: transform .3s, box-shadow .3s;
}
.box-blog-post:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .24);
}

.box-image { position: relative; overflow: hidden; border-radius: 0; }
.image-cover {
  position: relative;
  padding-top: 56.25%;
  overflow: hidden;
}
.image-cover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s;
}
.box-blog-post:hover .image-cover img { transform: scale(1.06); }

.box-text { padding: 16px 16px 22px; }
.post-title { margin: 0 0 .2em; font-size: 1.02rem; line-height: 1.4; }
.post-title a { color: var(--heading-color); }
.post-title a:hover { color: var(--primary-color); }

.is-divider {
  height: 2px;
  width: 30px;
  background-color: rgba(0, 0, 0, .1);
  margin: 7px auto;
  display: block;
}

.from_the_blog_excerpt {
  color: var(--body-text);
  font-size: .9em;
  line-height: 1.6;
  margin: 0;
}

.post-date.badge {
  position: absolute;
  top: 22px;
  left: 0;
  width: 45px;
  height: 45px;
  z-index: 2;
}
.badge-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: #fff;
  border: 2px solid var(--primary-color);
  color: var(--primary-color);
  line-height: 1;
}
.post-date-day { font-size: 16px; font-weight: 700; line-height: 1; }
.post-date-month { font-size: .7rem; line-height: 1.2; }

/* ---------- 11. Footer ---------- */
#footer {
  position: relative;
  background: var(--footer-bg);
  color: var(--footer-text);
  border-top: 4px solid var(--section-blue);
}

.footer-providers { width: 100%; background: #fff; }
.footer-providers img { width: 100%; display: block; }

.footer-widgets {
  padding-top: 36px;
  max-width: var(--container-width);
}
.footer-widgets .col { padding-bottom: 30px; }

#footer p, #footer li {
  font-size: .96em;
  line-height: 1.75;
  color: var(--footer-text);
}
#footer a { color: var(--footer-text); }
#footer a:hover { color: var(--footer-heading); }
#footer strong { color: #fff; }

#footer .footer-about p { margin-top: 1.1em; }
#footer .footer-about strong a { color: var(--footer-heading); }
/* Logo mau xanh tren nen navy toi -> dat tren mang trang cho ro net */
#footer .footer-about .img-inner {
  background: #fff;
  border-radius: 8px;
  padding: 14px 18px;
  max-width: 240px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
}
#footer .footer-about .img-inner img { display: block; width: 100%; height: auto; }

/* Tieu de cot trong footer */
#footer .section-title-center { border-bottom: 1px solid var(--footer-border); padding-bottom: 8px; }
#footer .section-title-center .section-title-main { color: var(--footer-heading) !important; }

/* Menu dang cot trong footer */
.ux-menu { display: flex; flex-direction: column; }
.ux-menu-link { display: flex; }

/* Nhan tieng Viet dai -> cho xuong dong, khong cat chu */
.ux-menu-link__text {
  white-space: normal;
  line-height: 1.35;
}
.ux-menu-link__link { align-items: flex-start; }
.ux-menu-link__icon { margin-top: 3px; }
.ux-menu-link__link {
  display: flex;
  align-items: center;
  width: 100%;
  color: var(--footer-text);
  padding: 8px 0;
  border-bottom: 1px solid var(--footer-border);
  font-size: .96em;
  transition: color .25s, padding-left .25s;
}
.ux-menu-link__link:hover {
  color: var(--footer-heading);
  padding-left: 5px;
}
.ux-menu-link__icon {
  width: 16px;
  flex: 0 0 16px;
  text-align: center;
  margin-right: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ux-menu-link__icon svg { width: 10px; height: 10px; fill: currentColor; }

.footer-contact ul { list-style: disc; padding-left: 1.2em; margin: 0; }
.footer-contact ul li { margin-bottom: .45em; }
.footer-contact ul li::marker { color: var(--footer-heading); }

/* 3 cot footer: gioi thieu | trang thong tin | lien he */
.footer-widgets > .col { display: flex; }
.footer-widgets > .col > .col-inner { width: 100%; }

@media (min-width: 850px) {
  /* Vach ngan nhe giua cac cot */
  .footer-widgets .footer-pages,
  .footer-widgets .footer-contact { padding-left: 26px; }
  .footer-widgets .footer-pages { border-left: 1px solid var(--footer-border); }
  .footer-widgets .footer-contact { border-left: 1px solid var(--footer-border); }
}

.footer-hotsearch {
  padding: 18px 15px;
  margin-bottom: 6px;
  border-top: 1px solid var(--footer-border);
  font-size: .88em;
  line-height: 1.8;
}
.footer-hotsearch p { margin: 0; color: rgba(255, 255, 255, .6); }
.footer-hotsearch strong { color: rgba(255, 255, 255, .82); font-weight: 400; }

.absolute-footer {
  background-color: var(--footer-bg-deep);
  color: rgba(255, 255, 255, .55);
  font-size: .9em;
  padding: 16px 0;
}
.absolute-footer .container { display: flex; align-items: center; }
.absolute-footer strong { color: rgba(255, 255, 255, .8); font-weight: 700; }

/* Nut len dau trang */
#top-link {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .6);
  background: rgba(0, 0, 0, .35);
  color: #fff;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 40;
  cursor: pointer;
}
#top-link.is-visible { display: flex; }
#top-link:hover { background: rgba(0, 0, 0, .6); color: #fff; }
#top-link svg { width: 14px; height: 14px; fill: currentColor; }

/* ---------- 11b. Banner khuyen mai (dong / mo lai duoc) ---------- */

/* Khung hoan toan trong suot: chi thay hinh banner, khong co hop nen */
.promo-banner {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  z-index: 70;
  background: transparent;
  padding: 0 0 8px;
  line-height: 0;
  max-width: 100%;
  transition: opacity .25s ease, transform .25s ease;
}
.promo-banner[hidden] { display: none; }

.promo-banner__link {
  display: block;
  line-height: 0;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .35);
}
.promo-banner__link img {
  display: block;
  width: 728px;
  max-width: calc(100vw - 24px);
  height: auto;
}

/* Nut dong: nam de len goc phai tren cua banner */
.promo-banner__close {
  position: absolute;
  top: -9px;
  right: -9px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: #10243d;
  color: #fff;
  font-size: 15px;
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .4);
  transition: background .2s, transform .2s;
}
.promo-banner__close:hover { background: #d02a2a; transform: scale(1.08); }
.promo-banner__close:focus-visible { outline: 2px solid #57ebfc; outline-offset: 2px; }

/* Tab nho de mo lai banner sau khi da dong */
.promo-reopen {
  position: fixed;
  left: 14px;
  bottom: 14px;
  z-index: 70;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 15px;
  border: 0;
  border-radius: 99px;
  background: var(--btn-gradient);
  color: #fff;
  font-family: inherit;
  font-size: .82em;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 3px 14px rgba(0, 0, 0, .4);
  transition: transform .2s, box-shadow .2s;
}
.promo-reopen[hidden] { display: none; }
.promo-reopen:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0, 0, 0, .5); }
.promo-reopen:focus-visible { outline: 2px solid #57ebfc; outline-offset: 2px; }
.promo-reopen svg { width: 14px; height: 14px; fill: currentColor; }

/* Khi banner dang hien: day nut "len dau trang" len de khong bi che */
body.has-promo-banner #top-link { bottom: 104px; }

@media (max-width: 549px) {
  .promo-banner { padding-bottom: 6px; }
  .promo-banner__close { top: -8px; right: -6px; width: 24px; height: 24px; font-size: 14px; }
  .promo-reopen { left: 10px; bottom: 10px; padding: 8px 13px; font-size: .78em; }
  body.has-promo-banner #top-link { bottom: 78px; }
}

@media (prefers-reduced-motion: reduce) {
  .promo-banner, .promo-reopen, .promo-banner__close { transition: none; }
}

/* ---------- 12. Menu mobile ---------- */
.mobile-nav { display: none; margin: 0; padding: 0; list-style: none; }

.nav-icon a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: #1e73be;
}
.nav-icon svg { width: 22px; height: 22px; fill: currentColor; }

.mobile-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 300px;
  max-width: 85%;
  height: 100%;
  background: #fff;
  z-index: 100;
  transform: translateX(-100%);
  transition: transform .3s ease;
  overflow-y: auto;
  box-shadow: 2px 0 12px rgba(0, 0, 0, .2);
}
.mobile-sidebar.is-open { transform: translateX(0); }

.sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .6);
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s, visibility .3s;
}
.sidebar-overlay.is-open { opacity: 1; visibility: visible; }

.nav-sidebar { list-style: none; margin: 0; padding: 0; }
.nav-sidebar > li { border-bottom: 1px solid var(--border-light); }
.nav-sidebar > li > a {
  display: block;
  padding: 12px 20px;
  color: #333;
  font-weight: 700;
  /* Dong bo voi menu tren cung: khong chuyen thanh chu hoa */
  text-transform: none;
  font-size: .95em;
}
.nav-sidebar > li > a:hover { color: var(--nav-link-color); }

.sidebar-search { padding: 15px 20px; border-bottom: 1px solid var(--border-light); }
.searchform { display: flex; }
.search-field {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid #ddd;
  border-radius: 4px 0 0 4px;
  font-family: inherit;
  font-size: .9em;
}
.ux-search-submit {
  background: var(--primary-color);
  border: 0;
  color: #fff;
  padding: 0 14px;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.ux-search-submit svg { width: 15px; height: 15px; fill: currentColor; }

.social-icons { display: flex; gap: 6px; padding: 15px 20px; }
.social-icons a {
  width: 34px; height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #555;
  border-radius: 50%;
}
.social-icons a:hover { background: var(--border-light); color: var(--nav-link-color); }
.social-icons svg { width: 16px; height: 16px; fill: currentColor; }

/* ---------- 13. Tien ich ---------- */
/* Giu ten thuong hieu 8xbet luon viet thuong, khong bi CSS chuyen hoa */
.brand-lower { text-transform: none !important; }

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  border: 0;
}
.hide-for-medium { display: block; }
.show-for-medium { display: none; }

/* ---------- 14. Responsive ---------- */
@media (max-width: 849px) {
  .hide-for-medium { display: none !important; }
  .show-for-medium { display: block !important; }
  .mobile-nav { display: flex; align-items: center; }

  /* Logo tren dien thoai: chua chieu cao thanh header de co khoang tho */
  #logo { width: auto; margin: 0 auto; text-align: center; }
  #logo img { max-height: 58px; width: auto; }
  .header-main { height: 90px; }
  .header-inner { justify-content: space-between; }

  .header-bottom .flex-col { width: 100%; }
  /* gap 0: khoang cach do margin-left cua nut thu hai quyet dinh */
  .header-bottom-nav.mobile-nav { justify-content: center; gap: 0; padding: 10px 0; }
  .header-divider { display: none; }
  .header-button a.button { width: 140px; height: 30px; font-size: .78em; }

  .large-4, .large-3 { flex-basis: 50%; max-width: 50%; }
  .post-item { flex-basis: 50%; max-width: 50%; }

  /* Luoi game giu nguyen 3 + 4 tren tablet, chi thu nho lai */
  .games-section { padding: 20px 0 6px; }
  .game-grid .col { padding: 0 7px 14px; }
}

@media (max-width: 549px) {
  .header-main { height: 70px; }
  #logo img { max-height: 50px; }

  .large-4 { flex-basis: 100%; max-width: 100%; }
  .large-3 { flex-basis: 50%;  max-width: 50%; }
  .post-item { flex-basis: 100%; max-width: 100%; }

  /* Dien thoai: ca 7 o cung kich thuoc, 2 cot, o le tu can giua */
  .games-section {
    padding: 16px 0 4px;
    border-top-width: 2px;
    border-bottom-width: 2px;
  }
  .game-grid { padding: 0 6px; }
  .game-grid .col,
  .game-grid .col:nth-child(n+4) { flex-basis: 50%; max-width: 50%; }
  .game-grid .col { padding: 0 5px 10px; }
  .game-grid .img-inner { border-radius: 6px; }

  .ux-menu--two-col { grid-template-columns: 1fr; column-gap: 0; }

  .home_content { padding: 20px 16px; border-radius: 6px; }
  .home_content h1 { font-size: 1.3rem; }
  .home_content h2 { font-size: 1.18rem; padding-left: 9px; border-left-width: 4px; }
  .home_content h3 { font-size: 1.06rem; }
  .home_content table td { padding: 9px 10px; }

  /* Bang cuon ngang tren man nho */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .home_content table { min-width: 480px; }

  .header-button a.button { width: 130px; }
  .absolute-footer .container { justify-content: center; text-align: center; }
}