/* Giao dien "The bai" cua Ngoc Rong Royal.
   The gioi: tam the bai Ngoc Rong suu tam, lop anh kim tren mat the va lung the do tham in hoa van.
   Logo nam tren dai ten cua tam the, tach han khoi tranh; tranh chi la o hinh cua the.
   Nen do tham chi o thanh tren, dau trang chu, dai tieu de trang con, khu top 3 va chan trang;
   noi dung doc va dien nam tren giay the sang mau.
   Chuyen dong chu dong chi co mot lan: bo the xoe ra va tam the lon lat tu lung sang mat. */

:root {
  --man: #F4EFEC;
  --man-dam: #E9E1DC;
  --trang: #FFFFFF;
  --muc: #2A0B10;
  --muc-2: #431219;
  --muc-phu: #6E5156;
  --chu-sang: #F1D6D3;
  --luoi: #E7DCD7;
  --luoi-dam: #CDBCB6;
  --do: #7A0F1D;
  --do-sang: #A3172B;
  --do-dam: #4A0711;
  --do-sau: #2A040A;
  --kim: #F2B630;
  --kim-sang: #FFE08A;
  --kim-dam: #8F5A00;
  --kim-nhat: #FFF3D1;
  --ngoc: var(--kim);
  --ngoc-sang: var(--kim-sang);
  --ngoc-dam: #9A5B00;
  --ngoc-nhat: var(--kim-nhat);
  --sao: #D21F2F;
  --la: #1F8A5B;
  --la-nhat: #DDF2E6;
  --trai-dat: #2456C7;
  --namec: #1F8F5F;
  --xayda: #D7261E;
  --font-tieu-de: "Unbounded", "Be Vietnam Pro", system-ui, sans-serif;
  --font-chu: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bo-lon: 26px;
  --bo: 18px;
  --bo-nho: 12px;
  --cao-thanh: 64px;
  --bong: 0 1px 0 rgba(42, 11, 16, .04), 0 16px 36px -20px rgba(42, 11, 16, .35);
  --bong-lon: 0 2px 0 rgba(42, 11, 16, .05), 0 34px 70px -30px rgba(42, 11, 16, .55);
  --muot: cubic-bezier(.2, .8, .2, 1);
  --nay: cubic-bezier(.3, 1.5, .5, 1);
  /* Anh kim: vang dap noi, co vet sang cheo nhu giay foil */
  --foil: linear-gradient(120deg, #FFEFB0 0%, #F4C44A 18%, #D99A22 38%, #FFE49A 52%, #E7AE34 68%, #B97B12 86%, #F6D477 100%);
  --foil-bac: linear-gradient(120deg, #FFFFFF 0%, #D9DCE3 22%, #9EA4B2 42%, #F3F4F8 56%, #B4BAC6 74%, #8C93A3 100%);
  --foil-dong: linear-gradient(120deg, #FFE1C4 0%, #E3A06A 22%, #A85E2C 44%, #F2C49C 58%, #C27840 76%, #8A4A1E 100%);
  /* Hoa van lung the: luoi thoi va ngoi sao bon canh */
  --hoa-van: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cpath d='M22 0 44 22 22 44 0 22z' fill='none' stroke='%23FFD27A' stroke-opacity='.09'/%3E%3Cpath d='M22 17.5l1.3 3.2 3.2 1.3-3.2 1.3-1.3 3.2-1.3-3.2-3.2-1.3 3.2-1.3z' fill='%23FFD27A' fill-opacity='.16'/%3E%3C/svg%3E");
  --nen-do: var(--hoa-van) center top / 44px 44px, linear-gradient(180deg, #3A0610 0%, #6A0D1B 60%, #5B0A17 100%);
  /* Ban in dam hon cho mat lung cua tung la the */
  --hoa-van-dam: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cpath d='M22 0 44 22 22 44 0 22z' fill='none' stroke='%23FFD27A' stroke-opacity='.3'/%3E%3Cpath d='M22 16.5l1.6 3.9 3.9 1.6-3.9 1.6-1.6 3.9-1.6-3.9-3.9-1.6 3.9-1.6z' fill='%23FFD27A' fill-opacity='.5'/%3E%3C/svg%3E");
}

/* ---------- Nen tang ---------- */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
  scrollbar-color: var(--do) var(--man);
}

body#cssweb {
  min-height: 100vh;
  margin: 0;
  padding-bottom: 0;
  background: var(--man);
  color: var(--muc);
  font-family: var(--font-chu);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--kim-sang);
  color: var(--muc);
}

input,
textarea {
  caret-color: var(--do-sang);
}

a,
button,
summary {
  -webkit-tap-highlight-color: rgba(163, 23, 43, .16);
}

:focus-visible {
  outline: 3px solid var(--do-sang);
  outline-offset: 2px;
}

.rd-toi :focus-visible {
  outline-color: var(--kim-sang);
}

.rd-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.rd-bo-qua {
  position: fixed;
  z-index: 2000;
  top: 8px;
  left: 8px;
  padding: 10px 16px;
  border-radius: var(--bo-nho);
  background: var(--kim);
  color: var(--muc);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform .2s var(--muot);
}

.rd-bo-qua:focus {
  color: var(--muc);
  transform: none;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
}

.rd-khung {
  width: min(100% - 32px, 1160px);
  margin-inline: auto;
}

/* ---------- Bieu tuong va vien ngoc ---------- */
.rd-i {
  display: block;
  flex: none;
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.rd-ngoc {
  display: block;
  flex: none;
  width: 40px;
  height: 40px;
}

/* ---------- Nut ----------
   Nut chinh la mot mieng anh kim: vet sang chay ngang khi di chuot vao.
   Nut phu tren giay the mang mau do lung the; tren nen do thi doi sang giay trang. */
.rd-nut {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 22px;
  border: 0;
  border-radius: var(--bo-nho);
  font-family: var(--font-chu);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .005em;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .18s var(--muot), box-shadow .2s var(--muot), background-color .18s, background-position .6s var(--muot), color .18s;
}

.rd-nut .rd-i {
  width: 20px;
  height: 20px;
}

.rd-nut:active {
  transform: translateY(1px) scale(.985);
}

.rd-nut--chinh {
  background: var(--foil);
  background-position: 0% 50%;
  background-size: 220% 100%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65), inset 0 -1px 0 rgba(110, 60, 0, .35), 0 10px 22px -12px rgba(150, 82, 0, .75);
  color: var(--muc);
}

.rd-nut--chinh:hover,
.rd-nut--chinh:focus {
  background-position: 100% 50%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -1px 0 rgba(110, 60, 0, .35), 0 14px 26px -12px rgba(150, 82, 0, .85);
  color: var(--muc);
}

.rd-nut--toi {
  background: var(--do);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 10px 22px -14px rgba(74, 7, 17, .9);
  color: #fff;
}

.rd-nut--toi:hover,
.rd-nut--toi:focus {
  background: var(--do-sang);
  color: #fff;
}

.rd-toi .rd-nut--toi {
  background: #fff;
  box-shadow: 0 10px 22px -14px rgba(0, 0, 0, .7);
  color: var(--do);
}

.rd-toi .rd-nut--toi:hover,
.rd-toi .rd-nut--toi:focus {
  background: var(--kim-nhat);
  color: var(--do-dam);
}

.rd-nut--vien {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--do);
  color: var(--do);
}

.rd-nut--vien:hover,
.rd-nut--vien:focus {
  background: rgba(122, 15, 29, .06);
  color: var(--do-dam);
}

.rd-toi .rd-nut--vien {
  background: rgba(255, 255, 255, .04);
  box-shadow: inset 0 0 0 1.5px rgba(255, 226, 170, .55);
  color: #fff;
}

.rd-toi .rd-nut--vien:hover,
.rd-toi .rd-nut--vien:focus {
  background: rgba(255, 255, 255, .1);
  box-shadow: inset 0 0 0 1.5px var(--kim-sang);
  color: #fff;
}

.rd-nut--nhe {
  min-height: 44px;
  padding: 0 14px;
  background: transparent;
  color: var(--muc);
}

.rd-nut--nhe:hover,
.rd-nut--nhe:focus {
  background: rgba(42, 11, 16, .06);
  color: var(--muc);
}

.rd-toi .rd-nut--nhe {
  color: #fff;
}

.rd-toi .rd-nut--nhe:hover,
.rd-toi .rd-nut--nhe:focus {
  background: rgba(255, 255, 255, .1);
  color: #fff;
}

.rd-nut--lon {
  min-height: 56px;
  padding: 0 30px;
  font-size: 17px;
}

.rd-nut--nho {
  min-height: 40px;
  padding: 0 14px;
  font-size: 14px;
}

.rd-nut--rong {
  width: 100%;
}

.rd-nut[disabled] {
  opacity: .55;
  cursor: not-allowed;
}

.rd-giua {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

/* ---------- Thanh tren cung: dai do lung the ---------- */
.rd-dau {
  position: sticky;
  z-index: 1030;
  top: 0;
  border-bottom: 1px solid rgba(255, 214, 140, .1);
  background: rgba(42, 4, 10, .97);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  color: #fff;
  transition: box-shadow .2s, background-color .2s;
}

.rd-dau--cuon {
  background: rgba(42, 4, 10, .96);
  box-shadow: 0 14px 30px -18px rgba(20, 0, 4, .85);
}

.rd-dau__trong {
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(100% - 32px, 1160px);
  height: 60px;
  margin-inline: auto;
}

.rd-logo {
  display: flex;
  flex: none;
  align-items: center;
  min-height: 44px;
  border-radius: 8px;
  color: #fff;
  text-decoration: none;
}

.rd-logo:hover {
  color: #fff;
}

.rd-logo img {
  display: block;
  width: auto;
  height: 44px;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .35));
  animation: rd-hien .3s var(--muot);
}

