/* Giao dien Ngoc Rong Royal.
   Bau troi xanh hoang gia lam nen, tam "vien nang" trang chua noi dung,
   vang va cam lay tu logo cho cac hanh dong chinh.
   Khong co hieu ung tu chay de may yeu van muot. */

:root {
  --sky: #0E1A5C;
  --sky-raised: #1B2F9E;
  --royal: #1E3FBF;
  --ki: #39C6FF;
  --ball: #FF8A1E;
  --gold: #FFC531;
  --capsule: #F5F8FF;
  --ink: #111A50;
  --muted: #56608F;
  --line: #D6DEFA;
}

/* ---------- Nen trang ---------- */
html {
  -webkit-text-size-adjust: 100%;
}

body#cssweb {
  min-height: 100vh;
  margin: 0;
  background: var(--sky);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.7;
}

/* Lop co dinh rieng: cuon trang khong phai ve lai nen nhu background-attachment: fixed */
body#cssweb::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(90% 55% at 50% 0%, rgba(57, 198, 255, .28), transparent 70%),
    linear-gradient(180deg, var(--sky-raised) 0%, var(--sky) 62%);
}

/* Anh nhan vat chi tai tren man hinh rong, dien thoai khong ton dung luong */
@media (min-width: 992px) {
  body#cssweb::before {
    background:
      linear-gradient(90deg, rgba(14, 26, 92, .62) 0%, rgba(14, 26, 92, .96) 30%, rgba(14, 26, 92, .96) 70%, rgba(14, 26, 92, .62) 100%),
      url(../images/bg/bg-royal.webp) center / cover no-repeat;
  }
}

.royal-shell {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 0 12px 24px;
}

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

/* ---------- Dau trang: logo tren nen tia ki ---------- */
.royal-hero {
  position: relative;
  isolation: isolate;
  padding: 18px 0 6px;
  text-align: center;
}

