/* Giao dien "Tap truyen" cua Ngoc Rong Royal.
   Mau lay tu vo phuc cua Goku: than ao cam, dai xanh, muc den in tren giay trang.
   Anh hero in mot mau muc tren nen cam, de logo la thu duy nhat co du mau.
   Khung truyen khong do bong: tach nhau bang vien muc va khe trang giua cac khung. */

:root {
  --muc: #000;
  --giay: #fff;
  --ao: #FF7A00;
  --ao-nhat: #FFB366;
  --dai: #1B3FD1;
  --dai-dam: #142FA0;
  --sao: #D9141C;
  --ki: #FFE11A;
  --ngoc: #0B8A5A;
  --chu-phu: #474D63;
  --ke: #D5D8E3;
  --chu-to: "Dela Gothic One", "Be Vietnam Pro", sans-serif;
  --chu: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cao-thanh: 76px;
}

/* ---------- Nen ---------- */
html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 16px;
}

body#cssweb {
  min-height: 100vh;
  margin: 0;
  background: var(--ao);
  color: var(--muc);
  font-family: var(--chu);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.65;
}

body#cssweb::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle, rgba(0, 0, 0, .2) 1.5px, transparent 2px) 0 0 / 9px 9px;
  -webkit-mask-image: linear-gradient(160deg, #000, transparent 46%);
  mask-image: linear-gradient(160deg, #000, transparent 46%);
  pointer-events: none;
}

a,
button,
summary {
  -webkit-tap-highlight-color: rgba(255, 225, 26, .4);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--ki);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--muc);
}

.tr-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.tr-ball {
  display: block;
  flex: none;
  width: 36px;
  height: 36px;
}

/* ---------- Khung trang ---------- */
.tr-shell {
  min-height: 100vh;
  padding-bottom: calc(var(--cao-thanh) + 18px + env(safe-area-inset-bottom));
}

.tr-main {
  display: block;
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 10px 10px 0;
}

/* ---------- Thanh tren dien thoai, cot gay truyen tren may tinh ---------- */
.tr-rail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-bottom: 4px solid var(--muc);
  background: var(--dai);
  color: #fff;
}

/* Trang chu chua dang nhap tren dien thoai: logo da nam trong hero, khong can thanh tren */
.tr-rail--trong {
  padding: 0;
  border: 0;
}

@media (max-width: 1023px) {
  .tr-rail .tr-brand--chu {
    display: none;
  }

  .tr-rail:has(.tr-brand--chu) {
    justify-content: flex-end;
  }
}

.tr-brand {
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-family: var(--chu-to);
  font-size: 15px;
  line-height: 1.15;
  text-decoration: none;
}

.tr-brand:hover,
.tr-brand:focus {
  color: var(--ki);
}

.tr-brand img {
  display: block;
  width: 84px;
  height: auto;
  -webkit-user-drag: none;
}

/* ---------- Tai khoan ---------- */
.tr-user {
  position: relative;
  min-width: 0;
}

.tr-user > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 2px 6px;
  list-style: none;
  cursor: pointer;
}

.tr-user > summary::-webkit-details-marker {
  display: none;
}

.tr-user > summary::after {
  content: "";
  flex: none;
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-top-color: #fff;
  transform: translateY(3px);
}

.tr-user[open] > summary::after {
  transform: translateY(-2px) rotate(180deg);
}

.tr-user__avatar {
  flex: none;
  width: 36px;
  height: 36px;
  border: 2px solid var(--muc);
  border-radius: 50%;
  background: #fff;
  object-fit: contain;
}

.tr-user__chu {
  min-width: 0;
  line-height: 1.25;
}

