/* Bổ sung nhỏ trên nền Vuexy cho khu quản lý. Giữ ngắn: ưu tiên dùng class Bootstrap/Vuexy có sẵn. */

.admin-content .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .85em; }
.admin-content .text-nowrap-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-content .table td, .admin-content .table th { vertical-align: middle; }
.admin-content .table-actions { display: inline-flex; gap: .25rem; justify-content: flex-end; align-items: center; }
.admin-content form.d-inline { margin: 0; }

/* Thẻ thống kê gọn (xem docs/ADMIN-UI.md): icon bo tròn + số lớn */
.stat-card .stat-value { font-size: 1.5rem; font-weight: 600; line-height: 1.2; }
.stat-card .avatar-initial { font-size: 1.25rem; }

/* Đổi sáng/tối bằng View Transition: mờ chéo ngắn */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .25s; }

/* Trang đăng nhập / 2FA / lỗi */
.authentication-wrapper .auth-error-code { font-size: 6rem; font-weight: 700; line-height: 1; color: var(--bs-primary); }

/* Bảng chọn màu (AdminUi::colorField) */
.ng-swatch { position: relative; margin: 0; cursor: pointer; }
.ng-swatch input[type=radio] { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.ng-swatch > span { display: block; width: 30px; height: 30px; border-radius: 8px; border: 3px solid transparent; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.ng-swatch input:checked + span { border-color: var(--bs-heading-color, #333); }
.ng-swatch input:focus-visible + span { outline: 2px solid var(--bs-primary); outline-offset: 2px; }
.ng-swatch-custom > span { overflow: hidden; background: conic-gradient(#ef4444, #f59e0b, #22c55e, #06b6d4, #6366f1, #ec4899, #ef4444); position: relative; }
.ng-swatch-custom input[type=color] { position: absolute; inset: -6px; width: 44px; height: 44px; opacity: 0; cursor: pointer; padding: 0; border: 0; }

/* Thanh tab của trang sửa game: chữ + icon + huy hiệu số cùng một dòng, cách đều */
#game-tabs .nav-link { display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; }
#game-tabs .nav-link > i { margin: 0 !important; }
#game-tabs .nav-link .badge { margin: 0 !important; padding: .28em .55em; line-height: 1; font-size: .72rem; }

/* Kéo thả sắp xếp */
.ng-drag { cursor: grab; color: var(--bs-secondary-color, #8b8b97); user-select: none; width: 36px; text-align: center; }
.ng-drag:hover { color: var(--bs-primary); }
.ng-drag:active { cursor: grabbing; }
.ng-drag-float { position: absolute; top: 8px; left: 8px; z-index: 3; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: rgba(15,23,42,.55); color: #fff; }
.ng-drag-float:hover { background: rgba(15,23,42,.8); color: #fff; }
.ng-sort-ghost { opacity: .45; background: var(--bs-primary-bg-subtle, rgba(115,103,240,.12)); }
.ng-sort-chosen { box-shadow: 0 6px 18px rgba(0,0,0,.18); }
[data-sortable] > [data-sort-id] { transition: background-color .15s; }

/* Bảng đơn nạp game: gọn hơn để vừa khung không phải cuộn ngang ở màn hình thường */
.ng-orders th, .ng-orders td { padding: .65rem .6rem; font-size: .84rem; }
.ng-orders th { font-size: .72rem; }
.ng-orders .btn-icon { --bs-btn-padding-x: .3rem; }


/* Thông báo nhỏ (toast) góc phải trên — theo màu giao diện sáng/tối */
#ng-toasts { position: fixed; top: 1rem; right: 1rem; z-index: 2000; display: flex; flex-direction: column; gap: .5rem; pointer-events: none; }
.ng-toast { display: flex; align-items: center; gap: .5rem; padding: .6rem .9rem; min-width: 200px; max-width: 360px; font-size: .875rem; line-height: 1.3;
    color: var(--bs-body-color); background: var(--bs-paper-bg, var(--bs-body-bg)); border: 1px solid var(--bs-border-color); border-left-width: 3px; border-radius: .5rem;
    box-shadow: 0 .25rem 1rem rgba(0,0,0,.25); animation: ng-toast-in .2s ease-out; }
.ng-toast i { font-size: 1.25rem; flex: none; }
.ng-toast-success { border-left-color: var(--bs-success); } .ng-toast-success i { color: var(--bs-success); }
.ng-toast-error { border-left-color: var(--bs-danger); } .ng-toast-error i { color: var(--bs-danger); }
.ng-toast-out { opacity: 0; transform: translateX(12px); transition: opacity .25s, transform .25s; }
@keyframes ng-toast-in { from { opacity: 0; transform: translateX(12px); } }

/* Admin: dùng hết bề ngang màn hình, không giới hạn container-xxl (1440px) */
.layout-navbar.navbar-detached.container-xxl { max-inline-size: none !important; }
.layout-page .content-wrapper .container-xxl { max-width: none !important; }

/* Bảng game: cột "Thông tin nhập" gọn, cắt bằng … (đưa chuột vào để xem đầy đủ) */
.ng-games th, .ng-games td { padding-left: .6rem; padding-right: .6rem; }
.ng-fields-badge { display: inline-block; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }

/* ── /admin/homepage: bộ chỉnh trang chủ + xem trước ─────────────────────────────────────────────────── */
.ng-hp-help { display: flex; flex-wrap: wrap; gap: .25rem 1rem; font-size: .8rem; }
.ng-hp-help i { vertical-align: -2px; }
.ng-block { background: var(--bs-paper-bg, var(--bs-body-bg)); border: 1px solid var(--bs-border-color); border-radius: .5rem; transition: border-color .15s, box-shadow .15s; }
.ng-block:hover { border-color: var(--bs-primary); }
.ng-block.is-active { border-color: var(--bs-primary); box-shadow: 0 0 0 1px var(--bs-primary); }
.ng-block.is-flash { animation: ng-block-flash .9s ease; }
@keyframes ng-block-flash { 0%, 60% { background: var(--bs-primary-bg-subtle, rgba(115,103,240,.16)); } }
.ng-block-head { display: flex; align-items: center; gap: .5rem; padding: .6rem .75rem .6rem .25rem; }
.ng-block-head .ng-drag { width: 28px; flex: none; }
.ng-block-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: .75rem; padding: 0; border: 0; background: none; text-align: left; color: inherit; cursor: pointer; }
.ng-block-ico { flex: none; width: 40px; height: 40px; border-radius: .5rem; display: inline-flex; align-items: center; justify-content: center; }
.ng-block-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.ng-block-text small { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ng-block-chev { flex: none; color: var(--bs-secondary-color); transition: transform .15s; }
.ng-block.is-open .ng-block-chev { transform: rotate(180deg); }
.ng-block.is-off .ng-block-ico, .ng-block.is-off .ng-block-text { opacity: .45; }
.ng-block.is-off .ng-block-text strong::after { content: " · đang ẩn"; font-weight: 400; font-size: .75rem; color: var(--bs-warning); }
.ng-block-body { padding: 1rem; border-top: 1px dashed var(--bs-border-color); }
.ng-type-pick { display: flex; align-items: center; gap: .75rem; padding: .75rem; height: 100%; border: 1px solid var(--bs-border-color); border-radius: .5rem; cursor: pointer; }
.ng-type-pick:hover { border-color: var(--bs-primary); }
.btn-check:checked + .ng-type-pick { border-color: var(--bs-primary); background: var(--bs-primary-bg-subtle, rgba(115,103,240,.1)); box-shadow: 0 0 0 1px var(--bs-primary); }

.ng-pv-card { position: sticky; top: 5.5rem; }
.ng-pv-stage { height: calc(100vh - 14rem); min-height: 460px; overflow: hidden; background: var(--bs-body-bg); display: flex; justify-content: center; border-radius: 0 0 .375rem .375rem; }
.ng-pv-frame { position: relative; overflow: hidden; }
.ng-pv-frame iframe { border: 0; background: #fff; transform-origin: 0 0; display: block; }
.ng-pv-stage[data-mode="mobile"] .ng-pv-frame { margin-block: .75rem; height: calc(100% - 1.5rem) !important; border-radius: 1.25rem; box-shadow: 0 0 0 8px rgba(0,0,0,.35); }
@media (max-width: 1199.98px) { .ng-pv-card { position: static; } .ng-pv-stage { height: 70vh; } }

/* Xem trước: hai iframe xếp chồng (bộ đệm đôi) + nhãn "chưa lưu" + ô chọn gói Flash sale */
.ng-pv-frame iframe { position: absolute; top: 0; left: 0; }
.ng-block.is-dirty { border-color: var(--bs-warning); }
.ng-pkgpick .ng-pkg-sec { font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--bs-heading-color); margin-bottom: .5rem; }
.ng-pkg-list { display: flex; flex-direction: column; gap: .4rem; }
.ng-pkg { padding: .5rem .6rem; border: 1px solid var(--bs-border-color); border-radius: .4rem; background: var(--bs-body-bg); }
.ng-pkg-grip { cursor: grab; color: var(--bs-secondary-color); flex: none; }
.ng-pkg-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.ng-pkg-text > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ng-pkg-price { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem .6rem; margin: .4rem 0 0 1.6rem; font-size: .8rem; }
.ng-pkg-price .input-group { width: 96px; flex: none; }
.ng-pkg-calc { color: var(--bs-secondary-color); }
.ng-pkg-empty { padding: .75rem; border: 1px dashed var(--bs-border-color); border-radius: .4rem; font-size: .82rem; color: var(--bs-secondary-color); }
.ng-pkg-results { max-height: 280px; overflow-y: auto; border: 1px solid var(--bs-border-color); border-radius: .4rem; }
.ng-pkg-res { display: flex; align-items: center; gap: .5rem; padding: .4rem .6rem; border-bottom: 1px solid var(--bs-border-color); }
.ng-pkg-res:last-child { border-bottom: 0; }
.ng-pkg-res:hover { background: var(--bs-primary-bg-subtle, rgba(115,103,240,.08)); }
.ng-pkg-res small, .ng-pkg-none { color: var(--bs-secondary-color); }
.ng-pkg-none { padding: .8rem; text-align: center; font-size: .85rem; }

/* Tab/pill: giữ nguyên chữ hoa-thường như viết (Vuexy mặc định viết hoa chữ đầu mỗi từ → "Hộp Thư Đi", sai với tiếng Việt) */
.nav-pills .nav-link, .nav-tabs .nav-link { text-transform: none; }

/* Thanh tab/pill quá dài (vd Cấu hình hệ thống ở điện thoại): xuống dòng thay vì tràn ngang trang */
.admin-content .nav-pills { flex-wrap: wrap; row-gap: .25rem; }
@media (min-width: 992px) { .admin-content .nav-pills.flex-lg-column { flex-wrap: nowrap; } }

/* ── Banner trang chủ: danh sách theo thứ tự, xem trước, bộ chọn màu ── */
.ng-bn-row { transition: box-shadow .15s, opacity .15s; }
.ng-bn-row.is-off .ng-bn-thumb { opacity: .55; filter: grayscale(.35); }
.ng-bn-handle { min-width: 36px; }
.ng-bn-rank { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--bs-primary-bg-subtle, rgba(115,103,240,.16)); color: var(--bs-primary); font-weight: 700; font-size: .8rem; }
.ng-bn-grip-hint { display: inline-flex; vertical-align: middle; }
.ng-bn-thumb { flex: 0 0 240px; width: 240px; aspect-ratio: 750 / 270; border-radius: 10px; overflow: hidden; background: #0f172a; }
.ng-bn-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ng-bn-thumb-text { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 2px; padding: 10px 14px; color: #fff; line-height: 1.2; }
.ng-bn-thumb-text strong { font-size: .95rem; color: #fff; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ng-bn-thumb-text small { font-size: .7rem; opacity: .8; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ng-bn-pill { display: inline-block; padding: 1px 8px; border-radius: 999px; background: rgba(255,255,255,.22); color: #fff; font-size: .62rem; font-weight: 700; letter-spacing: .03em; }
.ng-bn-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.ng-bn-swatch { width: 40px; height: 28px; border-radius: 8px; border: 2px solid transparent; box-shadow: 0 0 0 1px rgba(0,0,0,.12); cursor: pointer; padding: 0; }
.ng-bn-swatch:hover, .ng-bn-swatch:focus-visible { border-color: var(--bs-primary); outline: none; }
.ng-bn-sticky { position: sticky; top: 0; }
.ng-bn-preview { position: relative; width: 100%; aspect-ratio: 750 / 270; border-radius: 12px; overflow: hidden; color: #fff; background: #0f172a; box-shadow: 0 4px 14px rgba(0,0,0,.18); }
.ng-bn-preview > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ng-bn-preview-text { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 4px; padding: 6% 7%; }
.ng-bn-preview-text strong { font-size: clamp(.95rem, 2.6vw, 1.35rem); color: #fff; line-height: 1.15; }
.ng-bn-preview-text small { font-size: clamp(.7rem, 1.6vw, .85rem); opacity: .85; }
.ng-bn-cta { margin-top: 4px; display: inline-block; padding: 3px 12px; border-radius: 999px; background: #fff; color: #0f172a; font-size: .72rem; font-weight: 700; }
@media (max-width: 991.98px) { .ng-bn-thumb { flex-basis: 100%; width: 100%; } }

/* ── Nút phụ (secondary) đủ rõ để biết bấm được ──────────────────────────────────────────────────────────────
   Vuexy tô chữ nút phụ bằng --bs-secondary (#808390) trên nền tint rất nhạt → ở giao diện tối chỉ ~3:1, trông như nút bị vô hiệu
   (khách/nhân sự tưởng "chưa kích hoạt"). Dùng màu chữ nhấn mạnh của theme (đậm ở sáng, sáng ở tối) + viền; nút DISABLED thật
   thì mờ hẳn và mất con trỏ bấm để phân biệt được với nút phụ bình thường. */
.btn-label-secondary, .btn-outline-secondary, .btn-text-secondary {
  --bs-btn-color: var(--bs-secondary-text-emphasis);
  --bs-btn-hover-color: var(--bs-secondary-text-emphasis);
  --bs-btn-active-color: var(--bs-secondary-text-emphasis);
  --bs-btn-disabled-color: var(--bs-secondary-text-emphasis);
}
.btn-label-secondary {
  --bs-btn-border-color: color-mix(in sRGB, var(--bs-paper-bg) 55%, var(--bs-secondary));
  --bs-btn-hover-border-color: color-mix(in sRGB, var(--bs-paper-bg) 35%, var(--bs-secondary));
  --bs-btn-active-border-color: color-mix(in sRGB, var(--bs-paper-bg) 35%, var(--bs-secondary));
  --bs-btn-disabled-border-color: color-mix(in sRGB, var(--bs-paper-bg) 55%, var(--bs-secondary));
}
.btn:disabled, .btn.disabled, fieldset:disabled .btn { --bs-btn-disabled-opacity: .45; cursor: not-allowed; }

/* ── Tương phản mọi kiểu nút ≥ 4.5:1 (đo bằng quét toàn bộ nút ở admin/CTV, cả giao diện sáng và tối) ───────────────────────
   Bảng màu gốc của Vuexy: chữ màu nhấn (xanh lá, cam, đỏ, tím…) trên nền tint nhạt chỉ ~1.8–3.5:1; nút đặc nền xanh lá/đỏ chữ trắng
   chỉ 2.2–3.3:1 → nút trông mờ/khó đọc. --ng-on-* = màu nhấn pha ĐEN (giao diện sáng) hoặc pha TRẮNG (giao diện tối) cho chữ;
   --ng-solid-* = nền nút đặc pha đen để chữ trắng đọc được. Chỉ đổi màu chữ/nền nút, không đổi bố cục. */
:root {
  --ng-on-primary: color-mix(in srgb, var(--bs-primary) 76%, #000);
  --ng-on-success: color-mix(in srgb, var(--bs-success) 56%, #000);
  --ng-on-danger:  color-mix(in srgb, var(--bs-danger) 66%, #000);
  --ng-on-warning: color-mix(in srgb, var(--bs-warning) 55%, #000);
  --ng-on-info:    color-mix(in srgb, var(--bs-info) 57%, #000);
  --ng-solid-primary: color-mix(in srgb, var(--bs-primary) 92%, #000);
  --ng-solid-success: color-mix(in srgb, var(--bs-success) 64%, #000);
  --ng-solid-danger:  color-mix(in srgb, var(--bs-danger) 79%, #000);
  --ng-solid-info:    color-mix(in srgb, var(--bs-info) 66%, #000);
}
[data-bs-theme="dark"] {
  --ng-on-primary: color-mix(in srgb, var(--bs-primary) 52%, #fff);
  --ng-on-success: color-mix(in srgb, var(--bs-success) 65%, #fff);
  --ng-on-danger:  color-mix(in srgb, var(--bs-danger) 54%, #fff);
  --ng-on-warning: color-mix(in srgb, var(--bs-warning) 70%, #fff);
  --ng-on-info:    color-mix(in srgb, var(--bs-info) 61%, #fff);
}
.btn-label-primary, .btn-outline-primary, .btn-text-primary { --bs-btn-color: var(--ng-on-primary); --bs-btn-hover-color: var(--ng-on-primary); --bs-btn-active-color: var(--ng-on-primary); --bs-btn-disabled-color: var(--ng-on-primary); }
.btn-label-success, .btn-outline-success, .btn-text-success { --bs-btn-color: var(--ng-on-success); --bs-btn-hover-color: var(--ng-on-success); --bs-btn-active-color: var(--ng-on-success); --bs-btn-disabled-color: var(--ng-on-success); }
.btn-label-danger, .btn-outline-danger, .btn-text-danger { --bs-btn-color: var(--ng-on-danger); --bs-btn-hover-color: var(--ng-on-danger); --bs-btn-active-color: var(--ng-on-danger); --bs-btn-disabled-color: var(--ng-on-danger); }
.btn-label-warning, .btn-outline-warning, .btn-text-warning { --bs-btn-color: var(--ng-on-warning); --bs-btn-hover-color: var(--ng-on-warning); --bs-btn-active-color: var(--ng-on-warning); --bs-btn-disabled-color: var(--ng-on-warning); }
.btn-label-info, .btn-outline-info, .btn-text-info { --bs-btn-color: var(--ng-on-info); --bs-btn-hover-color: var(--ng-on-info); --bs-btn-active-color: var(--ng-on-info); --bs-btn-disabled-color: var(--ng-on-info); }
/* Nút bật/tắt dạng nhãn (button.bg-label-*, vd "Đang hiện" ở Menu): Vuexy ép màu chữ bằng !important nên cần cùng cách */
button.bg-label-primary, .btn.bg-label-primary { color: var(--ng-on-primary) !important; }
button.bg-label-success, .btn.bg-label-success { color: var(--ng-on-success) !important; }
button.bg-label-danger,  .btn.bg-label-danger  { color: var(--ng-on-danger) !important; }
button.bg-label-warning, .btn.bg-label-warning { color: var(--ng-on-warning) !important; }
button.bg-label-info,    .btn.bg-label-info    { color: var(--ng-on-info) !important; }
button.bg-label-secondary, .btn.bg-label-secondary { color: var(--bs-secondary-text-emphasis) !important; }
/* Nút đặc nền: nền pha đen nhẹ để chữ trắng đạt ≥ 4.5:1 (hover/active đậm thêm một chút) */
.btn-primary { --bs-btn-bg: var(--ng-solid-primary); --bs-btn-border-color: var(--ng-solid-primary); --bs-btn-hover-bg: color-mix(in srgb, var(--ng-solid-primary) 90%, #000); --bs-btn-hover-border-color: color-mix(in srgb, var(--ng-solid-primary) 90%, #000); --bs-btn-active-bg: color-mix(in srgb, var(--ng-solid-primary) 90%, #000); --bs-btn-active-border-color: color-mix(in srgb, var(--ng-solid-primary) 90%, #000); --bs-btn-disabled-bg: var(--ng-solid-primary); --bs-btn-disabled-border-color: var(--ng-solid-primary); }
.btn-success { --bs-btn-bg: var(--ng-solid-success); --bs-btn-border-color: var(--ng-solid-success); --bs-btn-hover-bg: color-mix(in srgb, var(--ng-solid-success) 90%, #000); --bs-btn-hover-border-color: color-mix(in srgb, var(--ng-solid-success) 90%, #000); --bs-btn-active-bg: color-mix(in srgb, var(--ng-solid-success) 90%, #000); --bs-btn-active-border-color: color-mix(in srgb, var(--ng-solid-success) 90%, #000); --bs-btn-disabled-bg: var(--ng-solid-success); --bs-btn-disabled-border-color: var(--ng-solid-success); }
.btn-danger { --bs-btn-bg: var(--ng-solid-danger); --bs-btn-border-color: var(--ng-solid-danger); --bs-btn-hover-bg: color-mix(in srgb, var(--ng-solid-danger) 90%, #000); --bs-btn-hover-border-color: color-mix(in srgb, var(--ng-solid-danger) 90%, #000); --bs-btn-active-bg: color-mix(in srgb, var(--ng-solid-danger) 90%, #000); --bs-btn-active-border-color: color-mix(in srgb, var(--ng-solid-danger) 90%, #000); --bs-btn-disabled-bg: var(--ng-solid-danger); --bs-btn-disabled-border-color: var(--ng-solid-danger); }
.btn-info { --bs-btn-bg: var(--ng-solid-info); --bs-btn-border-color: var(--ng-solid-info); --bs-btn-hover-bg: color-mix(in srgb, var(--ng-solid-info) 90%, #000); --bs-btn-hover-border-color: color-mix(in srgb, var(--ng-solid-info) 90%, #000); --bs-btn-active-bg: color-mix(in srgb, var(--ng-solid-info) 90%, #000); --bs-btn-active-border-color: color-mix(in srgb, var(--ng-solid-info) 90%, #000); --bs-btn-disabled-bg: var(--ng-solid-info); --bs-btn-disabled-border-color: var(--ng-solid-info); }
/* Tab dạng pill đang chọn: chữ trắng trên tím gốc chỉ 4.26:1 → dùng nền đặc pha đen như nút chính */
.nav-pills { --bs-nav-pills-link-active-bg: var(--ng-solid-primary); }
.nav-pills .nav-link.active { background-color: var(--ng-solid-primary); }
/* Liên kết trong nội dung (vd "Sửa số nhập", "Xem website"): tím gốc chỉ 4.26:1 (sáng) / 2.9:1 (tối) → đậm/sáng hơn theo theme.
   Chỉ đặt trong .admin-content nên menu, nút, tab giữ màu riêng của chúng. */
.admin-content { --bs-custom-link-color: var(--ng-on-primary); --bs-link-color-rgb: 85, 76, 178; --bs-link-hover-color-rgb: 69, 62, 144; }
[data-bs-theme="dark"] .admin-content { --bs-custom-link-color: var(--ng-on-primary); --bs-link-color-rgb: 185, 179, 248; --bs-link-hover-color-rgb: 202, 197, 249; }