.rd-logo__chu {
  display: none;
  font-family: var(--font-tieu-de);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1;
  white-space: nowrap;
  animation: rd-hien .3s var(--muot);
}

/* Trang chu: logo da nam tren tam the lon. Khi tam the con trong man hinh, thanh tren chi ghi ten bang chu */
.rd-dau--logo-an .rd-logo img {
  display: none;
}

.rd-dau--logo-an .rd-logo__chu {
  display: block;
}

@media (min-width: 960px) {
  .rd-logo__chu {
    font-size: 18px;
  }
}

.rd-menu {
  display: none;
}

.rd-dau__phai {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.rd-dau__may {
  display: none;
}

/* So du hien gon tren dien thoai, bam vao la xem nhan vat */
.rd-so-du {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 12px 0 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  box-shadow: inset 0 0 0 1px rgba(255, 226, 170, .25);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}

.rd-so-du:hover,
.rd-so-du:focus {
  color: #fff;
}

.rd-so-du img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--kim-nhat);
  object-fit: contain;
}

@media (min-width: 960px) {
  .rd-dau__trong {
    gap: 20px;
    height: 72px;
  }

  .rd-logo img {
    height: 54px;
  }

  .rd-menu {
    display: flex;
    align-items: center;
    gap: 2px;
  }

  .rd-menu a {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 14px;
    border-radius: 10px;
    color: var(--chu-sang);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .15s, color .15s;
  }

  .rd-menu a:hover,
  .rd-menu a:focus {
    background: rgba(255, 255, 255, .08);
    color: #fff;
  }

  /* Muc dang mo: mot vach anh kim ben duoi */
  .rd-menu a[aria-current="page"] {
    color: #fff;
  }

  .rd-menu a[aria-current="page"]::after {
    content: "";
    position: absolute;
    right: 14px;
    bottom: 4px;
    left: 14px;
    height: 3px;
    border-radius: 3px;
    background: var(--foil);
  }

  .rd-dau__dt {
    display: none !important;
  }

  .rd-dau__may {
    display: flex;
    align-items: center;
    gap: 8px;
  }
}

.rd-cham {
  display: inline-block;
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sao);
  box-shadow: 0 0 0 3px rgba(210, 31, 47, .2);
}

.rd-toi .rd-cham {
  background: #FF5A5F;
  box-shadow: 0 0 0 3px rgba(255, 90, 95, .25);
}

/* ---------- Menu tai khoan ---------- */
.rd-tk {
  position: relative;
}

.rd-tk > summary {
  list-style: none;
  cursor: pointer;
}

.rd-tk > summary::-webkit-details-marker {
  display: none;
}

.rd-tk__nut {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 14px 0 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  box-shadow: inset 0 0 0 1px rgba(255, 226, 170, .25);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  transition: box-shadow .15s, background-color .15s;
}

.rd-tk__nut:hover {
  background: rgba(255, 255, 255, .12);
  box-shadow: inset 0 0 0 1px rgba(255, 226, 170, .55);
}

.rd-tk__nut img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--kim-nhat);
  object-fit: contain;
}

.rd-tk__nut > span {
  overflow: hidden;
  max-width: 140px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rd-tk__nut::after {
  content: "";
  width: 8px;
  height: 8px;
  margin: -4px 2px 0;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .2s var(--muot);
}

.rd-tk[open] .rd-tk__nut::after {
  margin-top: 4px;
  transform: rotate(-135deg);
}

.rd-tk__menu {
  position: absolute;
  z-index: 10;
  top: calc(100% + 10px);
  right: 0;
  width: 280px;
  padding: 8px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--luoi), var(--bong-lon);
  color: var(--muc);
  transform-origin: top right;
}

.rd-tk[open] .rd-tk__menu {
  animation: rd-bat .2s var(--muot);
}

@keyframes rd-bat {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(.97);
  }
}

.rd-tk__menu :focus-visible {
  outline-color: var(--do-sang);
}

.rd-tk__dau {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 2px 12px;
  margin-bottom: 6px;
  padding: 10px 10px 14px;
  border-bottom: 1px solid var(--luoi);
}

.rd-tk__dau img {
  grid-row: span 2;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--kim-nhat);
  object-fit: contain;
}

.rd-tk__dau strong {
  overflow: hidden;
  font-size: 16px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rd-tk__dau span {
  color: var(--ngoc-dam);
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}

.rd-tk__menu a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  padding: 0 12px;
  border-radius: 10px;
  color: var(--muc);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

.rd-tk__menu a .rd-i {
  width: 20px;
  height: 20px;
  color: var(--muc-phu);
}

.rd-tk__menu a:hover,
.rd-tk__menu a:focus {
  background: var(--man);
  color: var(--muc);
}

.rd-tk__menu .rd-tk__thoat {
  margin-top: 6px;
  border-top: 1px solid var(--luoi);
  border-radius: 0 0 10px 10px;
  color: var(--do-sang);
}

.rd-tk__menu .rd-tk__thoat .rd-i {
  color: var(--do-sang);
}

/* ---------- Thanh duoi day man hinh dien thoai ---------- */
.rd-thanh {
  position: fixed;
  z-index: 1030;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  height: calc(var(--cao-thanh) + env(safe-area-inset-bottom));
  padding: 0 4px env(safe-area-inset-bottom);
  border-top: 1px solid var(--luoi);
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 -12px 30px -22px rgba(42, 11, 16, .55);
}

.rd-thanh__muc {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  height: var(--cao-thanh);
  padding: 0 2px;
  color: var(--muc-phu);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.1;
  list-style: none;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: color .15s;
}

.rd-thanh__muc::-webkit-details-marker {
  display: none;
}

.rd-thanh__muc:hover,
.rd-thanh__muc:focus {
  color: var(--do);
}

.rd-thanh__muc:active .rd-i {
  transform: scale(.88);
}

.rd-thanh__muc .rd-i {
  width: 24px;
  height: 24px;
  transition: transform .15s var(--nay);
}

.rd-thanh__muc[aria-current="page"] {
  color: var(--do);
  font-weight: 700;
}

.rd-thanh__muc[aria-current="page"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 30px;
  height: 3px;
  margin-left: -15px;
  border-radius: 0 0 3px 3px;
  background: var(--do);
}

/* Vien 4 sao o giua: Tai game, noi len khoi thanh */
.rd-thanh__muc--tam {
  justify-content: flex-end;
  padding-bottom: 9px;
  color: var(--muc);
  font-weight: 700;
}

.rd-thanh__muc--tam .rd-ngoc {
  width: 52px;
  height: 52px;
  margin-top: -26px;
  border-radius: 50%;
  box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--luoi), 0 10px 20px -6px rgba(122, 15, 29, .55);
  transition: transform .18s var(--nay);
}

.rd-thanh__muc--tam:active .rd-ngoc {
  transform: scale(.92);
}

.rd-thanh__muc .rd-cham {
  position: absolute;
  top: 10px;
  left: calc(50% + 8px);
}

.rd-thanh__muc--tam .rd-cham {
  top: -18px;
  left: calc(50% + 16px);
}

.rd-thanh .rd-tk {
  position: static;
  min-width: 0;
}

/* Menu tai khoan tren dien thoai mo len nhu mot tam the tu duoi */
.rd-thanh .rd-tk__menu {
  position: fixed;
  top: auto;
  right: 10px;
  bottom: calc(var(--cao-thanh) + 10px + env(safe-area-inset-bottom));
  left: 10px;
  width: auto;
  max-width: 460px;
  margin: 0 auto;
  transform-origin: bottom center;
}

.rd-thanh .rd-tk[open] .rd-tk__menu {
  animation: rd-len .22s var(--muot);
}

@keyframes rd-len {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

@media (min-width: 960px) {
  .rd-thanh {
    display: none;
  }
}

/* ---------- Khung noi dung ---------- */
.rd-main {
  position: relative;
  z-index: 0;
  display: block;
  min-height: 60vh;
  overflow-x: clip;
}

.rd-trang {
  width: min(100% - 32px, 960px);
  margin: 28px auto 0;
}

.rd-trang--home {
  width: min(100% - 32px, 1160px);
  margin-top: 0;
}

.rd-trang img {
  max-width: 100%;
}

@media (min-width: 960px) {
  .rd-trang {
    margin-top: 44px;
  }

  .rd-trang--home {
    margin-top: 0;
  }
}

/* Dai nen do tran ngang man hinh, dat sau mot khoi bang gia phan tu ::before */
.rd-tieude::before,
.rd-hero::before,
.rd-dai::before,
.baotri-khung::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  background: var(--nen-do);
}

/* Tieu de trang con: chu trang tren dai do, tam noi dung ben duoi gac len mep dai */
.rd-tieude {
  position: relative;
  margin-bottom: 24px;
  color: #fff;
}

.rd-tieude::before {
  top: -120px;
  bottom: -72px;
}

.rd-tieude h1,
.rd-trang .rd-tieude h1 {
  margin: 0;
  color: #fff;
  font-family: var(--font-tieu-de);
  font-size: clamp(26px, 2.2vw + 16px, 40px);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.12;
  text-wrap: balance;
}

.rd-tieude p {
  max-width: 60ch;
  margin: 10px 0 0;
  color: var(--chu-sang);
  font-size: 16px;
}

.rd-tieude a {
  color: var(--kim-sang);
}

.rd-tieude--giua {
  text-align: center;
}

.rd-tieude--giua p {
  margin-inline: auto;
}

/* Tam noi dung trang: giay the trang */
.rd-hop {
  padding: 22px 18px;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(42, 11, 16, .06), var(--bong);
}

