/* Giao dien "Radar rong" cua Ngoc Rong Royal.
   Website lam viec nhu chiec radar do ngoc: man hinh sang mau xanh xam, ke o luoi mo, de tim moi thu cho nhanh.
   Tranh chinh dong khung trong mot o duy nhat; vien ngoc cam la mau nong duy nhat va danh dau hanh dong chinh.
   Cac o noi dung ngan nhau bang duong ke luoi 1px chu khong tach thanh nhieu the noi.
   Chuyen dong chu dong chi co mot lan: radar quet mot vong khi mo trang chu va bay vien ngoc hien len. */

:root {
  --man: #E9EFE6;
  --man-dam: #DCE5D8;
  --trang: #FFFFFF;
  --muc: #10261D;
  --muc-2: #1A3A2D;
  --muc-phu: #4A5F55;
  --chu-sang: #C9DCD1;
  --luoi: #D3DECF;
  --luoi-dam: #B3C4AE;
  --ngoc: #FF9214;
  --ngoc-sang: #FFB547;
  --ngoc-dam: #B84600;
  --ngoc-nhat: #FFF1DD;
  --sao: #D7261E;
  --la: #1F8F5F;
  --la-nhat: #DDF2E6;
  --radar: #3DDC97;
  --trai-dat: #2456C7;
  --namec: #1F8F5F;
  --xayda: #D7261E;
  --font-tieu-de: "Chakra Petch", "Be Vietnam Pro", system-ui, sans-serif;
  --font-chu: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bo-lon: 28px;
  --bo: 20px;
  --bo-nho: 12px;
  --cao-thanh: 64px;
  --bong: 0 1px 0 rgba(16, 38, 29, .04), 0 14px 34px -18px rgba(16, 38, 29, .28);
  --bong-lon: 0 2px 0 rgba(16, 38, 29, .05), 0 30px 60px -28px rgba(16, 38, 29, .45);
  --muot: cubic-bezier(.2, .8, .2, 1);
  --nay: cubic-bezier(.3, 1.5, .5, 1);
}

/* ---------- Nen tang ---------- */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
}

body#cssweb {
  min-height: 100vh;
  margin: 0;
  padding-bottom: 0;
  background-color: var(--man);
  background-image:
    linear-gradient(rgba(16, 38, 29, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16, 38, 29, .045) 1px, transparent 1px);
  background-position: center top;
  background-size: 28px 28px;
  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(--ngoc-sang);
  color: var(--muc);
}

a,
button,
summary {
  -webkit-tap-highlight-color: rgba(255, 146, 20, .25);
}

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

.rd-toi :focus-visible {
  outline-color: var(--ngoc-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(--muc);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform .2s var(--muot);
}

.rd-bo-qua:focus {
  color: #fff;
  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 ---------- */
.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;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .18s var(--muot), box-shadow .18s var(--muot), background-color .18s, color .18s, filter .18s;
}

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

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

/* Nut chinh mang mau vien ngoc, chu muc dam de doc ro tren nen cam */
.rd-nut--chinh {
  background: linear-gradient(180deg, #FFAA3D, var(--ngoc));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -2px 0 rgba(184, 70, 0, .35), 0 2px 0 #C45A00, 0 10px 22px -10px rgba(226, 100, 0, .7);
  color: var(--muc);
}

.rd-nut--chinh:hover,
.rd-nut--chinh:focus {
  color: var(--muc);
  filter: brightness(1.05) saturate(1.05);
}

.rd-nut--chinh:active {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 -1px 0 rgba(184, 70, 0, .35), 0 1px 0 #C45A00, 0 4px 10px -6px rgba(226, 100, 0, .7);
}

.rd-nut--toi {
  background: var(--muc);
  box-shadow: 0 2px 0 #050F0B;
  color: #fff;
}

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

.rd-nut--vien {
  background: rgba(255, 255, 255, .6);
  box-shadow: inset 0 0 0 1.5px var(--muc);
  color: var(--muc);
}

.rd-nut--vien:hover,
.rd-nut--vien:focus {
  background: #fff;
  color: var(--muc);
}

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

.rd-toi .rd-nut--vien:hover,
.rd-toi .rd-nut--vien:focus {
  background: rgba(255, 255, 255, .1);
  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(16, 38, 29, .07);
  color: var(--muc);
}

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

.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 ---------- */
.rd-dau {
  position: sticky;
  z-index: 1030;
  top: 0;
  border-bottom: 1px solid transparent;
  background: rgba(233, 239, 230, .86);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  transition: border-color .2s, box-shadow .2s;
}

.rd-dau--cuon {
  border-bottom-color: var(--luoi);
  box-shadow: 0 10px 24px -20px rgba(16, 38, 29, .55);
}

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

.rd-logo {
  display: block;
  flex: none;
  border-radius: 8px;
}

.rd-logo img {
  display: block;
  width: auto;
  height: 46px;
}

.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: #fff;
  box-shadow: inset 0 0 0 1px var(--luoi);
  color: var(--muc);
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}

.rd-so-du:hover,
.rd-so-du:focus {
  color: var(--muc);
}

.rd-so-du img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--man);
  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(--muc-phu);
    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(16, 38, 29, .06);
    color: var(--muc);
  }

  /* Muc dang mo: dau cham ngoc ben duoi nhu diem sang tren radar */
  .rd-menu a[aria-current="page"] {
    color: var(--muc);
  }

  .rd-menu a[aria-current="page"]::after {
    content: "";
    position: absolute;
    bottom: 3px;
    left: 50%;
    width: 6px;
    height: 6px;
    margin-left: -3px;
    border-radius: 50%;
    background: var(--ngoc);
    box-shadow: 0 0 0 3px rgba(255, 146, 20, .22);
  }

  .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(215, 38, 30, .18);
}