.royal-hero::before {
  content: "";
  position: absolute;
  inset: -40px -12px 0;
  z-index: -1;
  background:
    radial-gradient(circle at 50% 46%, rgba(57, 198, 255, .42), transparent 46%),
    repeating-conic-gradient(from 0deg at 50% 46%, rgba(255, 197, 49, .17) 0 5deg, transparent 5deg 15deg);
  -webkit-mask-image: radial-gradient(circle at 50% 46%, #000 12%, transparent 66%);
  mask-image: radial-gradient(circle at 50% 46%, #000 12%, transparent 66%);
  pointer-events: none;
}

.royal-hero__logo {
  display: inline-block;
  width: min(86%, 440px);
}

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

.royal-hero__welcome {
  margin: 2px 0 0;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
}

/* ---------- Thanh dieu huong: nut hinh vien nang ---------- */
.royal-nav {
  display: grid;
  gap: 10px;
  margin: 14px 0;
}

.royal-nav__primary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.royal-nav__secondary {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}

.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }
.span-6 { grid-column: span 6; }

.capsule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 6px 14px 6px 7px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 999px;
  background: rgba(255, 255, 255, .09);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.capsule:hover,
.capsule:focus {
  background: rgba(255, 255, 255, .18);
  color: #fff;
}

.capsule > i {
  display: grid;
  flex: none;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  font-size: 14px;
}

.capsule--gold,
.capsule--ball {
  min-height: 56px;
  border: 0;
  box-shadow: inset 0 -4px 0 rgba(17, 26, 80, .22);
  color: var(--ink);
  font-size: 16px;
  font-weight: 800;
}

.capsule--gold { background: var(--gold); }
.capsule--ball { background: var(--ball); }

.capsule--gold:hover,
.capsule--gold:focus { background: #FFD86B; color: var(--ink); }

.capsule--ball:hover,
.capsule--ball:focus { background: #FFA24D; color: var(--ink); }

.capsule--gold > i,
.capsule--ball > i {
  width: 38px;
  height: 38px;
  background: rgba(17, 26, 80, .13);
  font-size: 17px;
}

/* Dien thoai: icon nam tren chu de nhan du mot hang */
@media (max-width: 480px) {
  .royal-nav__secondary .capsule {
    flex-direction: column;
    gap: 3px;
    min-height: 66px;
    padding: 7px 4px;
    border-radius: 18px;
    font-size: 12px;
  }

  .capsule--gold,
  .capsule--ball {
    padding-right: 10px;
    font-size: 14px;
  }
}

/* Nut dang bao tri (cong tac trong core/baotri.php) */
.nut-baotri {
  position: relative;
}

.nut-baotri::after {
  content: "Bảo trì";
  position: absolute;
  top: -8px;
  right: 10px;
  padding: 0 8px;
  border: 1px solid #fff;
  border-radius: 10px;
  background: #D90429;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 17px;
}

/* ---------- The nguoi choi ---------- */
.royal-user {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 18px;
  background: rgba(255, 255, 255, .09);
  color: #fff;
}

.royal-user img {
  flex: none;
  width: 46px;
  height: 46px;
  object-fit: contain;
}

.royal-user__name {
  display: block;
  color: var(--gold);
  font-size: 15px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.royal-user__money {
  display: block;
  font-size: 13px;
}

/* ---------- Tam noi dung ---------- */
.royal-sheet {
  padding: 18px;
  border-radius: 24px;
  background: var(--capsule);
  box-shadow: 0 14px 34px rgba(5, 10, 50, .4);
  color: var(--ink);
}

@media (max-width: 480px) {
  .royal-sheet {
    padding: 14px 12px;
    border-radius: 20px;
  }
}

.royal-sheet a:not(.btn):not(.capsule) {
  color: var(--royal);
}

.royal-sheet img {
  max-width: 100%;
}

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

.royal-sheet .ibox-content {
  padding: 4px 0 !important;
}

.royal-sheet div.text-white,
.royal-sheet h1.text-white,
.royal-sheet h2.text-white,
.royal-sheet h3.text-white,
.royal-sheet h4.text-white,
.royal-sheet h5.text-white {
  color: var(--ink) !important;
  text-shadow: none !important;
}

.royal-sheet h1,
.royal-sheet h2,
.royal-sheet h3,
.royal-sheet h4,
.royal-sheet h5,
.royal-sheet .h3 {
  color: var(--ink);
  font-weight: 800;
  letter-spacing: -.02em;
  text-shadow: none !important;
}

/* Tieu de lon co vien ngoc rong truoc chu */
.royal-sheet .h3::before {
  content: "★";
  display: inline-grid;
  place-items: center;
  width: 1.15em;
  height: 1.15em;
  margin-right: .4em;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFD9A0, var(--ball) 55%, #D95F00);
  color: #C2260E;
  font-size: 1em;
  line-height: 1;
  vertical-align: -.12em;
}

.royal-sheet .h3 {
  font-size: 20px;
}

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

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

.royal-sheet .text_info_index a {
  color: var(--ink) !important;
}

/* Dong tin tuc */
.royal-sheet .announcement {
  margin-bottom: 8px;
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
  font-weight: 600;
}

.royal-sheet .announcement-info,
.royal-sheet .ent-info {
  border: 0;
  background: var(--capsule);
}

/* Bang xep hang va cac bang du lieu */
.royal-sheet .table {
  --bs-table-hover-bg: #E9EFFF;
  margin-bottom: 0;
  color: var(--ink);
}

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

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

.royal-sheet .table thead th {
  border-bottom: 2px solid var(--line) !important;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.royal-sheet .table tbody td {
  font-variant-numeric: tabular-nums;
}

.table-custom tbody tr:nth-child(-n+3) td:first-child {
  color: #D95F00;
  font-weight: 800;
}

/* O nhap */
.royal-sheet .form-control {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
}

.royal-sheet .form-control::placeholder {
  color: var(--muted);
  font-weight: 500;
}

.royal-sheet .form-control:focus {
  border-color: var(--ki);
  box-shadow: 0 0 0 3px rgba(57, 198, 255, .3);
}

/* Form dang nhap, dang ky: du rong de o CAPTCHA va anh nam cung hang */
.royal-sheet form.col-lg-5 {
  width: 100%;
  max-width: 420px;
  padding: 8px 0 !important;
}

/* Chu trang tren nen vang cu thanh mau chu thuong, tru nut bam */
.royal-sheet [style*="color:white"]:not(.btn):not(button):not([style*="background"]),
.royal-sheet [style*="color: white"]:not(.btn):not(button):not([style*="background"]) {
  color: var(--muted) !important;
  text-shadow: none !important;
}

/* Bang lich su kieu cu */
.royal-sheet table[style*="border-collapse"] {
  font-size: 12px;
}

.royal-sheet th[style*="#b8f9f1"] {
  border: 0 !important;
  border-bottom: 2px solid var(--line) !important;
  background: #E3E9FF !important;
  color: var(--ink);
  text-shadow: none !important;
}

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

/* Nut trong noi dung va trong cua so tai game */
.royal-sheet .btn,
#myModal .btn {
  border: 0;
  border-radius: 999px !important;
  font-weight: 700;
}

.royal-sheet button.btn[type="submit"],
.royal-sheet input.btn[type="submit"] {
  box-shadow: inset 0 -4px 0 rgba(17, 26, 80, .22);
}

.royal-sheet .btn-action.text-white:hover {
  color: #fff !important;
}

/* ---------- Trang co che game ---------- */
.cc-intro {
  margin: 4px 0 14px;
  color: var(--muted);
  font-size: 13px;
}

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

.cc-muc > summary {
  padding: 12px 14px;
  border-radius: 14px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}

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

.cc-muc[open] > summary {
  border-bottom: 1px solid var(--line);
  border-radius: 14px 14px 0 0;
  color: var(--royal);
}

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

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

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

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

.royal-sheet .cc-muc h2 {
  margin-top: 16px;
  margin-bottom: 6px;
  font-size: 14px;
}

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

.royal-sheet .cc-bang {
  font-size: 12.5px;
  line-height: 1.5;
}

.royal-sheet .cc-bang thead th {
  background: #E3E9FF;
  color: var(--ink);
  white-space: nowrap;
}

.royal-sheet .cc-bang td {
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.royal-sheet .cc-bang td:first-child {
  font-weight: 700;
}

/* Bang nhieu cot tren dien thoai: cuon ngang thay vi ep chu thanh cot hep */
.royal-sheet .cc-bang td:not(:first-child) {
  min-width: 104px;
}

/* ---------- Khung bao tri ---------- */
.baotri-khung {
  text-align: center;
}

.baotri-dau h1 {
  margin: 10px 0 0;
  font-size: 22px;
}

.baotri-nhan {
  display: inline-block;
  padding: 2px 12px;
  border-radius: 12px;
  background: #C40000;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

.baotri-than {
  padding: 14px 8px 8px;
  color: var(--ink);
  text-align: center;
}

.baotri-than p {
  margin-bottom: 14px;
  font-size: 15px;
}

.baotri-nut {
  padding: 8px 22px;
}

.royal-sheet a.baotri-ve,
.baotri-ve {
  display: block;
  margin-top: 12px;
  color: var(--muted);
  font-size: 13px;
}

/* ---------- Cua so tai game ---------- */
#myModal {
  z-index: 1060;
  background: rgba(7, 12, 52, .72);
}

#myModal .modal-content {
  position: relative;
  width: calc(100% - 24px);
  max-width: 460px;
  margin: 8vh auto;
  padding: 18px;
  border: 0;
  border-radius: 24px;
  background: var(--capsule);
  box-shadow: 0 18px 44px rgba(5, 10, 50, .5);
  color: var(--ink);
}

#myModal .close {
  display: grid;
  place-items: center;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #E3E9FF;
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
}

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

.royal-dl {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
}

.royal-dl > i {
  flex: none;
  width: 34px;
  color: var(--royal);
  font-size: 26px;
  text-align: center;
}

.royal-dl__text {
  flex: 1;
  min-width: 0;
}

.royal-dl__text strong {
  display: block;
  font-size: 14px;
}

.royal-dl__text span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.royal-dl__links {
  display: flex;
  flex-wrap: wrap;
  flex: none;
  gap: 6px;
  max-width: 45%;
}

.royal-dl .btn-info1 {
  padding: 5px 12px;
  border: 0;
  border-radius: 999px;
  background: var(--gold);
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  text-shadow: none;
}

/* ---------- Chan trang ---------- */
.royal-footer {
  padding: 18px 0 6px;
  color: #fff;
  font-size: 12px;
  text-align: center;
}

.royal-footer img {
  display: block;
  width: 116px;
  height: auto;
  margin: 0 auto 4px;
  -webkit-user-drag: none;
}

.royal-footer strong {
  display: block;
  font-size: 13px;
}

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

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

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

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