.tr-user__ten {
  display: block;
  overflow: hidden;
  color: var(--ki);
  font-size: 14px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tr-user__tien {
  display: block;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tr-user__menu {
  position: absolute;
  z-index: 1040;
  top: 100%;
  right: 0;
  display: grid;
  min-width: 190px;
  margin-top: 6px;
  border: 3px solid var(--muc);
  background: var(--giay);
}

.tr-user__menu a {
  padding: 11px 14px;
  color: var(--muc);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.tr-user__menu a + a {
  border-top: 2px solid var(--muc);
}

.tr-user__menu a:hover,
.tr-user__menu a:focus {
  background: var(--ki);
  color: var(--muc);
}

/* ---------- Bay vien ngoc: dieu huong chinh ---------- */
.tr-nav {
  position: fixed;
  z-index: 1030;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: end;
  height: calc(var(--cao-thanh) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  border-top: 4px solid var(--muc);
  background: var(--dai);
}

.tr-nav__muc {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  height: 100%;
  padding: 5px 1px 6px;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.12;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.tr-nav__muc .tr-ball {
  width: 30px;
  height: 30px;
}

.tr-nav__muc:hover,
.tr-nav__muc:focus {
  color: var(--ki);
}

.tr-nav__muc[aria-current="page"] {
  background: var(--dai-dam);
  color: var(--ki);
  box-shadow: inset 0 -4px 0 var(--ki);
}

/* Vien 4 sao: nut Tai game nam giua, nho len khoi thanh */
.tr-nav__muc--tam .tr-ball {
  width: 56px;
  height: 56px;
  margin-top: -30px;
}

.tr-nhan-bt {
  position: absolute;
  top: -6px;
  left: 50%;
  padding: 0 5px;
  border: 2px solid var(--muc);
  background: var(--sao);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 15px;
  white-space: nowrap;
  transform: translateX(-50%);
}

.tr-nav__muc--tam .tr-nhan-bt {
  top: -34px;
}

/* Thanh duoi cua dien thoai chat cho: cac vien nho chi hien cham do, trang dich se giai thich */
@media (max-width: 1023px) {
  .tr-nav__muc:not(.tr-nav__muc--tam) .tr-nhan-bt {
    top: 3px;
    left: calc(50% + 15px);
    width: 12px;
    height: 12px;
    padding: 0;
    overflow: hidden;
    border-radius: 50%;
    color: transparent;
    font-size: 0;
    transform: none;
  }
}

@media (max-width: 340px) {
  .tr-nav__muc {
    font-size: 10.5px;
    letter-spacing: -.01em;
  }

  .tr-nav__muc--tam .tr-ball {
    width: 50px;
    height: 50px;
    margin-top: -24px;
  }

  .tr-nav__muc--tam .tr-nhan-bt {
    top: -28px;
  }
}

@media (hover: hover) {
  .tr-nav__muc:hover .tr-ball {
    transform: rotate(-16deg) scale(1.08);
  }

  .tr-ball {
    transition: transform .16s ease-out;
  }
}

/* May tinh: duong dieu huong thanh cot gay truyen ben trai */
@media (min-width: 1024px) {
  .tr-shell {
    padding-bottom: 0;
    padding-left: 228px;
  }

  .tr-main {
    padding: 16px 16px 0;
  }

  .tr-rail,
  .tr-rail--trong {
    position: fixed;
    z-index: 1030;
    top: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    width: 228px;
    padding: 0;
    overflow-y: auto;
    border-right: 4px solid var(--muc);
    border-bottom: 0;
  }

  .tr-brand {
    justify-content: center;
    padding: 16px 12px;
    font-size: 22px;
    text-align: center;
  }

  .tr-brand img {
    width: 100%;
    max-width: 180px;
  }

  .tr-user {
    border-top: 3px solid var(--muc);
    border-bottom: 3px solid var(--muc);
    background: var(--dai-dam);
  }

  .tr-user > summary {
    padding: 8px 12px;
  }

  .tr-user__chu {
    flex: 1;
  }

  .tr-user__menu {
    position: static;
    margin: 0;
    border-width: 3px 0 0;
  }

  .tr-nav {
    position: static;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    height: auto;
    padding: 6px 0;
    border-top: 0;
  }

  .tr-nav__muc {
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    height: auto;
    min-height: 54px;
    padding: 8px 16px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
    text-align: left;
  }

  .tr-nav__muc br {
    display: none;
  }

  .tr-nav__muc .tr-ball {
    width: 38px;
    height: 38px;
  }

  .tr-nav__muc[aria-current="page"] {
    box-shadow: inset 6px 0 0 var(--ki);
  }

  .tr-nav__muc--tam {
    margin: 6px 0;
    border-top: 3px solid var(--muc);
    border-bottom: 3px solid var(--muc);
    background: var(--ao);
    color: var(--muc);
    font-family: var(--chu-to);
    font-weight: 400;
  }

  .tr-nav__muc--tam:hover,
  .tr-nav__muc--tam:focus {
    background: var(--ki);
    color: var(--muc);
  }

  .tr-nav__muc--tam .tr-ball {
    width: 42px;
    height: 42px;
    margin-top: 0;
  }

  .tr-nav__muc > span:first-of-type {
    white-space: nowrap;
  }

  .tr-nav .tr-nhan-bt,
  .tr-nav .tr-nav__muc--tam .tr-nhan-bt {
    position: static;
    margin-left: auto;
    font-family: var(--chu);
    font-weight: 700;
    transform: none;
  }

  .tr-nav__muc:has(.tr-nhan-bt) {
    gap: 8px;
    padding-right: 8px;
  }
}

/* ---------- To truyen chua noi dung ---------- */
.tr-page {
  padding: 16px;
  border: 4px solid var(--muc);
  background: var(--giay);
  color: var(--muc);
}

.tr-page--home {
  padding: 0;
  border: 0;
  background: transparent;
}

@media (max-width: 480px) {
  .tr-page:not(.tr-page--home) {
    padding: 12px 10px;
  }
}

.tr-page a:not(.btn):not(.tr-nut):not(.tr-the):not(.tr-link-den):not(.tr-no) {
  color: var(--dai);
  font-weight: 600;
}

.tr-page img {
  max-width: 100%;
}

/* ---------- Trang chu: khung lon ---------- */
.tr-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(540px, 84vh, 760px);
  padding: 10px 14px 14px;
  overflow: hidden;
  border: 4px solid var(--muc);
  background: var(--ao);
}

.tr-hero__anh {
  position: absolute;
  z-index: -3;
  inset: 0;
  mix-blend-mode: multiply;
}

.tr-hero__anh img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 14%;
}

/* Net tram va duong toc do cua truyen tranh, chua khoang giua cho nhan vat */
.tr-hero::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  background: repeating-conic-gradient(from 0deg at 50% 44%, #000 0 .9deg, transparent .9deg 5deg, #000 5deg 5.5deg, transparent 5.5deg 11deg);
  -webkit-mask-image: radial-gradient(ellipse 62% 66% at 50% 44%, transparent 72%, #000 100%);
  mask-image: radial-gradient(ellipse 62% 66% at 50% 44%, transparent 72%, #000 100%);
}

.tr-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: 0;
  bottom: 0;
  left: 0;
  height: 62%;
  background: radial-gradient(circle, rgba(0, 0, 0, .72) 1.9px, transparent 2.4px) 0 0 / 7px 7px;
  -webkit-mask-image: linear-gradient(0deg, #000 8%, transparent);
  mask-image: linear-gradient(0deg, #000 8%, transparent);
}

/* Logo nam trong luong trang va day phan chu xuong day, man hinh thap cung khong de len nhau */
.tr-hero__logo {
  align-self: center;
  width: min(80%, 400px);
  margin-bottom: auto;
  padding-bottom: 12px;
}

.tr-hero__logo img {
  display: block;
  width: 100%;
  height: auto;
  -webkit-user-drag: none;
}

.tr-loi {
  position: relative;
  align-self: flex-start;
  max-width: 19em;
  margin: 0 0 16px;
  text-wrap: balance;
  padding: 9px 16px;
  border: 3px solid var(--muc);
  border-radius: 50% / 46%;
  background: var(--giay);
  color: var(--muc);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
}

.tr-loi::after {
  content: "";
  position: absolute;
  bottom: -19px;
  left: 62%;
  width: 26px;
  height: 20px;
  background: var(--muc);
  clip-path: polygon(0 0, 100% 0, 78% 100%);
}

.tr-loi::before {
  content: "";
  position: absolute;
  z-index: 1;
  bottom: -12px;
  left: calc(62% + 5px);
  width: 16px;
  height: 13px;
  background: var(--giay);
  clip-path: polygon(0 0, 100% 0, 78% 100%);
}

.tr-page .tr-hero h1 {
  margin: 0 0 14px;
  color: #fff;
  font-family: var(--chu-to);
  font-size: clamp(30px, 8.4vw, 62px);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.14;
  -webkit-text-stroke: 7px #000;
  paint-order: stroke fill;
}

.tr-hero h1 span {
  display: block;
  text-wrap: balance;
}

.tr-hero__nut {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Nut chinh: hinh tia no trong truyen */
.tr-no {
  position: relative;
  display: inline-grid;
  place-items: center;
  min-width: 150px;
  min-height: 68px;
  padding: 14px 26px;
  background: var(--ki);
  color: var(--muc);
  font-family: var(--chu-to);
  font-size: 18px;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  clip-path: polygon(0 18%, 6% 30%, 8% 4%, 19% 22%, 25% 0, 35% 18%, 50% 3%, 58% 19%, 73% 0, 79% 22%, 92% 5%, 93% 30%, 100% 20%, 96% 50%, 100% 80%, 92% 72%, 91% 96%, 79% 79%, 72% 100%, 60% 82%, 49% 97%, 37% 82%, 25% 100%, 19% 79%, 8% 96%, 7% 71%, 0 82%, 4% 50%);
}

/* clip-path cat luon vien, nen vien nam o lop boc ngoai */
.tr-no-boc {
  position: relative;
  display: inline-block;
  filter: drop-shadow(3px 0 0 #000) drop-shadow(-3px 0 0 #000) drop-shadow(0 3px 0 #000) drop-shadow(0 -3px 0 #000);
}

.tr-no:hover,
.tr-no:focus {
  background: #fff;
  color: var(--muc);
}

.tr-no-boc .tr-nhan-bt {
  z-index: 2;
  top: -2px;
  left: 50%;
}

.tr-nut {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 10px 14px;
  border: 3px solid var(--muc);
  background: var(--giay);
  color: var(--muc);
  font-size: 15px;
  font-weight: 800;
  text-decoration: none;
}

.tr-nut:hover,
.tr-nut:focus {
  background: var(--dai);
  color: #fff;
}

@media (min-width: 720px) {
  .tr-hero {
    padding: 16px 24px 24px;
  }

  .tr-hero__logo {
    width: min(44%, 400px);
  }

  .tr-no {
    min-width: 190px;
    min-height: 72px;
    padding: 16px 34px;
    font-size: 20px;
  }

  .tr-nut {
    padding: 10px 24px;
    font-size: 16px;
  }
}

/* Mot nhip mo man duy nhat: logo dap xuong, khung thoai bat ra */
@media (prefers-reduced-motion: no-preference) {
  .tr-hero__logo {
    animation: tr-dap .46s cubic-bezier(.2, 1.5, .4, 1) both;
  }

  .tr-loi {
    animation: tr-bat .3s .34s cubic-bezier(.2, 1.7, .4, 1) both;
  }

  @keyframes tr-dap {
    from {
      opacity: 0;
      transform: scale(1.5) rotate(-4deg);
    }
  }

  @keyframes tr-bat {
    from {
      opacity: 0;
      transform: scale(.5);
    }
  }
}

/* ---------- Trang chu: cac khung duoi ---------- */
.tr-luoi {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin-top: 10px;
}

.tr-khung {
  min-width: 0;
  padding: 16px;
  border: 4px solid var(--muc);
  background: var(--giay);
}

.tr-khung > h2,
.tr-tua {
  margin: 0 0 12px;
  color: var(--muc);
  font-family: var(--chu-to);
  font-size: clamp(21px, 3vw, 28px);
  font-weight: 400;
  line-height: 1.2;
}

.tr-khung--muc {
  background: var(--muc);
  color: #fff;
}

.tr-page .tr-khung--muc > h2 {
  color: var(--ki);
}

.tr-buoc {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tr-buoc li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.tr-buoc .tr-ball {
  width: 50px;
  height: 50px;
}

.tr-buoc strong {
  display: block;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.3;
}

.tr-buoc p {
  margin: 0;
  color: var(--chu-phu);
}

.tr-top {
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}

.tr-top li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 2px solid #3A3A3A;
}

.tr-top__so {
  color: var(--ao);
  font-family: var(--chu-to);
  font-size: 22px;
  line-height: 1;
}

.tr-top__ten {
  overflow: hidden;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tr-top__sm {
  color: var(--ki);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.tr-top__trong {
  color: #fff;
}

.tr-link-den {
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.tr-link-den:hover,
.tr-link-den:focus {
  color: var(--ki);
}

/* The tin: ca the la mot lien ket */
.tr-the {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border: 4px solid var(--muc);
  background: var(--ki);
  color: var(--muc);
  text-decoration: none;
}

.tr-the:hover,
.tr-the:focus {
  background: #fff;
  color: var(--muc);
}

.tr-the img {
  flex: none;
  width: 54px;
  height: 54px;
  object-fit: contain;
}

.tr-the strong {
  display: block;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.3;
}

.tr-the span {
  font-size: 13px;
}

/* Chon hanh tinh */
.tr-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 0 6px 12px;
}

.tr-tab {
  min-height: 52px;
  padding: 6px 4px;
  border: 3px solid var(--muc);
  border-radius: 0;
  background: var(--giay);
  color: var(--muc);
  font-family: var(--chu-to);
  font-size: clamp(13px, 2.6vw, 18px);
  line-height: 1.15;
  cursor: pointer;
  transform: skewX(-8deg);
}

.tr-tab > span {
  display: block;
  transform: skewX(8deg);
}

.tr-tab:hover {
  background: var(--ki);
}

.tr-tab[aria-selected="true"] {
  background: var(--muc);
  color: var(--ki);
}

.tr-hanhtinh {
  display: grid;
  gap: 10px;
}

.tr-hanhtinh[hidden] {
  display: none;
}

.tr-hanhtinh__anh {
  display: block;
  width: 100%;
  height: auto;
  border: 3px solid var(--muc);
}

.tr-chieu > h3 {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 700;
}

.tr-chieu > h3 b {
  font-weight: 800;
}

.tr-chieu__cap {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.tr-chieu figure {
  margin: 0;
}

.tr-chieu img {
  display: block;
  width: 100%;
  height: auto;
  border: 3px solid var(--muc);
  image-rendering: pixelated;
}

.tr-chieu figcaption {
  padding-top: 3px;
  font-size: 13px;
  font-weight: 700;
}

@media (min-width: 720px) {
  .tr-luoi--ba {
    grid-template-columns: 7fr 5fr;
  }

  .tr-hanhtinh {
    grid-template-columns: 3fr 2fr;
    align-items: start;
  }

  }

/* ---------- Tieu de to truyen ---------- */
.tr-page h1,
.tr-page h2,
.tr-page h3,
.tr-page h4,
.tr-page h5,
.tr-page .h3,
.tr-page .h4 {
  color: var(--muc);
  letter-spacing: 0;
  text-shadow: none !important;
}

.tr-page .h3,
.tr-page .h4 {
  font-family: var(--chu-to);
  font-weight: 400 !important;
}

.tr-page .h3 {
  font-size: clamp(22px, 4vw, 30px);
  line-height: 1.2;
}

.tr-page .h4 {
  font-size: 19px;
}

.tr-page div.text-white,
.tr-page h1.text-white,
.tr-page h2.text-white,
.tr-page h3.text-white,
.tr-page h4.text-white,
.tr-page h5.text-white {
  color: var(--muc) !important;
}

.tr-page h5.text-white.h3,
.tr-page h1.text-white.h3 {
  text-align: center;
}

.title_index_info {
  margin-top: 16px;
  border-bottom: 3px solid var(--muc);
  font-size: 16px;
  font-weight: 800;
}

.text_info_index {
  padding: 10px 0;
  line-height: 1.7;
}

/* ---------- Trang cu: bo nen vang gan truc tiep trong the ---------- */
.tr-page [style*="254, 217, 0"],
.tr-page [style*="#ffe967"],
.tr-page [style*="#fff6c4"],
.tr-page [style*="#FFF6C4"],
.tr-page .ibox-content {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.tr-page .ibox-content {
  padding: 4px 0 !important;
}

.tr-page [style*="color:white"]:not(.btn):not(button):not([style*="background"]),
.tr-page [style*="color: white"]:not(.btn):not(button):not([style*="background"]) {
  color: var(--chu-phu) !important;
  text-shadow: none !important;
}

/* Bang */
.tr-page .table {
  --bs-table-hover-bg: #FFF4C2;
  margin-bottom: 0;
  color: var(--muc);
}

.table-custom,
.table-custom tr,
.table-custom td,
.table-custom th {
  border: none !important;
}

.table-custom th,
.table-custom td:first-child {
  width: 110px;
}

.tr-page .table thead th {
  border-bottom: 3px solid var(--muc) !important;
  color: var(--muc);
  font-size: 13px;
  font-weight: 800;
}

.tr-page .table tbody td {
  border-bottom: 1px solid var(--ke) !important;
  font-variant-numeric: tabular-nums;
}

/* Chi bang xep hang moi to noi ba hang dau; trang Nhan vat cung dung .table-custom */
.tab-content .table-custom tbody tr:nth-child(-n+3) td:first-child {
  color: var(--sao);
  font-family: var(--chu-to);
  font-size: 18px;
}

.tab-content .table-custom tbody tr:first-child td {
  --bs-table-accent-bg: var(--ki);
  background: var(--ki) !important;
  font-weight: 800;
}

.tr-page table[style*="border-collapse"] {
  font-size: 13px;
}

.tr-page th[style*="#b8f9f1"] {
  border: 0 !important;
  border-bottom: 3px solid var(--muc) !important;
  background: var(--muc) !important;
  color: #fff;
  text-shadow: none !important;
}

.tr-page td[style*="1px solid black"] {
  border: 0 !important;
  border-bottom: 1px solid var(--ke) !important;
}

/* O nhap */
.tr-page .form-control,
.tr-page .form-select {
  min-height: 48px;
  border: 3px solid var(--muc) !important;
  border-radius: 0 !important;
  background-color: #fff;
  color: var(--muc);
  font-size: 16px;
  font-weight: 600 !important;
}

.tr-page .form-control::placeholder {
  color: var(--chu-phu);
  font-weight: 500;
}

.tr-page .form-control:focus,
.tr-page .form-select:focus {
  background-color: #FFFBD6;
  box-shadow: 0 0 0 3px var(--ki);
}

.tr-page form.col-lg-5 {
  width: 100%;
  max-width: 440px;
  padding: 8px 0 !important;
}

.tr-page #captcha_img,
.tr-page img[src*="Captcha"] {
  border: 3px solid var(--muc);
  border-radius: 0 !important;
  height: 48px;
  width: auto;
}

/* Nut trong noi dung */
.tr-page .btn,
#myModal .btn {
  border: 3px solid var(--muc) !important;
  border-radius: 0 !important;
  box-shadow: none;
  font-weight: 800;
  text-shadow: none !important;
}

.tr-page .btn-action,
.tr-page .btn-dark,
.tr-page button.btn[type="submit"],
.tr-page input.btn[type="submit"],
#myModal .btn-action {
  background: var(--ao) !important;
  color: var(--muc) !important;
}

.tr-page .btn-action:hover,
.tr-page .btn-action:focus,
.tr-page .btn-dark:hover,
.tr-page .btn-dark:focus,
.tr-page button.btn[type="submit"]:hover,
.tr-page button.btn[type="submit"]:focus,
.tr-page input.btn[type="submit"]:hover,
#myModal .btn-action:hover {
  background: var(--ki) !important;
  color: var(--muc) !important;
}

.tr-page button.btn[type="submit"] {
  font-family: var(--chu-to);
  font-weight: 400;
  height: auto !important;
  min-height: 52px;
  margin-top: 10px;
}

/* Tab bang xep hang */
.tr-tabs-bxh {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 0 6px 16px;
}

.tr-page .tr-tabs-bxh .btn {
  min-height: 50px;
  padding: 6px 2px;
  background: #fff !important;
  color: var(--muc) !important;
  font-family: var(--chu-to);
  font-size: clamp(13px, 2.6vw, 17px);
  font-weight: 400;
  transform: skewX(-8deg);
}

.tr-page .tr-tabs-bxh .btn:hover,
.tr-page .tr-tabs-bxh .btn:focus {
  background: var(--ki) !important;
}

.tr-page .tr-tabs-bxh .btn[aria-pressed="true"] {
  background: var(--muc) !important;
  color: var(--ki) !important;
}

.tr-page .tr-tabs-bxh .btn > span {
  display: block;
  transform: skewX(8deg);
}

/* ---------- Trang co che game va muc gap mo ---------- */
.cc-gif {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 8px;
}

.cc-gif figure {
  flex: 0 1 150px;
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
}

.cc-gif img {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 4px;
  border: 3px solid var(--muc);
  image-rendering: pixelated;
}

.cc-intro {
  margin: 4px 0 14px;
  color: var(--chu-phu);
  font-size: 14px;
}

.cc-muc {
  margin-bottom: 8px;
  border: 3px solid var(--muc);
  background: #fff;
}

.cc-muc > summary {
  padding: 12px 14px;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
}

.cc-muc > summary:hover {
  background: var(--ki);
}

.cc-muc[open] > summary {
  border-bottom: 3px solid var(--muc);
  background: var(--muc);
  color: var(--ki);
}

.cc-muc > :not(summary) {
  margin-right: 14px;
  margin-left: 14px;
}

.cc-muc > ul,
.cc-muc > p {
  margin-top: 10px;
  margin-bottom: 12px;
}

.cc-muc ul {
  padding-left: 18px;
}

.cc-muc li {
  margin-bottom: 6px;
}

.tr-page .cc-muc h2 {
  margin-top: 16px;
  margin-bottom: 6px;
  font-size: 15px;
  font-weight: 800;
}

.cc-muc .table-responsive {
  margin-top: 10px;
  margin-bottom: 12px;
}

.tr-page .cc-bang {
  font-size: 13px;
  line-height: 1.5;
}

.tr-page .cc-bang thead th {
  background: var(--muc);
  color: #fff;
  white-space: nowrap;
}

.tr-page .cc-bang td {
  vertical-align: top;
}

.tr-page .cc-bang td:first-child {
  font-weight: 700;
}

.tr-page .cc-bang td:not(:first-child) {
  min-width: 104px;
}

.tr-dk {
  display: grid;
  gap: 8px;
  margin: 12px 0;
}

.tr-dk > div {
  padding: 10px 12px;
  border: 2px solid var(--muc);
}

.tr-dk strong {
  display: block;
  font-weight: 800;
}

@media (min-width: 720px) {
  .tr-dk {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ---------- Bao tri ---------- */
.baotri-khung {
  padding: 22px 8px;
  text-align: center;
}

.baotri-dau h1 {
  margin: 12px 0 0;
  font-family: var(--chu-to);
  font-size: clamp(24px, 5vw, 34px);
  font-weight: 400;
}

.baotri-nhan {
  display: inline-block;
  padding: 2px 12px;
  border: 2px solid var(--muc);
  background: var(--sao);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}

.baotri-than {
  padding: 14px 8px 8px;
  text-align: center;
}

.baotri-than p {
  max-width: 34em;
  margin: 0 auto 16px;
  font-size: 16px;
}

.baotri-nut {
  padding: 10px 24px;
}

.tr-page a.baotri-ve,
.baotri-ve {
  display: block;
  margin-top: 14px;
  font-size: 14px;
}

/* ---------- Cua so tai game ---------- */
#myModal {
  z-index: 1060;
  background: rgba(0, 0, 0, .78);
}

#myModal .modal-content {
  position: relative;
  width: calc(100% - 24px);
  max-width: 460px;
  margin: 8vh auto;
  padding: 16px;
  border: 4px solid var(--muc);
  border-radius: 0;
  background: var(--giay);
  box-shadow: none;
  color: var(--muc);
}

#myModal .close {
  display: grid;
  z-index: 2;
  place-items: center;
  top: 8px;
  right: 8px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 3px solid var(--muc);
  border-radius: 0;
  background: var(--ki);
  color: var(--muc);
  font-size: 24px;
  line-height: 1;
}

#myModal .close:hover,
#myModal .close:focus {
  background: var(--ao);
}

#myModal .tr-modal__logo {
  display: block;
  width: 150px;
  height: auto;
  margin: 0 auto 6px;
  border-radius: 0;
}

.tr-dl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  padding: 12px;
  border: 3px solid var(--muc);
}

.tr-dl > i {
  flex: none;
  width: 34px;
  font-size: 26px;
  text-align: center;
}

.tr-dl__text {
  flex: 1;
  min-width: 140px;
}

.tr-dl__text strong {
  display: block;
  font-weight: 800;
}

.tr-dl__text span {
  display: block;
  color: var(--chu-phu);
  font-size: 13px;
  line-height: 1.45;
}

.tr-dl__links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

#myModal .tr-dl .btn-info1 {
  padding: 8px 12px;
  background: var(--ao);
  color: var(--muc);
  font-size: 13px;
  text-shadow: none;
}

/* ---------- Chan trang ---------- */
.tr-footer {
  padding: 18px 12px 10px;
  color: var(--muc);
  font-size: 13px;
  font-weight: 500;
  text-align: center;
}

.tr-footer strong {
  display: block;
  font-family: var(--chu-to);
  font-size: 15px;
  font-weight: 400;
}

/* Trang Doi Thoi Vang: the chon goi, du rong cho so tien lon tren dien thoai */
.tr-page .row1 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(142px, 1fr));
  gap: 8px;
  margin-bottom: 8px;
  padding: 0;
}

.tr-page .row1 > .announcement {
  width: auto;
  margin: 0;
  padding: 4px;
  border: 3px solid var(--muc);
  border-radius: 0;
  background-color: #fff;
  font-size: 14px;
  line-height: 1.35;
}

.tr-page .row1 > .announcement:hover {
  background-color: #FFFBD6;
}

.tr-page .row1 .post-item {
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.tr-page .row1 a {
  font-weight: 700;
}

.tr-page button[style*="#FFC531"] {
  min-height: 52px;
  border: 3px solid var(--muc) !important;
  border-radius: 0 !important;
  background-color: var(--ao) !important;
  color: var(--muc) !important;
  font-family: var(--chu-to);
  font-weight: 400 !important;
}

.tr-page button[style*="#FFC531"]:hover,
.tr-page button[style*="#FFC531"]:focus {
  background-color: var(--ki) !important;
}

/* Anh nut nap tien cu */
.image-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.btn-img {
  max-width: 160px;
  margin: 5px;
}

@media (max-width: 576px) {
  .btn-img {
    max-width: 100px;
  }
}

/* Hop thoai SweetAlert theo cung kieu */
.swal2-popup {
  border: 4px solid var(--muc) !important;
  border-radius: 0 !important;
  font-family: var(--chu) !important;
}

.swal2-title {
  color: var(--muc) !important;
  font-family: var(--chu-to) !important;
  font-weight: 400 !important;
}

.swal2-styled.swal2-confirm {
  border: 3px solid var(--muc) !important;
  border-radius: 0 !important;
  background: var(--ao) !important;
  color: var(--muc) !important;
  font-weight: 800 !important;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}