/* ---------- 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 12px 0 6px;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--luoi);
  color: var(--muc);
  font-size: 15px;
  font-weight: 700;
  transition: box-shadow .15s;
}

.rd-tk__nut:hover {
  box-shadow: inset 0 0 0 1px var(--luoi-dam), 0 4px 12px -8px rgba(16, 38, 29, .5);
}

.rd-tk__nut img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--man);
  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);
  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__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(--man);
  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(--muc-phu);
  font-size: 14px;
  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(--sao);
}

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

/* ---------- 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 -10px 30px -22px rgba(16, 38, 29, .5);
}

.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(--muc);
}

.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(--muc);
  font-weight: 700;
}

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

/* 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 8px 18px -6px rgba(226, 100, 0, .65);
  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 {
  display: block;
  min-height: 60vh;
}

.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;
  }
}

/* Tieu de trang con */
.rd-tieude {
  margin-bottom: 24px;
}

.rd-tieude h1,
.rd-trang .rd-tieude 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;
  text-wrap: balance;
}

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

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

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

/* Tam noi dung trang */
.rd-hop {
  padding: 22px 18px;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--luoi), 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 4px;
  color: var(--muc);
  font-family: var(--font-tieu-de);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.005em;
  line-height: 1.2;
}

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

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

/* ---------- Trang chu: hero ---------- */
.rd-hero {
  display: grid;
  gap: 28px;
  padding: 14px 0 0;
}

.rd-hero__tranh {
  position: relative;
  order: -1;
  margin: 0;
}

.rd-hero__khung {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / .96;
  border-radius: 24px;
  background: #E7A0DC;
  box-shadow: 0 0 0 1px rgba(16, 38, 29, .1), var(--bong-lon);
}

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

.rd-hero__khung img {
  object-fit: cover;
  object-position: 50% 30%;
}

/* Logo dat len tranh nhu tren mot tam ap phich */
.rd-hero__logo {
  position: absolute;
  z-index: 2;
  top: 3%;
  left: 50%;
  width: min(64%, 360px);
  transform: translateX(-50%);
  filter: drop-shadow(0 8px 16px rgba(60, 10, 70, .35));
}

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

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

.rd-hero h1 {
  margin: 0 0 14px;
  color: var(--muc);
  font-family: var(--font-tieu-de);
  font-size: clamp(34px, 3.6vw + 20px, 64px);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.02;
  text-wrap: balance;
}

.rd-hero__mo {
  max-width: 42ch;
  margin: 0 0 24px;
  color: var(--muc-phu);
  font-size: 17px;
  line-height: 1.55;
}

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

.rd-hero__nut .rd-nut {
  min-height: 56px;
  padding-inline: 10px;
  font-size: 17px;
}

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