.rd-hop + .rd-hop {
  margin-top: 16px;
}

.rd-hop[role="tabpanel"] + .rd-hop[role="tabpanel"] {
  margin-top: 0;
}

[role="tabpanel"]:not([hidden]) {
  animation: rd-hien .32s var(--muot);
}

.rd-hop > h2,
.rd-hop__dau h2 {
  margin: 0 0 6px;
  color: var(--muc);
  font-family: var(--font-tieu-de);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.25;
}

.rd-hop__mo {
  margin: 0 0 18px;
  color: var(--muc-phu);
  font-size: 15px;
}

@media (min-width: 720px) {
  .rd-hop {
    padding: 32px;
  }
}

/* ---------- Trang chu: dau trang voi bo the xoe ---------- */
.rd-hero {
  position: relative;
  display: grid;
  gap: 8px;
  padding: 18px 0 64px;
  color: #fff;
}

.rd-hero::before {
  top: -100px;
  bottom: 0;
  background:
    radial-gradient(52% 46% at 50% 26%, rgba(255, 118, 64, .32), transparent 72%),
    var(--nen-do);
}

.rd-hero__chu {
  position: relative;
  z-index: 1;
}

.rd-hero h1 {
  margin: 0;
  color: #fff;
  font-family: var(--font-tieu-de);
  font-size: clamp(27px, 3vw + 13px, 52px);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.08;
  text-wrap: balance;
}

.rd-hero__mo {
  max-width: 46ch;
  margin: 14px 0 0;
  color: var(--chu-sang);
  font-size: 16.5px;
  line-height: 1.6;
}

/* Ba nut tai: ban cua thiet bi dang xem len dau va mang anh kim */
.rd-tai-nhanh {
  display: grid;
  gap: 10px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.rd-nen {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding: 8px 16px 8px 10px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .06);
  box-shadow: inset 0 0 0 1px rgba(255, 226, 170, .26);
  color: #fff;
  text-decoration: none;
  transition: background-color .18s, box-shadow .18s, background-position .6s var(--muot), transform .18s var(--muot);
}

.rd-nen:hover,
.rd-nen:focus {
  background-color: rgba(255, 255, 255, .11);
  box-shadow: inset 0 0 0 1px var(--kim-sang);
  color: #fff;
}

.rd-nen:active {
  transform: translateY(1px) scale(.99);
}

.rd-nen__i {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .09);
  font-size: 22px;
}

.rd-nen__chu {
  display: grid;
  min-width: 0;
  line-height: 1.25;
}

.rd-nen strong {
  font-size: 16px;
  font-weight: 700;
}

.rd-nen small {
  color: var(--chu-sang);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.rd-nen__mui {
  width: 22px;
  height: 22px;
  opacity: .8;
}

.rd-tai-nhanh--chinh .rd-nen {
  min-height: 66px;
  background: var(--foil);
  background-position: 0% 50%;
  background-size: 220% 100%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65), inset 0 -1px 0 rgba(110, 60, 0, .35), 0 18px 34px -16px rgba(255, 170, 40, .55);
  color: var(--muc);
}

.rd-tai-nhanh--chinh .rd-nen:hover,
.rd-tai-nhanh--chinh .rd-nen:focus {
  background-position: 100% 50%;
  color: var(--muc);
}

.rd-tai-nhanh--chinh .rd-nen__i {
  background: rgba(42, 11, 16, .12);
}

.rd-tai-nhanh--chinh small {
  color: #5A3400;
}

.rd-tai-nhanh--chinh strong {
  font-size: 17px;
}

.rd-tai-nhanh--chinh .rd-nen__mui {
  opacity: 1;
}

.rd-tai-nhanh :focus-visible {
  outline-color: var(--kim-sang);
}

@media (min-width: 600px) {
  .rd-tai-nhanh {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rd-tai-nhanh--chinh {
    grid-column: 1 / -1;
  }
}

.rd-hero__bt {
  margin-top: 24px;
  padding: 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .06);
  box-shadow: inset 0 0 0 1px rgba(255, 226, 170, .26);
}

.rd-hero__bt p {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  color: #fff;
  font-weight: 600;
}

.rd-hero__tk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  margin-top: 18px;
  color: var(--chu-sang);
  font-size: 15px;
}

.rd-hero__tk p {
  margin: 0;
}

.rd-hero__tk .rd-nut {
  background: rgba(255, 255, 255, .04);
  box-shadow: inset 0 0 0 1.5px rgba(255, 226, 170, .55);
  color: #fff;
}

.rd-hero__tk .rd-nut:hover,
.rd-hero__tk .rd-nut:focus {
  background: rgba(255, 255, 255, .1);
  box-shadow: inset 0 0 0 1.5px var(--kim-sang);
  color: #fff;
}

.rd-hero__tk a:not(.rd-nut),
.rd-hero__hd a {
  color: var(--kim-sang);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}

.rd-hero__tk a:not(.rd-nut):hover,
.rd-hero__hd a:hover {
  color: #fff;
}

.rd-hero__hd {
  margin: 12px 0 0;
  color: var(--chu-sang);
  font-size: 14px;
}

.rd-hero__tk {
  padding-top: 18px;
  border-top: 1px solid rgba(255, 214, 140, .14);
}

.rd-hero :focus-visible {
  outline-color: var(--kim-sang);
}

/* Bo the: hai la lung the xoe sau, tam the lon o truoc */
.rd-bo-the {
  position: relative;
  order: -1;
  width: min(100%, 560px);
  margin: 6px auto 22px;
  padding: 0 9%;
  perspective: 1400px;
}

.rd-bo-the__lung,
.rd-the-lon__lung {
  display: grid;
  place-items: center;
  border-radius: 20px;
  background:
    var(--hoa-van-dam) center / 30px 30px,
    radial-gradient(60% 50% at 50% 50%, #9A1828, #4A0711 80%);
  box-shadow: inset 0 0 0 7px #F2C24E, inset 0 0 0 8px rgba(110, 60, 0, .4), inset 0 0 0 13px #5A0915, inset 0 0 0 14px rgba(255, 214, 140, .35);
}

.rd-bo-the__lung .rd-ngoc,
.rd-the-lon__lung .rd-ngoc {
  width: 28%;
  height: auto;
  aspect-ratio: 1;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .45));
}

.rd-bo-the__lung {
  position: absolute;
  top: 4%;
  bottom: 6%;
  left: 7%;
  right: 7%;
  box-shadow: inset 0 0 0 7px #F2C24E, inset 0 0 0 8px rgba(110, 60, 0, .4), inset 0 0 0 13px #5A0915, inset 0 0 0 14px rgba(255, 214, 140, .35), 0 24px 50px -24px rgba(0, 0, 0, .8);
  transform-origin: 50% 100%;
}

/* Vien ngoc tren lung the nam o phan lo ra ngoai tam the truoc */
.rd-bo-the__lung .rd-ngoc {
  width: 17%;
}

.rd-bo-the__lung--trai {
  place-items: start start;
  padding: 15% 0 0 5%;
  transform: rotate(-8deg) translateX(-3%);
}

.rd-bo-the__lung--phai {
  place-items: start end;
  padding: 15% 5% 0 0;
  transform: rotate(8deg) translateX(3%);
}

.rd-the-lon {
  position: relative;
  transform: perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
  transition: transform .5s var(--muot);
}

.rd-the-lon--dang-nghieng {
  transition: transform .08s linear;
}

.rd-the-lon__lat {
  position: relative;
  transform-style: preserve-3d;
}

.rd-the-lon__mat {
  position: relative;
  padding: 8px;
  border-radius: 20px;
  background: var(--foil);
  background-size: 200% 200%;
  box-shadow: 0 2px 0 rgba(255, 240, 190, .5) inset, 0 40px 70px -30px rgba(12, 0, 3, .9), 0 0 0 1px rgba(80, 40, 0, .35);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.rd-the-lon__trong {
  overflow: hidden;
  border-radius: 13px;
  background:
    var(--hoa-van) center / 30px 30px,
    radial-gradient(90% 60% at 50% 0%, #9A1828, #4F0812 75%);
}

.rd-the-lon__ten {
  display: grid;
  place-items: center;
  padding: 10px 16px 6px;
}

.rd-the-lon__ten img {
  display: block;
  width: min(66%, 340px);
  height: auto;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .45));
}

.rd-the-lon__tranh {
  margin: 0 10px;
  overflow: hidden;
  border-radius: 9px;
  background: #3A0610;
  box-shadow: 0 0 0 3px #FFF4DA, 0 0 0 4px rgba(110, 60, 0, .5), 0 10px 24px -10px rgba(0, 0, 0, .6);
}

.rd-the-lon__tranh picture,
.rd-the-lon__tranh img {
  display: block;
  width: 100%;
  height: auto;
}

.rd-the-lon__tranh img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: 50% 30%;
}

.rd-the-lon__chan {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px 12px;
  color: var(--kim-sang);
  font-family: var(--font-tieu-de);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .05em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
}

.rd-the-lon__ngoc {
  display: flex;
  flex: none;
  gap: 2px;
}

.rd-the-lon__ngoc .rd-ngoc {
  width: 15px;
  height: 15px;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .4));
}

/* Man hep: dai cuoi chi con bay vien ngoc o giua, chu ten dai bi bo de khong tran */
@media (max-width: 479px) {
  .rd-the-lon__chan {
    justify-content: center;
  }

  .rd-the-lon__chan > span:first-child {
    display: none;
  }

  .rd-the-lon__ngoc {
    gap: 4px;
  }

  .rd-the-lon__ngoc .rd-ngoc {
    width: 18px;
    height: 18px;
  }
}