.rd-hero__phu a {
  color: var(--ngoc-dam);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

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

.rd-hero__bt {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 0;
  color: var(--muc-phu);
  font-size: 14px;
  line-height: 1.4;
}

.rd-nentang {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 20px 0 0;
  padding: 0;
  color: var(--muc-phu);
  font-size: 14px;
  font-weight: 500;
  list-style: none;
}

.rd-nentang li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.rd-nentang .fa {
  color: var(--muc);
  font-size: 18px;
}

@media (min-width: 600px) {
  .rd-hero__khung {
    aspect-ratio: 16 / 11;
  }

  .rd-hero__nut {
    display: flex;
    flex-wrap: wrap;
  }

  .rd-hero__nut .rd-nut {
    padding-inline: 28px;
    font-size: 18px;
  }
}

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

  .rd-hero__tranh {
    order: 0;
  }

  .rd-hero__khung {
    aspect-ratio: 7 / 6;
    border-radius: var(--bo-lon);
  }

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

@media (min-width: 1200px) {
  .rd-hero__khung {
    aspect-ratio: 4 / 3;
  }
}

/* ---------- Radar: thiet bi tim ngoc, khoanh tron chong len goc tranh ---------- */
.rd-radar {
  position: absolute;
  z-index: 3;
  right: 10px;
  bottom: -30px;
  width: clamp(112px, 31%, 220px);
  aspect-ratio: 1;
  padding: 7%;
  border-radius: 50%;
  background: linear-gradient(155deg, #FFFFFF 10%, #D3DDD0 90%);
  box-shadow: 0 0 0 1px rgba(16, 38, 29, .14), inset 0 -4px 8px rgba(16, 38, 29, .14), inset 0 3px 2px #fff, 0 22px 40px -16px rgba(16, 38, 29, .7);
}

/* Nut bam tren dinh radar */
.rd-radar::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -6%;
  left: 50%;
  width: 18%;
  height: 12%;
  border-radius: 7px 7px 3px 3px;
  background: linear-gradient(180deg, #fff, #C9D4C6);
  box-shadow: 0 0 0 1px rgba(16, 38, 29, .16);
  transform: translateX(-50%);
}

.rd-radar__man {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, #1F5440, #0D261C 72%);
  box-shadow: inset 0 0 0 2px #0A1E16, inset 0 6px 14px rgba(0, 0, 0, .45);
}

.rd-radar__luoi {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.rd-radar__quet {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(61, 220, 151, 0) 0deg 285deg, rgba(61, 220, 151, .38) 356deg, rgba(190, 255, 225, .95) 360deg);
  opacity: .32;
}

.rd-radar__ngoc {
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: 16%;
  height: 16%;
  filter: drop-shadow(0 0 5px rgba(255, 170, 60, .85));
  transform: translate(-50%, -50%);
}

.rd-radar__ngoc .rd-ngoc {
  width: 100%;
  height: 100%;
}

/* Tam radar: vi tri cua ban */
.rd-radar__ban {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-right: 5px solid transparent;
  border-bottom: 9px solid #E8FFF4;
  border-left: 5px solid transparent;
  transform: translate(-50%, -60%);
}

@media (min-width: 960px) {
  .rd-radar {
    right: auto;
    bottom: -44px;
    left: -60px;
    width: clamp(160px, 30%, 224px);
  }
}

/* Nhip mo man duy nhat: radar quet mot vong, ngoc sang len dung luc vach quet di qua */
@media (prefers-reduced-motion: no-preference) {
  .rd-radar__quet {
    animation: rd-quet 2.4s linear .35s 1 both, rd-quet-mo .6s ease-out 2.75s 1 both;
  }

  .rd-radar__ngoc {
    animation: rd-blip .5s var(--nay) var(--tre) 1 both;
  }

  @keyframes rd-quet {
    from {
      opacity: 1;
      transform: rotate(0deg);
    }

    to {
      opacity: 1;
      transform: rotate(360deg);
    }
  }

  @keyframes rd-quet-mo {
    from {
      opacity: 1;
    }

    to {
      opacity: .32;
    }
  }

  @keyframes rd-blip {
    from {
      opacity: 0;
      transform: translate(-50%, -50%) scale(.2);
    }
  }
}

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

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

.rd-vung h2 {
  margin: 0;
  color: var(--muc);
  font-family: var(--font-tieu-de);
  font-size: clamp(27px, 1.8vw + 18px, 40px);
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.08;
  text-wrap: balance;
}

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

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

/* Loi tat: mot tam chia o bang duong ke luoi */
.rd-loitat {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: 56px;
  overflow: hidden;
  border-radius: var(--bo);
  background: var(--luoi);
  box-shadow: 0 0 0 1px var(--luoi), var(--bong);
}

.rd-loitat a {
  display: grid;
  align-content: start;
  gap: 2px;
  min-width: 0;
  padding: 18px 16px;
  background: #fff;
  color: var(--muc-phu);
  font-size: 14px;
  line-height: 1.4;
  text-decoration: none;
  transition: background-color .15s;
}

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

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

.rd-loitat strong {
  margin-top: 10px;
  color: var(--muc);
  font-size: 16px;
  font-weight: 700;
}

.rd-loitat__i {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  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(--ngoc-nhat);
  color: var(--ngoc-dam);
}

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

.rd-loitat__i--lam {
  background: #E1EAFB;
  color: var(--trai-dat);
}

.rd-loitat__i--muc {
  background: #E3E9E1;
  color: var(--muc);
}

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

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

@media (min-width: 720px) {
  .rd-loitat a {
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 14px;
    padding: 22px 20px;
  }

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

  .rd-loitat strong {
    margin-top: 0;
  }
}

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

/* Ba buoc: day la mot trinh tu that nen dung vien ngoc 1, 2, 3 sao lam so thu tu */
.rd-buoc {
  position: relative;
  display: grid;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rd-buoc li {
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  column-gap: 16px;
}

.rd-buoc .rd-ngoc {
  position: relative;
  z-index: 1;
  grid-row: span 3;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  box-shadow: 0 0 0 5px var(--man);
}

/* Duong noi giua cac buoc */
.rd-buoc li:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 56px;
  bottom: -24px;
  left: 27px;
  border-left: 2px dashed var(--luoi-dam);
}

.rd-buoc strong {
  align-self: end;
  margin-top: 4px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
}

.rd-buoc p {
  max-width: 34ch;
  margin: 4px 0 0;
  color: var(--muc-phu);
}

.rd-buoc__lam {
  justify-self: start;
  margin-top: 10px;
}

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

  .rd-buoc li {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
  }

  .rd-buoc .rd-ngoc {
    grid-row: auto;
    width: 64px;
    height: 64px;
    margin-bottom: 14px;
  }

  .rd-buoc li:not(:last-child)::before {
    top: 32px;
    right: -32px;
    bottom: auto;
    left: 76px;
    border-top: 2px dashed var(--luoi-dam);
    border-left: 0;
  }
}

/* Manh nhat may chu: dai toi duy nhat cua trang, vong radar mo phia sau */
.rd-dai {
  position: relative;
  display: grid;
  gap: 32px;
  overflow: hidden;
  padding: 32px 20px 0;
  border-radius: var(--bo-lon);
  background: var(--muc);
  color: #fff;
  isolation: isolate;
}

.rd-dai::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  right: -30%;
  width: 640px;
  height: 640px;
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle, rgba(61, 220, 151, .13) 0 1px, transparent 1px 72px),
    radial-gradient(circle, rgba(61, 220, 151, .16), transparent 62%);
  transform: translateY(-50%);
}