/* Lop anh kim: vet sang di theo con tro, nhu nghieng tam the duoi den */
.rd-the-lon__kim {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .38) 45%, rgba(255, 210, 250, .26) 50%, rgba(170, 255, 236, .22) 55%, transparent 70%);
  background-position: var(--mx, 120%) 0;
  background-size: 260% 100%;
  mix-blend-mode: soft-light;
  pointer-events: none;
}

.rd-the-lon__lung {
  position: absolute;
  inset: 0;
  transform: rotateY(180deg);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

@media (min-width: 600px) {
  .rd-the-lon__tranh img {
    aspect-ratio: 1920 / 1054;
  }

  .rd-the-lon__chan {
    padding: 10px 14px 12px;
    font-size: 12px;
    letter-spacing: .06em;
  }

  .rd-the-lon__ngoc {
    gap: 3px;
  }

  .rd-the-lon__ngoc .rd-ngoc {
    width: 22px;
    height: 22px;
  }
}

@media (min-width: 960px) {
  .rd-hero {
    grid-template-columns: minmax(0, 11fr) minmax(0, 12fr);
    align-items: center;
    gap: 64px;
    min-height: min(calc(100vh - 72px), 820px);
    padding: 36px 0 96px;
  }

  .rd-bo-the {
    order: 0;
    width: 100%;
    margin: 0;
    padding: 0 10%;
  }

  .rd-bo-the__lung {
    left: 9%;
    right: 9%;
  }

  .rd-bo-the__lung--trai {
    transform: rotate(-10deg) translateX(-4%);
  }

  .rd-bo-the__lung--phai {
    transform: rotate(10deg) translateX(4%);
  }

  .rd-the-lon__mat {
    padding: 10px;
    border-radius: 24px;
  }

  .rd-the-lon__trong {
    border-radius: 15px;
  }

  .rd-the-lon__ten {
    padding: 14px 20px 8px;
  }

  .rd-hero__mo {
    font-size: 18px;
  }
}

@media (min-width: 1200px) {
  .rd-hero {
    gap: 88px;
  }
}

/* Nhip mo man duy nhat: bo the xoe ra, tam the lon lat tu lung sang mat roi vet sang quet qua */
@media (prefers-reduced-motion: no-preference) {
  .rd-the-lon__lat {
    animation: rd-lat 1.15s var(--muot) .2s both;
  }

  .rd-the-lon__kim {
    animation: rd-sang 1.4s var(--muot) 1.1s both;
  }

  .rd-bo-the__lung--trai {
    animation: rd-xoe-trai .9s var(--muot) .15s both;
  }

  .rd-bo-the__lung--phai {
    animation: rd-xoe-phai .9s var(--muot) .15s both;
  }

  @keyframes rd-lat {
    from {
      transform: rotateY(-180deg) scale(.94);
    }
  }

  @keyframes rd-sang {
    from {
      background-position: 120% 0;
    }

    to {
      background-position: -20% 0;
    }
  }

  @keyframes rd-xoe-trai {
    from {
      transform: rotate(0deg) translateX(0);
    }
  }

  @keyframes rd-xoe-phai {
    from {
      transform: rotate(0deg) translateX(0);
    }
  }
}

/* ---------- Trang chu: cac vung ---------- */
.rd-vung {
  margin-top: 64px;
}

.rd-vung__dau {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 24px;
  margin-bottom: 24px;
}

.rd-vung h2 {
  margin: 0;
  color: var(--muc);
  font-family: var(--font-tieu-de);
  font-size: clamp(23px, 1.8vw + 14px, 34px);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.15;
  text-wrap: balance;
}

.rd-vung__mo {
  max-width: 56ch;
  margin: 8px 0 0;
  color: var(--muc-phu);
  font-size: 16px;
}

@media (min-width: 960px) {
  .rd-vung {
    margin-top: 104px;
  }
}

/* Loi tat: mot tam giay the gac len mep duoi cua dai do */
.rd-loitat {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: -32px;
  overflow: hidden;
  border-radius: 20px;
  background: var(--luoi);
  box-shadow: 0 0 0 1px rgba(42, 11, 16, .06), var(--bong-lon);
}

.rd-loitat a {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 2px;
  min-height: 100%;
  padding: 16px;
  background: #fff;
  color: var(--muc-phu);
  font-size: 13.5px;
  line-height: 1.4;
  text-decoration: none;
  transition: background-color .15s;
}

.rd-loitat a:hover,
.rd-loitat a:focus {
  background: #FFFBF4;
  color: var(--muc-phu);
}

.rd-loitat a:focus-visible {
  outline-offset: -3px;
}

.rd-loitat strong {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muc);
  font-size: 15.5px;
  font-weight: 700;
}

.rd-loitat__i {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: 10px;
  border-radius: 12px;
  transition: transform .2s var(--nay);
}

.rd-loitat a:hover .rd-loitat__i {
  transform: translateY(-2px) rotate(-4deg);
}

.rd-loitat__i--cam {
  background: var(--kim-nhat);
  color: var(--ngoc-dam);
}

.rd-loitat__i--la {
  background: #DDF2E6;
  color: #17704A;
}

.rd-loitat__i--lam {
  background: #E2EAFB;
  color: #1E4FB8;
}

.rd-loitat__i--muc {
  background: #FBE3E5;
  color: var(--do-sang);
}

.rd-loitat .rd-cham {
  margin-left: 2px;
}

@media (min-width: 720px) {
  .rd-loitat {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .rd-loitat a {
    grid-template-columns: 40px minmax(0, 1fr);
    column-gap: 14px;
    padding: 20px;
  }

  .rd-loitat__i {
    grid-row: span 2;
    margin-bottom: 0;
  }
}

@media (min-width: 960px) {
  .rd-loitat {
    margin-top: -48px;
  }
}

/* Ba buoc: ba tam the nho. O hinh cua the la lung do in hoa van, vien ngoc 1, 2, 3 sao lam so thu tu */
.rd-buoc {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: buoc;
}

.rd-buoc li {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 16px;
  padding: 5px;
  border-radius: 18px;
  background: var(--foil);
  box-shadow: 0 18px 34px -24px rgba(42, 11, 16, .7);
}

.rd-buoc__o {
  display: grid;
  place-items: center;
  min-height: 112px;
  border-radius: 13px;
  background:
    radial-gradient(60% 55% at 50% 45%, rgba(255, 140, 60, .4), transparent 72%),
    var(--hoa-van) center / 26px 26px,
    linear-gradient(180deg, #7A0F1D, #3F0610);
  box-shadow: inset 0 0 0 2px rgba(255, 244, 218, .85);
}

.rd-buoc .rd-ngoc {
  width: 56px;
  height: 56px;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .45));
}

.rd-buoc__chu {
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 10px 12px 10px 0;
  color: #4A2E33;
  font-size: 14.5px;
  line-height: 1.5;
}

.rd-buoc strong {
  color: var(--muc);
  font-family: var(--font-tieu-de);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.25;
}

.rd-buoc__lam {
  justify-self: start;
  margin-top: 4px;
  font-size: 15px;
}

/* Giay the ben trong vien anh kim */
.rd-buoc li {
  position: relative;
  isolation: isolate;
}

.rd-buoc li::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 5px;
  border-radius: 13px;
  background: #FFFCF6;
}

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

  .rd-buoc li {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 0;
    padding: 6px;
    border-radius: 20px;
  }

  .rd-buoc li::after {
    inset: 6px;
    border-radius: 14px;
  }

  .rd-buoc__o {
    min-height: 0;
    aspect-ratio: 2 / 1;
  }

  .rd-buoc .rd-ngoc {
    width: 84px;
    height: 84px;
  }

  .rd-buoc__chu {
    align-content: start;
    padding: 16px 16px 18px;
    font-size: 15px;
  }

  .rd-buoc strong {
    font-size: 19px;
  }
}

@media (min-width: 960px) {
  .rd-buoc li:nth-child(1) {
    transform: rotate(-1.5deg);
  }

  .rd-buoc li:nth-child(3) {
    transform: rotate(1.5deg);
  }

  .rd-buoc li {
    transition: transform .3s var(--muot);
  }

  .rd-buoc li:hover {
    transform: translateY(-4px) rotate(0deg);
  }
}

/* Chon hanh tinh: ba tam the, mau he cua moi hanh tinh nhuom dai ten va nen the */
.rd-ht-xap {
  display: grid;
  grid-auto-columns: 84%;
  grid-auto-flow: column;
  gap: 14px;
  margin: 0 -16px;
  padding: 6px 16px 18px;
  overflow-x: auto;
  list-style: none;
  scroll-padding-inline: 16px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

.rd-ht-xap::-webkit-scrollbar {
  display: none;
}

.rd-ht-xap:focus-visible {
  outline-offset: -3px;
}

.rd-ht-the {
  scroll-snap-align: start;
  padding: 6px;
  border-radius: 20px;
  background: var(--foil);
  box-shadow: 0 26px 44px -26px rgba(42, 11, 16, .8);
}

.rd-ht-the__mat {
  display: grid;
  grid-template-rows: auto auto 1fr;
  height: 100%;
  overflow: hidden;
  border-radius: 14px;
  background:
    var(--hoa-van) center / 26px 26px,
    linear-gradient(180deg, #4A0711, #1E0307 78%);
  background:
    var(--hoa-van) center / 26px 26px,
    linear-gradient(180deg, color-mix(in srgb, var(--he) 70%, #1A0206), #1E0307 78%);
  color: #fff;
}

.rd-ht-the__ten {
  margin: 0;
  padding: 14px 16px 12px;
  color: #fff;
  font-family: var(--font-tieu-de);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.1;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}

.rd-ht-the__tranh {
  margin: 0 10px;
  overflow: hidden;
  border-radius: 9px;
  box-shadow: 0 0 0 3px #FFF4DA, 0 10px 20px -10px rgba(0, 0, 0, .6);
}

.rd-ht-the__tranh img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1181 / 699;
  object-fit: cover;
}

.rd-ht-the__hop {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 14px 12px 14px;
}

.rd-ht-the__chieu {
  display: grid;
  margin: 0;
  font-family: var(--font-tieu-de);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.25;
}

.rd-ht-the__chieu span {
  margin-bottom: 2px;
  color: var(--kim-sang);
  font-family: var(--font-chu);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0;
}

.rd-ht-the .rd-chieu {
  gap: 8px;
  margin: 0;
}

.rd-ht-the .rd-chieu img {
  border-radius: 8px;
  box-shadow: 0 0 0 1px rgba(255, 244, 218, .35);
}

.rd-ht-the .rd-chieu figcaption {
  padding-top: 4px;
  color: var(--chu-sang);
  font-size: 12.5px;
}

@media (min-width: 720px) {
  .rd-ht-xap {
    grid-auto-columns: 46%;
  }
}

@media (min-width: 960px) {
  .rd-ht-xap {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-flow: row;
    gap: 22px;
    margin: 0;
    padding: 6px 0 0;
    overflow: visible;
  }

  .rd-ht-the {
    transition: transform .3s var(--muot), box-shadow .3s var(--muot);
  }

  .rd-ht-the:hover {
    box-shadow: 0 34px 54px -26px rgba(42, 11, 16, .85);
    transform: translateY(-6px);
  }

  .rd-ht-the__ten {
    font-size: 22px;
  }
}

/* Manh nhat may chu: dai do thu hai, ba tam the nguoi choi theo do hiem vang, bac, dong */
.rd-dai {
  position: relative;
  display: grid;
  gap: 32px;
  padding: 56px 0 64px;
  color: #fff;
}

.rd-dai::before {
  top: 0;
  bottom: 0;
  background:
    radial-gradient(50% 60% at 70% 55%, rgba(255, 150, 60, .22), transparent 70%),
    var(--nen-do);
}

.rd-dai h2 {
  color: #fff;
}

.rd-dai .rd-vung__mo {
  color: var(--chu-sang);
}

.rd-dai__chu .rd-nut {
  margin-top: 22px;
}

.rd-bac {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rd-bac__muc {
  --vien: var(--foil-dong);
  padding: 5px;
  border-radius: 16px;
  background: var(--vien);
  box-shadow: 0 24px 40px -22px rgba(0, 0, 0, .9);
}

.rd-bac__muc--1 {
  --vien: var(--foil);
  order: 2;
  transform: translateY(-14px);
}

.rd-bac__muc--2 {
  --vien: var(--foil-bac);
  order: 1;
}

.rd-bac__muc--3 {
  order: 3;
}

.rd-bac__mat {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 10px 6px 12px;
  border-radius: 11px;
  background:
    var(--hoa-van) center / 26px 26px,
    linear-gradient(180deg, #5E0A18, #2F040B);
  text-align: center;
}

.rd-bac__hang {
  justify-self: stretch;
  margin-bottom: 8px;
  color: var(--kim-sang);
  font-family: var(--font-tieu-de);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
}

.rd-bac__anh {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  max-width: 120px;
  margin-bottom: 8px;
  border-radius: 10px;
  background: radial-gradient(70% 70% at 50% 40%, #FFF4DA, #F0C774 70%, #C98A22);
  box-shadow: 0 0 0 2px rgba(255, 244, 218, .9);
}

.rd-bac__muc--2 .rd-bac__anh {
  background: radial-gradient(70% 70% at 50% 40%, #FFFFFF, #D6DAE2 70%, #9AA1AF);
}

.rd-bac__muc--3 .rd-bac__anh {
  background: radial-gradient(70% 70% at 50% 40%, #FFE9D6, #E3A472 70%, #A8622F);
}

.rd-bac__anh img {
  width: 82%;
  height: auto;
  filter: drop-shadow(0 6px 8px rgba(60, 20, 0, .35));
}

.rd-bac__ten {
  max-width: 100%;
  overflow: hidden;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rd-bac__sm {
  display: grid;
  color: var(--kim-sang);
  font-family: var(--font-tieu-de);
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
}

.rd-bac__sm small {
  color: var(--chu-sang);
  font-family: var(--font-chu);
  font-size: 11px;
  font-weight: 500;
}

.rd-dai__trong {
  margin: 0;
  color: var(--chu-sang);
}

@media (min-width: 720px) {
  .rd-bac {
    gap: 18px;
  }

  .rd-bac__muc {
    padding: 6px;
    border-radius: 20px;
  }

  .rd-bac__mat {
    padding: 14px 12px 16px;
    border-radius: 14px;
  }

  .rd-bac__muc--1 {
    transform: translateY(-28px);
  }

  .rd-bac__hang {
    font-size: 12px;
  }

  .rd-bac__ten {
    font-size: 16px;
  }

  .rd-bac__sm {
    font-size: 18px;
  }

  .rd-bac__sm small {
    font-size: 12px;
  }
}

@media (min-width: 960px) {
  .rd-dai {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    align-items: center;
    gap: 56px;
    padding: 96px 0;
  }

  .rd-bac {
    padding-top: 28px;
  }
}

/* Chon hanh tinh */
.rd-tabs {
  display: inline-flex;
  max-width: 100%;
  padding: 4px;
  overflow-x: auto;
  border-radius: 14px;
  background: var(--man);
  box-shadow: inset 0 0 0 1px var(--luoi);
  gap: 4px;
  scrollbar-width: none;
}

.rd-tabs::-webkit-scrollbar {
  display: none;
}

.rd-tab {
  display: inline-flex;
  flex: 1 0 auto;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muc-phu);
  font-family: var(--font-chu);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .18s, color .18s, box-shadow .18s;
}

.rd-tab:hover {
  color: var(--muc);
}

.rd-tab[aria-selected="true"],
.rd-tab[aria-current="page"] {
  background: #fff;
  box-shadow: 0 1px 0 rgba(42, 11, 16, .08), 0 4px 12px -6px rgba(42, 11, 16, .4);
  color: var(--do);
  font-weight: 700;
}

.rd-tab__cham {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--mau, var(--do));
  opacity: .45;
  transition: opacity .18s, transform .18s var(--nay);
}

.rd-tab[aria-selected="true"] .rd-tab__cham {
  opacity: 1;
  transform: scale(1.15);
}

.rd-tabs--day {
  display: flex;
  width: 100%;
}

@media (min-width: 600px) {
  .rd-tabs--day {
    display: inline-flex;
    width: auto;
  }
}

.rd-ht {
  display: grid;
  gap: 20px;
}

.rd-ht[hidden] {
  display: none;
}

.rd-ht:not([hidden]) {
  animation: rd-hien .32s var(--muot);
}

@keyframes rd-hien {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

.rd-ht__anh {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 0 0 1px var(--luoi), 0 18px 36px -24px rgba(42, 11, 16, .6);
}

.rd-ht__chu h3 {
  margin: 0 0 6px;
  color: var(--muc);
  font-family: var(--font-tieu-de);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.2;
}

.rd-ht__chu > p {
  margin: 0 0 16px;
  color: var(--muc-phu);
}

.rd-chieu {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 16px;
}

.rd-chieu figure {
  margin: 0;
}

.rd-chieu img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  background: var(--muc);
  box-shadow: 0 0 0 1px var(--luoi);
  image-rendering: pixelated;
}

.rd-chieu figcaption {
  padding-top: 6px;
  color: var(--muc-phu);
  font-size: 14px;
  font-weight: 600;
}

.rd-lien-ket {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--do-sang);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: rgba(163, 23, 43, .35);
  text-underline-offset: 5px;
  transition: color .15s, text-decoration-color .15s;
}

.rd-lien-ket:hover,
.rd-lien-ket:focus {
  color: var(--do-dam);
  text-decoration-color: currentColor;
}

@media (min-width: 960px) {
  .rd-ht {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    align-items: center;
    gap: 40px;
  }
}

/* Huong dan dieu khien: ba o chung mot tam ke luoi */
.rd-dk {
  display: grid;
  gap: 1px;
  margin: 4px 0 4px;
  overflow: hidden;
  border-radius: 14px;
  background: var(--luoi);
  box-shadow: 0 0 0 1px var(--luoi);
}

.rd-dk > div {
  padding: 16px;
  background: var(--man);
  color: var(--muc-phu);
  font-size: 15px;
}

.rd-dk strong {
  display: block;
  margin-bottom: 4px;
  color: var(--muc);
  font-weight: 700;
}

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

/* ---------- Muc gap mo: mot danh sach lien, cac dong chung vien ---------- */
.cc-muc {
  margin: 0;
  background: #fff;
  box-shadow: 0 0 0 1px var(--luoi);
}

.cc-muc + .cc-muc {
  margin-top: 1px;
}

.cc-muc:first-of-type {
  border-top-left-radius: var(--bo);
  border-top-right-radius: var(--bo);
}

.cc-muc:last-of-type {
  border-bottom-right-radius: var(--bo);
  border-bottom-left-radius: var(--bo);
}

.cc-muc > summary {
  position: relative;
  display: block;
  padding: 18px 60px 18px 20px;
  border-radius: inherit;
  color: var(--muc);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
  transition: background-color .15s;
}

.cc-muc > summary::-webkit-details-marker {
  display: none;
}

.cc-muc > summary:hover {
  background: #FFFBF4;
}

.cc-muc > summary:focus-visible {
  outline-offset: -3px;
}

/* Dau cong xoay thanh dau tru khi mo */
.cc-muc > summary::before,
.cc-muc > summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 22px;
  width: 16px;
  height: 2px;
  margin-top: -1px;
  border-radius: 2px;
  background: var(--muc);
  transition: transform .25s var(--muot), background-color .2s;
}

.cc-muc > summary::after {
  transform: rotate(90deg);
}

.cc-muc[open] > summary::after {
  transform: rotate(0deg);
}

.cc-muc[open] > summary::before,
.cc-muc[open] > summary::after {
  background: var(--do-sang);
}

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

/* Khoang duoi dat bang padding cua the details: margin cua con cuoi se lot ra ngoai va tach roi danh sach */
.cc-muc[open] {
  padding-bottom: 20px;
}

.cc-muc > :last-child {
  margin-bottom: 0;
}

.cc-muc > ul,
.cc-muc > p {
  margin-top: 4px;
  margin-bottom: 14px;
  color: #4A2E33;
}

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

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

.cc-muc li::marker {
  color: var(--do-sang);
}

.cc-muc b {
  color: var(--muc);
  font-weight: 700;
}

.cc-muc h2,
.rd-trang .cc-muc h2 {
  margin-top: 22px;
  margin-bottom: 8px;
  color: var(--muc);
  font-family: var(--font-tieu-de);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
}

.cc-muc > h2:first-of-type {
  margin-top: 6px;
}

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

/* Mo dong muot tren trinh duyet ho tro chuyen dong toi chieu cao tu dong */
@supports (interpolate-size: allow-keywords) {
  .cc-muc {
    interpolate-size: allow-keywords;
  }

  .cc-muc::details-content {
    height: 0;
    overflow: clip;
    transition: height .3s var(--muot), content-visibility .3s allow-discrete;
  }

  .cc-muc[open]::details-content {
    height: auto;
  }
}

.cc-intro {
  max-width: 60ch;
  margin: 8px 0 24px;
  color: var(--muc-phu);
}

.cc-gif {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
}

.cc-gif figure {
  flex: 0 1 160px;
  margin: 0;
  color: var(--muc-phu);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
}

.cc-gif img {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 6px;
  border-radius: 12px;
  background: var(--muc);
  image-rendering: pixelated;
}

/* Trang co che game: tieu de cu nam ngay trong the main.cc */
.cc > h1 {
  margin: 0;
  color: var(--muc);
  font-family: var(--font-tieu-de);
  font-size: clamp(30px, 2.4vw + 18px, 44px);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.08;
}

/* ---------- Bang ---------- */
.rd-bang,
.rd-trang .table {
  --bs-table-bg: transparent;
  --bs-table-accent-bg: transparent;
  --bs-table-striped-bg: transparent;
  --bs-table-hover-bg: #FBF6F2;
  width: 100%;
  margin-bottom: 0;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--muc);
  font-size: 15px;
}

.rd-bang th,
.rd-trang .table thead th {
  padding: 10px 14px;
  border: 0;
  border-bottom: 1px solid var(--luoi) !important;
  background: var(--man);
  color: var(--muc-phu);
  font-size: 13px;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
}

.rd-bang th:first-child,
.rd-trang .table thead th:first-child {
  border-top-left-radius: 12px;
}

.rd-bang th:last-child,
.rd-trang .table thead th:last-child {
  border-top-right-radius: 12px;
}

.rd-bang td,
.rd-trang .table td {
  padding: 12px 14px;
  border: 0;
  border-bottom: 1px solid var(--luoi) !important;
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
}

/* Bang du lieu khong ngat dong giua so va ngay: man hinh hep thi cuon ngang trong .table-responsive */
.rd-bang td {
  white-space: nowrap;
}

.rd-bang tbody tr:last-child td {
  border-bottom: 0 !important;
}

.rd-bang tbody tr {
  transition: background-color .12s;
}

.rd-bang tbody tr:hover {
  background: #FBF6F2;
}

.rd-bang .rd-so {
  text-align: right;
}

.rd-bang th.rd-so {
  text-align: right;
}

.rd-bang__trong {
  padding: 32px 14px !important;
  color: var(--muc-phu);
  text-align: center !important;
}

.rd-trang .cc-bang {
  font-size: 14px;
  line-height: 1.5;
}

.rd-trang .cc-bang td {
  vertical-align: top;
}

.rd-trang .cc-bang td:first-child {
  color: var(--muc);
  font-weight: 700;
}

.rd-trang .cc-bang td:not(:first-child) {
  min-width: 112px;
}

.rd-trang .table-responsive {
  border-radius: 12px;
}

/* Huy hieu hang 1, 2, 3 */
.rd-hang {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--muc-phu);
  font-family: var(--font-tieu-de);
  font-size: 15px;
  font-weight: 700;
}

.rd-hang--1 {
  background: var(--foil);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 4px 10px -4px rgba(150, 82, 0, .6);
  color: var(--muc);
}

.rd-hang--2 {
  background: var(--foil-bac);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 4px 10px -4px rgba(60, 66, 80, .5);
  color: var(--muc);
}

.rd-hang--3 {
  background: var(--foil-dong);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 4px 10px -4px rgba(120, 60, 20, .55);
  color: #fff;
}

.rd-bang tr.rd-dong--1 {
  background: #FFF7EA;
}

.rd-bang tr.rd-dong--1:hover {
  background: #FFF1DC;
}

.rd-bang .rd-ten {
  font-weight: 600;
}

.rd-bang .rd-mo {
  color: var(--muc-phu);
  font-size: 13px;
  font-weight: 500;
}

.rd-bang .rd-lon {
  font-family: var(--font-tieu-de);
  font-size: 16px;
  font-weight: 600;
}

.rd-trang-thai {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.rd-trang-thai::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.rd-trang-thai--xong {
  background: var(--la-nhat);
  color: #17704A;
}

.rd-trang-thai--cho {
  background: var(--ngoc-nhat);
  color: var(--ngoc-dam);
}

.rd-trang-thai--loi {
  background: #FCE4E2;
  color: #B21E17;
}

/* ---------- O nhap ---------- */
.rd-form {
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
}

.rd-o {
  margin-bottom: 16px;
}

.rd-o__nhan {
  display: block;
  margin-bottom: 6px;
  color: var(--muc);
  font-size: 14px;
  font-weight: 700;
}

.rd-o__phu {
  display: block;
  margin-top: 6px;
  color: var(--muc-phu);
  font-size: 13.5px;
  line-height: 1.4;
}

.rd-nhap,
.rd-trang .form-control,
.rd-trang .form-select,
.rd-trang select.form-control {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 0 16px;
  border: 1.5px solid var(--luoi-dam);
  border-radius: var(--bo-nho);
  background-color: #fff;
  color: var(--muc);
  font-family: var(--font-chu);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
  transition: border-color .15s, box-shadow .15s, background-color .15s;
  -webkit-appearance: none;
  appearance: none;
}

select.rd-nhap,
.rd-trang select.form-control,
.rd-trang .form-select {
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232A0B10'%3E%3Cpath d='M7 9.5 12 14.5 17 9.5z'/%3E%3C/svg%3E");
  background-position: right 12px center;
  background-repeat: no-repeat;
  background-size: 24px;
}

.rd-nhap::placeholder,
.rd-trang .form-control::placeholder {
  color: #8E7378;
  font-weight: 400;
}

.rd-nhap:hover,
.rd-trang .form-control:hover {
  border-color: #B39C97;
}

.rd-nhap:focus,
.rd-trang .form-control:focus,
.rd-trang .form-select:focus {
  border-color: var(--do);
  outline: none;
  box-shadow: 0 0 0 4px rgba(242, 182, 48, .35);
}

.rd-nhap[readonly],
.rd-trang .form-control[readonly] {
  background-color: var(--man);
  color: var(--muc-phu);
}

/* O mat khau co nut hien/an */
.rd-mk {
  position: relative;
}

.rd-mk .rd-nhap {
  padding-right: 54px;
}

.rd-mk__nut {
  position: absolute;
  top: 50%;
  right: 6px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muc-phu);
  cursor: pointer;
  transform: translateY(-50%);
}

.rd-mk__nut:hover {
  background: var(--man);
  color: var(--muc);
}

.rd-mk__nut .rd-i--an,
.rd-mk__nut[aria-pressed="true"] .rd-i--hien {
  display: none;
}

.rd-mk__nut[aria-pressed="true"] .rd-i--an {
  display: block;
}

/* Ma CAPTCHA: o nhap, anh, nut doi ma */
.rd-captcha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
}

.rd-captcha img {
  display: block;
  width: auto;
  height: 52px;
  border-radius: var(--bo-nho);
  box-shadow: 0 0 0 1.5px var(--luoi-dam);
  cursor: pointer;
}

/* Man hinh hep: o nhap mot hang rieng, anh va nut doi ma o hang duoi */
@media (max-width: 419px) {
  .rd-captcha {
    grid-template-columns: auto auto;
    justify-content: start;
  }

  .rd-captcha .rd-nhap {
    grid-column: 1 / -1;
  }
}

.rd-captcha__doi {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 0;
  border-radius: var(--bo-nho);
  background: var(--man);
  box-shadow: inset 0 0 0 1px var(--luoi);
  color: var(--muc);
  cursor: pointer;
  transition: background-color .15s;
}

.rd-captcha__doi:hover {
  background: var(--man-dam);
}

.rd-captcha__doi .rd-i {
  transition: transform .4s var(--muot);
}

.rd-captcha__doi:active .rd-i {
  transform: rotate(-180deg);
}

.rd-form .rd-nut--chinh[type="submit"] {
  margin-top: 8px;
}

.rd-form__phu {
  margin: 20px 0 0;
  color: var(--muc-phu);
  font-size: 15px;
  text-align: center;
}

.rd-form__phu a,
.rd-trang .rd-form__phu a {
  color: var(--do-sang);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.rd-bao {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: var(--bo-nho);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.45;
}

.rd-bao--loi {
  background: #FCE4E2;
  color: #9B1A14;
}

.rd-bao--xong {
  background: var(--la-nhat);
  color: #145F3F;
}

/* ---------- Trang nhan vat ---------- */
.rd-nv {
  display: grid;
  gap: 16px;
}

.rd-nv__dau {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
}

.rd-nv__dau > .rd-nut {
  grid-column: 1 / -1;
}

.rd-nv__dau > img {
  width: 76px;
  height: 76px;
  border-radius: 20px;
  background: var(--man);
  box-shadow: inset 0 0 0 1px var(--luoi);
  object-fit: contain;
}

.rd-nv__ten {
  margin: 0;
  overflow: hidden;
  color: var(--muc);
  font-family: var(--font-tieu-de);
  font-size: clamp(24px, 2vw + 16px, 32px);
  font-weight: 700;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rd-nv__phu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-top: 8px;
  color: var(--muc-phu);
  font-size: 14px;
}

.rd-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--man);
  color: var(--muc);
  font-size: 13px;
  font-weight: 700;
}

.rd-chip::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mau, var(--ngoc));
}