.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: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  text-align: center;
}

.rd-bac__muc {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}

.rd-bac__muc--1 {
  order: 2;
}

.rd-bac__muc--2 {
  order: 1;
}

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

.rd-bac__muc img {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 3px var(--muc), 0 0 0 5px #A9BDB2;
  object-fit: contain;
}

.rd-bac__muc--1 img {
  width: 84px;
  height: 84px;
  box-shadow: 0 0 0 3px var(--muc), 0 0 0 6px var(--ngoc), 0 0 28px rgba(255, 146, 20, .45);
}

.rd-bac__muc--3 img {
  box-shadow: 0 0 0 3px var(--muc), 0 0 0 5px #D99566;
}

.rd-bac__ten {
  overflow: hidden;
  width: 100%;
  margin-top: 12px;
  font-weight: 700;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rd-bac__sm {
  margin-bottom: 10px;
  color: var(--ngoc-sang);
  font-family: var(--font-tieu-de);
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}

.rd-bac__cot {
  display: grid;
  place-items: start center;
  width: 100%;
  height: 84px;
  padding-top: 10px;
  border-radius: 14px 14px 0 0;
  background: linear-gradient(180deg, #D3DFD8, #93A99D);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
  color: var(--muc);
  font-family: var(--font-tieu-de);
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
}

.rd-bac__muc--1 .rd-bac__cot {
  height: 124px;
  background: linear-gradient(180deg, #FFC56B, var(--ngoc));
  font-size: 46px;
}

.rd-bac__muc--3 .rd-bac__cot {
  height: 62px;
  background: linear-gradient(180deg, #F0BC93, #C27443);
}

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

@media (min-width: 720px) {
  .rd-dai {
    padding: 44px 44px 0;
  }

  .rd-bac__muc img {
    width: 72px;
    height: 72px;
  }

  .rd-bac__muc--1 img {
    width: 96px;
    height: 96px;
  }
}

@media (min-width: 960px) {
  .rd-dai {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    align-items: end;
    gap: 48px;
    padding: 56px 56px 0;
  }

  .rd-dai__chu {
    align-self: center;
    padding-bottom: 56px;
  }

  .rd-dai::before {
    right: -8%;
    width: 760px;
    height: 760px;
  }
}

/* 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(16, 38, 29, .08), 0 4px 12px -6px rgba(16, 38, 29, .35);
  color: var(--muc);
  font-weight: 700;
}

.rd-tab__cham {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--mau, var(--ngoc));
  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: 16px;
  box-shadow: 0 0 0 1px var(--luoi);
}

.rd-ht__chu h3 {
  margin: 0 0 6px;
  color: var(--muc);
  font-family: var(--font-tieu-de);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.15;
}

.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(--ngoc-dam);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.rd-lien-ket:hover,
.rd-lien-ket:focus {
  color: var(--muc);
}

@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: #F6F9F4;
}

.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(--ngoc-dam);
}

.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: #2D4238;
}

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

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

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

.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: #F4F8F2;
  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: #F4F8F2;
}

.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: linear-gradient(180deg, #FFC56B, var(--ngoc));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 2px 0 #C45A00;
  color: var(--muc);
}

.rd-hang--2 {
  background: linear-gradient(180deg, #E4ECE7, #B3C4BA);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 2px 0 #8EA397;
  color: var(--muc);
}

.rd-hang--3 {
  background: linear-gradient(180deg, #F6CFAF, #D08A5A);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 2px 0 #A9653A;
  color: var(--muc);
}

.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='%2310261D'%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: #7E8F86;
  font-weight: 400;
}

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

.rd-nhap:focus,
.rd-trang .form-control:focus,
.rd-trang .form-select:focus {
  border-color: var(--muc);
  outline: none;
  box-shadow: 0 0 0 4px rgba(255, 146, 20, .3);
}

.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(--ngoc-dam);
  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 ---------- */
.baotri-khung {
  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(16, 38, 29, .12), 0 40px 80px -30px rgba(5, 15, 11, .7);
  color: var(--muc);
}

.rd-tai::backdrop {
  background: rgba(10, 24, 18, .55);
  -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;
  }
}

.rd-tai__dau {
  position: relative;
  padding: 24px 64px 6px 24px;
}

.rd-tai__dau h2 {
  margin: 0;
  color: var(--muc);
  font-family: var(--font-tieu-de);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.15;
}

.rd-tai__dau p {
  margin: 4px 0 0;
  color: var(--muc-phu);
  font-size: 15px;
}

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

.rd-tai__dong:hover {
  background: var(--man-dam);
  transform: rotate(90deg);
}

.rd-tai__ds {
  margin: 14px 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: var(--man);
  color: var(--muc);
  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(--muc);
  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: 128px;
  height: auto;
  margin-bottom: 12px;
}

.rd-chan__hieu strong {
  display: block;
  color: #fff;
  font-family: var(--font-tieu-de);
  font-size: 20px;
  font-weight: 700;
  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(201, 220, 209, .18);
  color: #9DB5A8;
  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: linear-gradient(180deg, #FFAA3D, var(--ngoc)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 2px 0 #C45A00 !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: linear-gradient(180deg, #FFAA3D, var(--ngoc)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 2px 0 #C45A00 !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(--ngoc-dam);
  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(--ngoc);
  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;
  }
}