/* Luoi o chi so: cac o chung duong ke, khong tach the */
.rd-luoi-so {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  overflow: hidden;
  border-radius: 16px;
  background: var(--luoi);
  box-shadow: 0 0 0 1px var(--luoi);
}

.rd-luoi-so > div {
  min-width: 0;
  padding: 14px 16px;
  background: #fff;
}

.rd-luoi-so dt {
  color: var(--muc-phu);
  font-size: 13.5px;
  font-weight: 600;
}

.rd-luoi-so dd {
  margin: 2px 0 0;
  color: var(--muc);
  font-family: var(--font-tieu-de);
  font-size: 18px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

/* Luoi 3 o (tai khoan) xep doc tren dien thoai de khong con o trong */
.rd-luoi-so--3 {
  grid-template-columns: minmax(0, 1fr);
}

.rd-luoi-so .rd-luoi-so__noi dd {
  color: var(--ngoc-dam);
  font-family: var(--font-tieu-de);
  font-size: 24px;
}

.rd-luoi-so > .rd-luoi-so__doi {
  grid-column: span 2;
}

.rd-luoi-so--chu dd {
  font-family: var(--font-chu);
  font-size: 16px;
  font-weight: 700;
}

.rd-luoi-so > .rd-luoi-so__rong {
  grid-column: 1 / -1;
}

@media (min-width: 720px) {
  .rd-nv__dau {
    grid-template-columns: 96px minmax(0, 1fr) auto;
    gap: 20px;
  }

  .rd-nv__dau > img {
    width: 96px;
    height: 96px;
    border-radius: 24px;
  }

  .rd-nv__dau > .rd-nut {
    grid-column: auto;
  }

  .rd-luoi-so dd {
    font-size: 20px;
  }

  .rd-luoi-so--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .rd-luoi-so--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.rd-ghi {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0 0;
  color: var(--muc-phu);
  font-size: 14px;
}

.rd-ghi .rd-i {
  width: 18px;
  height: 18px;
}

/* ---------- Nap coin ---------- */
.rd-cach {
  margin-bottom: 20px;
}

.rd-cach .rd-tab {
  text-decoration: none;
}

.rd-cach .rd-tab:hover,
.rd-cach .rd-tab:focus {
  color: var(--muc);
}

.rd-tab .rd-i {
  width: 20px;
  height: 20px;
}

.rd-ck {
  display: grid;
  gap: 24px;
}

.rd-ck__qr {
  justify-self: center;
  width: 220px;
  padding: 12px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--luoi), var(--bong);
  text-align: center;
}

.rd-ck__qr img {
  display: block;
  width: 100%;
  height: auto;
}

.rd-ck__qr span {
  display: block;
  margin-top: 8px;
  color: var(--muc-phu);
  font-size: 13px;
  font-weight: 600;
}

.rd-ck dl {
  display: grid;
  gap: 1px;
  margin: 0;
  overflow: hidden;
  border-radius: 16px;
  background: var(--luoi);
  box-shadow: 0 0 0 1px var(--luoi);
}

.rd-ck dl > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px 12px;
  padding: 12px 14px;
  background: #fff;
}

.rd-ck dt {
  grid-column: 1;
  color: var(--muc-phu);
  font-size: 13.5px;
  font-weight: 600;
}

.rd-ck dd {
  grid-column: 1;
  margin: 0;
  color: var(--muc);
  font-size: 17px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.rd-ck dd.rd-ck__noi {
  color: var(--ngoc-dam);
  font-family: var(--font-tieu-de);
  font-size: 20px;
}

.rd-ck .rd-chep {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.rd-chep {
  min-width: 84px;
}

.rd-chep[data-da-chep] {
  background: var(--la-nhat);
  box-shadow: inset 0 0 0 1.5px var(--la);
  color: #145F3F;
}

.rd-ds-ghi {
  margin: 20px 0 0;
  padding: 16px 16px 16px 36px;
  border-radius: 16px;
  background: var(--ngoc-nhat);
  color: #5A2E06;
  font-size: 15px;
}

.rd-ds-ghi li + li {
  margin-top: 6px;
}

.rd-ds-ghi li::marker {
  color: var(--ngoc-dam);
}

@media (min-width: 720px) {
  .rd-ck {
    grid-template-columns: 220px minmax(0, 1fr);
    align-items: start;
    gap: 32px;
  }
}

.rd-the {
  display: grid;
  gap: 0 16px;
}

@media (min-width: 720px) {
  .rd-the {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rd-the .rd-o--rong {
    grid-column: 1 / -1;
  }
}

#status:empty {
  display: none;
}

#status {
  margin-top: 12px;
  text-align: center;
}

/* ---------- Bao tri va can dang nhap ---------- */
/* Tam thong bao gac len mot dai do ngan, giong trang con co tieu de */
.baotri-khung::before {
  top: -120px;
  height: 260px;
}

.baotri-khung {
  position: relative;
  max-width: 560px;
  margin: 0 auto;
  padding: 36px 22px;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--luoi), var(--bong);
  text-align: center;
}

.baotri-hinh {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin: 0 auto 18px;
  border-radius: 22px;
  background: var(--man);
  box-shadow: inset 0 0 0 1px var(--luoi);
  color: var(--muc);
}

.baotri-hinh .rd-i {
  width: 34px;
  height: 34px;
}

.baotri-nhan {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 4px 12px;
  border-radius: 999px;
  background: #FCE4E2;
  color: #9B1A14;
  font-size: 13.5px;
  font-weight: 700;
}

.baotri-nhan::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sao);
}

.baotri-dau h1,
.rd-trang .baotri-dau h1 {
  margin: 0;
  color: var(--muc);
  font-family: var(--font-tieu-de);
  font-size: clamp(26px, 2vw + 16px, 34px);
  font-weight: 700;
  line-height: 1.12;
  text-wrap: balance;
}

.baotri-than p {
  max-width: 40ch;
  margin: 10px auto 24px;
  color: var(--muc-phu);
  font-size: 16.5px;
}

.baotri-ve,
.rd-trang a.baotri-ve {
  display: inline-block;
  margin-top: 16px;
  color: var(--muc-phu);
  font-size: 15px;
  font-weight: 600;
}

/* ---------- Hop tai game ---------- */
.rd-tai {
  width: min(100% - 24px, 500px);
  max-height: calc(100% - 32px);
  padding: 0;
  overflow: auto;
  border: 0;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(42, 11, 16, .12), 0 40px 80px -30px rgba(20, 0, 4, .8);
  color: var(--muc);
}

.rd-tai::backdrop {
  background: rgba(30, 2, 8, .6);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.rd-tai[open] {
  animation: rd-mo-hop .26s var(--muot);
}

.rd-tai[open]::backdrop {
  animation: rd-mo-nen .26s ease-out;
}

@keyframes rd-mo-hop {
  from {
    opacity: 0;
    transform: translateY(12px) scale(.98);
  }
}

@keyframes rd-mo-nen {
  from {
    opacity: 0;
  }
}

/* Dau hop la dai do lung the, danh sach ban tai nam tren giay trang */
.rd-tai__dau {
  position: relative;
  padding: 24px 64px 22px 24px;
  background: var(--nen-do);
  color: #fff;
}

.rd-tai__dau h2 {
  margin: 0;
  color: #fff;
  font-family: var(--font-tieu-de);
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.2;
}

.rd-tai__dau p {
  margin: 6px 0 0;
  color: var(--chu-sang);
  font-size: 15px;
}

.rd-tai__dong {
  position: absolute;
  top: 16px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  cursor: pointer;
  transition: background-color .15s, transform .2s var(--muot);
}

.rd-tai__dong:hover {
  background: rgba(255, 255, 255, .2);
  transform: rotate(90deg);
}

.rd-tai__dong:focus-visible {
  outline-color: var(--kim-sang);
}

.rd-tai__ds {
  margin: 20px 24px 24px;
  padding: 0;
  overflow: hidden;
  border-radius: 18px;
  box-shadow: 0 0 0 1px var(--luoi);
  list-style: none;
}

.rd-tai__ds li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px 14px;
  padding: 14px;
}

.rd-tai__ds li + li {
  border-top: 1px solid var(--luoi);
}

.rd-tai__i {
  display: grid;
  grid-row: span 2;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #FBE3E5;
  color: var(--do);
  font-size: 22px;
}

.rd-tai__ds strong {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
}

.rd-tai__ds small {
  grid-column: 2;
  color: var(--muc-phu);
  font-size: 13.5px;
  line-height: 1.35;
}

.rd-tai__ds .rd-nut {
  grid-column: 3;
  grid-row: 1 / span 2;
}

.rd-tai__them {
  grid-column: 2 / -1;
  justify-self: start;
  margin-top: 8px;
}

.rd-tai__bt {
  padding: 8px 24px 28px;
  text-align: center;
}

.rd-tai__bt p {
  margin: 8px 0 20px;
  color: var(--muc-phu);
}

/* Dien thoai: hop mo len tu duoi nhu mot tam the */
@media (max-width: 599px) {
  .rd-tai {
    width: 100%;
    max-width: 100%;
    margin: auto 0 0;
    border-radius: 24px 24px 0 0;
    padding-bottom: env(safe-area-inset-bottom);
  }

  .rd-tai[open] {
    animation-name: rd-mo-the;
  }

  @keyframes rd-mo-the {
    from {
      transform: translateY(100%);
    }
  }
}

/* ---------- Chan trang ---------- */
/* Dien thoai: chua cho thanh duoi day man hinh ngay trong nen toi cua chan trang */
.rd-chan {
  margin-top: 72px;
  padding: 40px 0 calc(32px + var(--cao-thanh) + env(safe-area-inset-bottom));
  background: var(--hoa-van) center top / 44px 44px, var(--do-sau);
  color: var(--chu-sang);
  font-size: 14.5px;
}

.rd-chan__trong {
  display: grid;
  gap: 28px;
  width: min(100% - 32px, 1160px);
  margin-inline: auto;
}

.rd-chan__hieu img {
  display: block;
  width: 150px;
  height: auto;
  margin-bottom: 12px;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .4));
}

.rd-chan__hieu strong {
  display: block;
  color: #fff;
  font-family: var(--font-tieu-de);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.2;
}

.rd-chan__hieu p {
  margin: 6px 0 0;
}

.rd-chan nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.rd-chan h2 {
  margin: 0 0 8px;
  color: #fff;
  font-family: var(--font-chu);
  font-size: 15px;
  font-weight: 700;
}

.rd-chan ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.rd-chan li a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  color: var(--chu-sang);
  text-decoration: none;
  transition: color .15s;
}

.rd-chan li a:hover,
.rd-chan li a:focus {
  color: var(--ngoc-sang);
}

.rd-chan__cuoi {
  padding-top: 20px;
  border-top: 1px solid rgba(255, 214, 140, .14);
  color: #C9A9A6;
  font-size: 13.5px;
}

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

@media (min-width: 960px) {
  .rd-chan {
    margin-top: 112px;
    padding: 56px 0 36px;
  }

  .rd-chan__trong {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    column-gap: 64px;
  }

  .rd-chan__cuoi {
    grid-column: 1 / -1;
  }
}

/* ---------- Hop thoai SweetAlert ---------- */
.swal2-popup {
  border-radius: 24px !important;
  color: var(--muc) !important;
  font-family: var(--font-chu) !important;
}

.swal2-title {
  color: var(--muc) !important;
  font-family: var(--font-tieu-de) !important;
  font-weight: 700 !important;
}

.swal2-html-container {
  color: var(--muc-phu) !important;
}

.swal2-styled.swal2-confirm {
  min-height: 48px;
  padding: 0 28px !important;
  border: 0 !important;
  border-radius: var(--bo-nho) !important;
  background: var(--foil) !important;
  background-size: 220% 100% !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65), inset 0 -1px 0 rgba(110, 60, 0, .35), 0 10px 22px -12px rgba(150, 82, 0, .75) !important;
  color: var(--muc) !important;
  font-weight: 700 !important;
}

.swal2-styled.swal2-confirm:focus-visible {
  box-shadow: 0 0 0 3px var(--muc) !important;
}

/* ---------- Trang cu chua viet lai: dua ve cung chat lieu ----------
   Cac trang an khoi menu (doi thoi vang, shop, giftcode...) con ghi mau truc tiep trong the.
   Phan nay ghi de cac mau do de trang van dong bo voi giao dien moi. */
.rd-trang [style*="254, 217, 0"],
.rd-trang [style*="#fff6c4"],
.rd-trang [style*="#FFF6C4"],
.rd-trang [style*="#ffe967"] {
  margin-bottom: 16px !important;
  padding: 22px 18px !important;
  border: 0 !important;
  border-radius: 24px !important;
  background: #fff !important;
  box-shadow: 0 0 0 1px var(--luoi), var(--bong) !important;
}

.rd-trang [style*="254, 217, 0"] [style*="254, 217, 0"],
.rd-trang [style*="254, 217, 0"] .ibox-content,
.rd-trang .ibox-content .ibox-content,
.rd-trang .ibox-content[style*="0px 0px 5px black"] {
  margin: 0 !important;
  padding: 4px 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.rd-trang .ibox-content {
  background: transparent;
}

.rd-trang h1.text-white,
.rd-trang h5.text-white,
.rd-trang .h3.text-white,
.rd-trang .h4.text-white {
  margin-bottom: 18px !important;
  color: var(--muc) !important;
  font-family: var(--font-tieu-de);
  font-size: clamp(24px, 1.6vw + 16px, 32px) !important;
  font-weight: 700 !important;
  letter-spacing: -.01em;
  line-height: 1.15;
  text-align: center;
  text-shadow: none !important;
}

.rd-trang .text-white,
.rd-trang label.text-white {
  color: var(--muc-phu) !important;
  text-shadow: none !important;
}

.rd-trang .text-black {
  color: var(--muc) !important;
}

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

.rd-trang [style*="text-shadow"] {
  text-shadow: none !important;
}

.rd-trang .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 46px;
  padding: 0 20px;
  border: 0 !important;
  border-radius: var(--bo-nho) !important;
  font-family: var(--font-chu);
  font-weight: 700;
  text-shadow: none !important;
  transition: transform .18s var(--muot), filter .18s;
}

.rd-trang .btn:active {
  transform: translateY(1px);
}

.rd-trang .btn-dark,
.rd-trang .btn-action,
.rd-trang .btn-primary,
.rd-trang .btn-info1,
.rd-trang button.btn[type="submit"],
.rd-trang input.btn[type="submit"],
.rd-trang button[style*="#FFC531"] {
  background: var(--foil) !important;
  background-size: 220% 100% !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65), inset 0 -1px 0 rgba(110, 60, 0, .35), 0 10px 22px -12px rgba(150, 82, 0, .75) !important;
  color: var(--muc) !important;
}

.rd-trang .btn-dark:hover,
.rd-trang .btn-action:hover,
.rd-trang .btn-primary:hover,
.rd-trang button.btn[type="submit"]:hover {
  color: var(--muc) !important;
  filter: brightness(1.05);
}

.rd-trang button.btn[type="submit"] {
  height: auto !important;
  min-height: 52px;
  margin-top: 12px;
}

.rd-trang .btn-success {
  background: var(--la) !important;
  color: #fff !important;
}

.rd-trang .btn-danger {
  background: var(--sao) !important;
  color: #fff !important;
}

.rd-trang form.col-lg-5 {
  width: 100%;
  max-width: 460px;
  margin-inline: auto !important;
  padding: 4px 0 !important;
}

.rd-trang form.col-lg-5 .form-control + .form-control,
.rd-trang form.col-lg-5 div + .form-control {
  margin-top: 10px !important;
}

.rd-trang .form-control[style] {
  height: auto !important;
  min-height: 52px;
  border-radius: var(--bo-nho) !important;
  font-weight: 500 !important;
}

.rd-trang th[style*="#b8f9f1"],
.rd-trang tr[bgcolor] {
  border: 0 !important;
  border-bottom: 1px solid var(--luoi) !important;
  background: var(--man) !important;
  color: var(--muc-phu) !important;
  font-size: 13px;
  text-shadow: none !important;
}

.rd-trang td[style*="1px solid black"] {
  border: 0 !important;
  border-bottom: 1px solid var(--luoi) !important;
  background-color: transparent !important;
}

.rd-trang table[style*="border-collapse"] {
  font-size: 14px;
}

.rd-trang .table-custom td,
.rd-trang .table-custom th {
  border-left: 0 !important;
  border-right: 0 !important;
}

.rd-trang [style*="254, 217, 0"] a:not([class]),
.rd-trang .ibox-content a:not([class]) {
  color: var(--do-sang);
  font-weight: 600;
}

.rd-trang .row1 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0 0 10px;
  padding: 0;
}

.rd-trang .row1 > .announcement {
  flex: 1 1 150px;
  width: auto;
  max-width: 200px;
  margin: 0;
  padding: 10px;
  border: 0;
  border-radius: 16px;
  background: var(--man);
  box-shadow: inset 0 0 0 1px var(--luoi);
  font-size: 14px;
  line-height: 1.35;
  transition: box-shadow .15s, transform .2s var(--muot);
}

.rd-trang .row1 > .announcement:hover {
  box-shadow: inset 0 0 0 1.5px var(--do);
  transform: translateY(-2px);
}

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

.rd-trang .announcement:not(button) {
  border: 0;
  border-radius: 18px;
  background-color: var(--man);
  box-shadow: inset 0 0 0 1px var(--luoi);
  color: var(--muc);
}

.rd-trang .ent-info,
.rd-trang .announcement-info {
  border: 0;
  border-radius: 14px;
}

.rd-trang .badge {
  border-radius: 999px;
}

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

/* ---------- Giam chuyen dong ---------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}