/* =============================================================================
   home.css — Restyle trang chủ theo phong cách storerbl.com
   -----------------------------------------------------------------------------
   Toàn bộ rule được SCOPE dưới  body.sr-home  nên KHÔNG ảnh hưởng các trang khác.
   Class `sr-*` được THÊM SONG SONG với class cũ (không xoá class cũ) để JS cũ
   vẫn hoạt động bình thường.

   Nguồn design: _ref/design-tokens.md  (trích từ CSS/DOM thật của storerbl.com)
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. DESIGN TOKENS  
   -------------------------------------------------------------------------- */
:root { 
  /* Nền */
  --sr-bg-nav:      #111111;
  --sr-bg-main:     #131930;
  --sr-bg-card:     #1b2448;   /* surface của card / product */
  --sr-bg-chip:     #2542dd;   /* chip đếm / badge */
  --sr-bg-chip-2:   #2139c0;
  --sr-bg-border:   #253266;   /* viền / input / divider */
  --sr-bg-footer:   #1b1a1a;
  --sr-bg-modal:    #1b2448;

  /* Chữ */
  --sr-text:        #ffffff;
  --sr-text-2:      #b3b3b3;   /* phụ, mô tả */
  --sr-text-muted:  #9ca3af;   /* giá gốc, chú thích */
  --sr-text-danger: #ef4444;

  /* Thương hiệu */
  --sr-btn-1:       #2C8CC2;
  --sr-btn-2:       #0BC4E2;
  --sr-grad:        linear-gradient(45deg, var(--sr-btn-1), var(--sr-btn-2));
  --sr-grad-rev:    linear-gradient(45deg, var(--sr-btn-2), var(--sr-btn-1));
  --sr-blue:        #3182ce;
  --sr-messenger:   #0078ff;

  /* Bo góc */
  --sr-r-sm: 6px;    /* card sản phẩm */
  --sr-r-md: 8px;
  --sr-r-lg: 12px;   /* modal / popover */
  --sr-r-xl: 15px;   /* hero / banner */
  --sr-r-icon: 20px; /* icon game */

  /* Đổ bóng */
  --sr-sh-base: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);
  --sr-sh-xl:   0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04);
  --sr-sh-2xl:  0 25px 50px -12px rgba(0, 0, 0, .25);

  /* Nhịp */
  --sr-container: 1500px;
  --sr-gap: 1rem;
}

/* -----------------------------------------------------------------------------
   2. BASE — nền trang tối
   -------------------------------------------------------------------------- */
body.sr-home {
  background-color: var(--sr-bg-main) !important;
  background-image:
    radial-gradient(1200px 600px at 50% -10%, rgba(37, 66, 221, .35), transparent 70%),
    radial-gradient(900px 500px at 90% 10%, rgba(11, 196, 226, .12), transparent 70%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  color: var(--sr-text) !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

body.sr-home a { color: inherit; text-decoration: none; }

/* container dùng chung */
body.sr-home .sr-container {
  width: 100%;
  margin-inline: auto;
  max-width: var(--sr-container); 
  padding-inline: 1rem;
}

/* -----------------------------------------------------------------------------
   3. NAV (header dính)
   -------------------------------------------------------------------------- */
body.sr-home .sr-nav {
  background: var(--sr-bg-nav) !important;
  box-shadow: var(--sr-sh-base);
  min-height: 80px;
  position: sticky;
  top: 0;
  z-index: 999;
}
body.sr-home .sr-nav * { color: var(--sr-text); }
/* logo */
body.sr-home .sr-nav img.ws-h-12 { height: 50px !important; width: auto; border-radius: var(--sr-r-md); }
/* ô tìm kiếm */
body.sr-home .sr-nav input#searchInputpc {
  background: var(--sr-bg-card) !important;
  border-color: var(--sr-bg-border) !important;
  color: var(--sr-text) !important;
  border-radius: var(--sr-r-md) !important;
  height: 40px;
}
body.sr-home .sr-nav input#searchInputpc::placeholder { color: var(--sr-text-2); }
body.sr-home .sr-nav input#searchInputpc + button {
  background: transparent !important;
  color: var(--sr-btn-2) !important;
}
/* nút "Nạp tiền" → dùng gradient thương hiệu */
body.sr-home .sr-nav .sr-nav-topup {
  background: var(--sr-grad) !important;
  background-image: var(--sr-grad) !important;
  color: #111 !important;
  font-weight: 700;
  border-radius: 9px !important;
}
body.sr-home .sr-nav .sr-nav-topup i,
body.sr-home .sr-nav .sr-nav-topup span { color: #111 !important; }
body.sr-home .sr-nav .sr-nav-topup:hover { background: var(--sr-grad-rev) !important; }
/* chuông + đăng nhập */
body.sr-home .sr-nav .sr-nav-bell,
body.sr-home .sr-nav .btn_login { color: var(--sr-text) !important; }
body.sr-home .sr-nav .btn_login i {
  border-color: var(--sr-bg-border) !important;
  color: var(--sr-text) !important;
}
/* tên + số dư trong dropdown trigger */
body.sr-home .sr-nav p.ws-text-black,
body.sr-home .sr-nav p[class*="ws-text-black"] { color: var(--sr-text) !important; }
body.sr-home .sr-nav #dropdownTrigger p { color: var(--sr-text) !important; }
body.sr-home .sr-nav #dropdownTrigger p.ws-text-red-500 span,
body.sr-home .sr-nav #dropdownTrigger p.ws-text-red-500 { color: var(--sr-btn-2) !important; }

/* panel dropdown user */
body.sr-home .drop-profile-show-pc,
body.sr-home .drop-profile-show-mobile,
body.sr-home #dropdownContent {
  background: var(--sr-bg-card) !important;
  border: 1px solid var(--sr-bg-border) !important;
  border-radius: var(--sr-r-lg) !important;
  box-shadow: var(--sr-sh-xl) !important;
  color: var(--sr-text) !important;
}
body.sr-home .drop-profile-show-pc a,
body.sr-home .drop-profile-show-mobile a,
body.sr-home #dropdownContent a { color: var(--sr-text) !important; }
body.sr-home .drop-profile-show-pc a:hover,
body.sr-home .drop-profile-show-mobile a:hover,
body.sr-home #dropdownContent a:hover { background: var(--sr-bg-border) !important; }
body.sr-home .drop-profile-show-pc .ws-border-gray-100,
body.sr-home #dropdownContent .ws-border-gray-100 { border-color: var(--sr-bg-border) !important; }
body.sr-home .drop-profile-show-pc .ws-text-zinc-800,
body.sr-home #dropdownContent .ws-text-zinc-800 { color: var(--sr-text) !important; }
body.sr-home .drop-profile-show-pc .ws-text-red-600,
body.sr-home #dropdownContent .ws-text-red-600 { color: var(--sr-btn-2) !important; }

/* -----------------------------------------------------------------------------
   4. DẢI CHẠY CHỮ (marquee vàng → strip tối)
   -------------------------------------------------------------------------- */
body.sr-home .sr-strip {
  background: var(--sr-bg-card) !important;
  background-image: none !important;
  color: var(--sr-text) !important;
  border-bottom: 1px solid var(--sr-bg-border);
}
body.sr-home .sr-strip * { color: var(--sr-text) !important; }

/* Khối thông báo marquee (nền trắng, chữ đỏ) */
body.sr-home .sr-ticker {
  background: var(--sr-bg-card) !important;
  border: 1px solid var(--sr-bg-border);
  border-radius: var(--sr-r-md) !important;
}
body.sr-home .sr-ticker .sr-ticker-icon {
  background: var(--sr-bg-card) !important;
  color: var(--sr-text-danger) !important;
}
body.sr-home .sr-ticker a,
body.sr-home .sr-ticker span,
body.sr-home .sr-ticker b { color: var(--sr-text) !important; }

/* -----------------------------------------------------------------------------
   5. HERO — banner + 2 banner phụ + card TOP NẠP
   -------------------------------------------------------------------------- */
body.sr-home .sr-hero { margin-top: 1.5rem; }

body.sr-home .sr-hero-main .sr-media,
body.sr-home .sr-hero-side .sr-media {
  border-radius: var(--sr-r-xl) !important;
  overflow: hidden;
  background: var(--sr-bg-card) !important;
  box-shadow: var(--sr-sh-2xl);
}
body.sr-home .sr-hero-side .sr-media { border-radius: var(--sr-r-lg) !important; box-shadow: var(--sr-sh-base); }
body.sr-home .sr-hero img { display: block; width: 100%; object-fit: cover; }
body.sr-home .sr-hero-side { display: block; }

/* -----------------------------------------------------------------------------
   6. CARD "TOP NẠP / Nạp thẻ / Thông báo"
   -------------------------------------------------------------------------- */
body.sr-home .sr-panel {
  background: var(--sr-bg-card) !important;
  border: 1px solid var(--sr-bg-border);
  border-radius: var(--sr-r-lg) !important;
  color: var(--sr-text) !important;
  box-shadow: var(--sr-sh-base);
  overflow: hidden;
}
body.sr-home .sr-panel-inner { background: var(--sr-bg-card) !important; }
body.sr-home .sr-panel * { color: var(--sr-text); }

/* nhãn tiêu đề */
body.sr-home .sr-panel > .sr-panel-head,
body.sr-home .sr-panel .sr-panel-head {
  background: var(--sr-bg-card) !important;
  color: var(--sr-text) !important;
  font-weight: 700;
}
body.sr-home .sr-panel .sr-panel-head img { filter: brightness(1.1); }

/* Thanh tab */
body.sr-home .sr-tabs {
  background: var(--sr-bg-nav) !important;
  border-color: var(--sr-bg-border) !important;
  border-radius: var(--sr-r-md) !important;
  color: var(--sr-text) !important;
}
body.sr-home .sr-tabs .tablinks {
  border-radius: var(--sr-r-md) !important;
  color: var(--sr-text-2) !important;
  transition: .2s;
}
body.sr-home .sr-tabs .tablinks:hover { color: var(--sr-text) !important; }
body.sr-home .sr-tabs .tablinks.ws-bg-red-500,
body.sr-home .sr-tabs .tablinks.sr-tab-active {
  background: var(--sr-bg-chip) !important;
  color: #fff !important;
  font-weight: 600;
}

/* Form nạp thẻ */
body.sr-home .sr-panel select.el-input__inner,
body.sr-home .sr-panel input.el-input__inner {
  background: var(--sr-bg-main) !important;
  border: 1px solid var(--sr-bg-border) !important;
  color: var(--sr-text) !important;
  border-radius: var(--sr-r-md) !important;
}
body.sr-home .sr-panel select.el-input__inner option {
  background: var(--sr-bg-card);
  color: var(--sr-text);
}
body.sr-home .sr-panel input.el-input__inner::placeholder { color: var(--sr-text-2) !important; }

/* Bảng TOP NẠP */
body.sr-home .sr-toprow {
  background: var(--sr-bg-main) !important;
  border-radius: var(--sr-r-sm) !important;
}
body.sr-home .sr-toprow .sr-toprow-amount {
  background: var(--sr-bg-chip) !important;
  color: #fff !important;
  border-radius: var(--sr-r-sm) !important;
}
body.sr-home .sr-toprow span { color: var(--sr-text) !important; }

/* Nội dung thông báo (gift) */
body.sr-home .sr-panel .sr-gift { color: var(--sr-text) !important; }
body.sr-home .sr-panel .sr-gift * { color: var(--sr-text) !important; }
body.sr-home .sr-panel .sr-gift a { color: var(--sr-btn-2) !important; text-decoration: underline; }

/* -----------------------------------------------------------------------------
   7. NÚT (Element-UI) → nút gradient thương hiệu
   -------------------------------------------------------------------------- */
body.sr-home .el-button {
  border-radius: 9px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  transition: .2s;
}
body.sr-home .el-button--primary {
  background: var(--sr-grad) !important;
  background-image: var(--sr-grad) !important;
  border: 0 !important;
  color: #111 !important;
}
body.sr-home .el-button--primary span,
body.sr-home .el-button--primary i { color: #111 !important; }
body.sr-home .el-button--primary:hover { background: var(--sr-grad-rev) !important; }
body.sr-home .el-button:not(.el-button--primary) {
  background: #282828 !important;
  border: 0 !important;
  color: #f9f9f9 !important;
}
body.sr-home .el-button:not(.el-button--primary):hover { background: #525252 !important; }

/* -----------------------------------------------------------------------------
   8. LƯỚI ICON GAME
   -------------------------------------------------------------------------- */
body.sr-home .sr-icon-panel {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
body.sr-home .sr-icon-grid {
  display: grid !important;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: .75rem;
  margin-bottom: 2.5rem;
}
body.sr-home .sr-icon-grid > * { grid-column: auto !important; }
body.sr-home .sr-icon-item { padding: .5rem .25rem !important; border-radius: var(--sr-r-md); transition: .2s; }
body.sr-home .sr-icon-item img {
  border-radius: var(--sr-r-icon) !important;
  width: 85px !important;
  height: 85px !important;
  object-fit: cover;
  background: var(--sr-bg-card);
}
body.sr-home .sr-icon-item:hover { box-shadow: rgba(0, 23, 230, .62) 0 4px 12px; }
body.sr-home .sr-icon-item span {
  color: var(--sr-text) !important;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
}

/* -----------------------------------------------------------------------------
   9. LƯỚI SẢN PHẨM + CARD SẢN PHẨM
   -------------------------------------------------------------------------- */
body.sr-home .sr-section {
  background: transparent !important;
  padding: 1rem 0;
}
body.sr-home .sr-section-inner,
body.sr-home .sr-section .ws-home-child,
body.sr-home .sr-section [class*="ws-bg-white"] { background: transparent !important; }

body.sr-home .sr-cat-title {
  color: var(--sr-text) !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .3px;
}
body.sr-home .sr-cat-desc { color: var(--sr-text-2) !important; }

/* lưới sản phẩm: 5 cột ≥1200 / 4 ≥960 / 3 ≥768 / 2 mặc định */
body.sr-home .sr-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: .75rem !important;
}
body.sr-home .sr-grid > * { grid-column: auto !important; }

/* card */
body.sr-home .sr-card {
  background: var(--sr-bg-card) !important;
  border-radius: var(--sr-r-sm) !important;
  overflow: hidden;
  box-shadow: var(--sr-sh-base);
  display: flex;
  flex-direction: column;
  height: 350px;
  transition: .2s;
}
body.sr-home .sr-card:hover { transform: translateY(-2px); box-shadow: var(--sr-sh-xl); }
body.sr-home .sr-card > a { display: flex; flex-direction: column; height: 100%; }

/* ảnh */
body.sr-home .sr-card-thumb {
  position: relative;
  height: 50% !important;
  min-height: 0;
  margin-bottom: 0 !important;
  overflow: hidden;
  border-radius: 0 !important;
  background: var(--sr-bg-main) !important;
  aspect-ratio: auto !important;
}
/* khung bọc ảnh bên trong (ws-overflow-hidden + aspect-ratio 16/9) */
body.sr-home .sr-card-thumb > div {
  height: 100% !important;
  aspect-ratio: auto !important;
  border-radius: 0 !important;
  background: transparent !important;
}
body.sr-home .sr-card-thumb img,
body.sr-home .sr-card-thumb .sr-card-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  border-radius: 0 !important;
}
/* lớp gradient mờ dần xuống đáy ảnh */
body.sr-home .sr-card-thumb::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 40%;
  background: linear-gradient(to top, var(--sr-bg-card), transparent);
  pointer-events: none;
}

/* nhãn góc (label) */
body.sr-home .sr-card-label {
  position: absolute;
  top: 8px; left: 8px;
  background: var(--sr-bg-chip) !important;
  color: #fff !important;
  border-radius: 9999px !important;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 700;
  z-index: 2;
}
/* chip "Đã bán / Xem" */
body.sr-home .sr-card-stat {
  position: absolute;
  bottom: 8px; right: 8px;
  background: transparent !important;
  color: var(--sr-text-2) !important;
  font-size: 11px;
  z-index: 2;
}
body.sr-home .sr-card-stat span,
body.sr-home .sr-card-stat small { color: var(--sr-text-2) !important; }
body.sr-home .sr-card-stat .el-divider { background: var(--sr-bg-border) !important; margin: 0 4px; }

/* thân card */
body.sr-home .sr-card-body {
  height: 50%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  gap: .5rem;
  min-height: 0 !important;
}
body.sr-home .sr-card-title {
  color: var(--sr-text) !important;
  font-weight: 700 !important;
  font-size: 13px;
  line-height: 1.33;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* badge "Hiện có: N" */
body.sr-home .sr-card-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-inline: auto;
  width: fit-content;
  background: var(--sr-bg-chip) !important;
  padding: 3.2px 12.8px 13px;
  border-radius: 9999px;
  font-size: 13px;
  line-height: 20px;
  z-index: 3;
}
body.sr-home .sr-card-badge .sr-badge-key {
  margin-right: .3rem;
  font-weight: 500;
  color: #fff !important;
}
body.sr-home .sr-card-badge .sr-badge-val {
  font-weight: 700;
  color: #fff !important;
}

/* giá */
body.sr-home .sr-card-prices {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: .25rem;
  position: relative;
  padding-top: 0;
  margin-top: auto;
}
body.sr-home .sr-price-col {
  display: flex;
  flex-direction: column;
  gap: 0;
}
body.sr-home .sr-price-col:last-child:not(:first-child) { text-align: right; }
body.sr-home .sr-price-now {
  color: var(--sr-text) !important;
  font-weight: 700 !important;
  font-size: 15px;
  line-height: 1.3;
}
body.sr-home .sr-price-old {
  color: var(--sr-text-muted) !important;
  text-decoration: line-through;
  font-weight: 400 !important;
  font-size: 15px;
  line-height: 1.3;
}
body.sr-home .sr-price-label {
  font-style: italic;
  color: var(--sr-text-muted) !important;
  font-size: 13px;
  font-weight: 400 !important;
  line-height: 1.3;
  margin: 0;
}
body.sr-home .sr-card-divider {
  opacity: .6;
  border: 0;
  border-top: 1px solid #4b5563;
  width: 85%;
  margin: 0 auto;
}

/* -----------------------------------------------------------------------------
   10. MODAL THÔNG BÁO
   -------------------------------------------------------------------------- */
body.sr-home .el-overlay { background: rgba(0, 0, 0, .6); }
body.sr-home .el-dialog {
  background: var(--sr-bg-modal) !important;
  border-radius: var(--sr-r-lg) !important;
  box-shadow: var(--sr-sh-xl) !important;
  color: var(--sr-text) !important;
}
body.sr-home .el-dialog__header { border-bottom: 1px solid var(--sr-bg-border); }
body.sr-home .el-dialog__title {
  color: var(--sr-text) !important;
  font-weight: 700;
  font-size: 1.125rem;
}
body.sr-home .el-dialog__header .ws-text-red-500 { color: var(--sr-text-danger) !important; }
body.sr-home .el-dialog__body { color: var(--sr-text) !important; }
body.sr-home .el-dialog__body * { color: var(--sr-text); }
body.sr-home .el-dialog__body a { color: var(--sr-btn-2) !important; }
body.sr-home .el-dialog__footer { border-top: 1px solid var(--sr-bg-border); }
body.sr-home .el-dialog__headerbtn i,
body.sr-home .el-dialog__close svg { color: var(--sr-text-2) !important; fill: currentColor; }

/* nội dung bên trong modal (nạp tiền / nạp thẻ / ngân hàng / đăng nhập) */
body.sr-home .el-dialog label,
body.sr-home .el-dialog .ws-text-black,
body.sr-home .el-dialog .ws-text-zinc-800,
body.sr-home .el-dialog .ws-text-zinc-900 { color: var(--sr-text) !important; }
body.sr-home .el-dialog p,
body.sr-home .el-dialog .ws-text-zinc-500,
body.sr-home .el-dialog .ws-text-zinc-600,
body.sr-home .el-dialog .ws-text-zinc-700,
body.sr-home .el-dialog .ws-text-sm { color: var(--sr-text-2) !important; }
body.sr-home .el-dialog .ws-border-b,
body.sr-home .el-dialog .ws-border-t,
body.sr-home .el-dialog .ws-border { border-color: var(--sr-bg-border) !important; }
body.sr-home .el-dialog [class*="hover:ws-bg-zinc-100"]:hover { background: var(--sr-bg-border) !important; }
body.sr-home .el-dialog input,
body.sr-home .el-dialog select,
body.sr-home .el-dialog textarea {
  background: var(--sr-bg-main) !important;
  border: 1px solid var(--sr-bg-border) !important;
  color: var(--sr-text) !important;
  border-radius: var(--sr-r-md) !important;
}
body.sr-home .el-dialog input::placeholder { color: var(--sr-text-2) !important; }
body.sr-home .el-dialog option { background: var(--sr-bg-card); color: var(--sr-text); }
body.sr-home .el-dialog .ws-bg-zinc-50,
body.sr-home .el-dialog .ws-bg-zinc-100 { background: var(--sr-bg-main) !important; }
/* đường phân cách "hoặc" trong modal đăng nhập */
body.sr-home .el-divider,
body.sr-home .el-divider__text,
body.sr-home .el-divider--horizontal {
  background: var(--sr-bg-card) !important;
  border-color: var(--sr-bg-border) !important;
  color: var(--sr-text-2) !important;
}
body.sr-home .el-divider__text { background: var(--sr-bg-card) !important; color: var(--sr-text-2) !important; }

/* -----------------------------------------------------------------------------
   11. NHẬN XÉT KHÁCH HÀNG
   -------------------------------------------------------------------------- */
body.sr-home .sr-reviews { color: var(--sr-text) !important; }
body.sr-home .sr-review-title { color: var(--sr-text) !important; }
body.sr-home .sr-review-card,
body.sr-home .sr-reviews .ws-bg-white {
  background: var(--sr-bg-card) !important;
  border: 1px solid var(--sr-bg-border);
  border-radius: var(--sr-r-lg) !important;
  color: var(--sr-text) !important;
  box-shadow: var(--sr-sh-base);
}
body.sr-home .sr-review-card h4,
body.sr-home .sr-review-card span,
body.sr-home .sr-reviews h4,
body.sr-home .sr-reviews h4 span { color: var(--sr-text) !important; }
/* nội dung nhận xét phía dưới avatar */
body.sr-home .sr-reviews .ws-text-zinc-700,
body.sr-home .sr-reviews .ws-text-zinc-800,
body.sr-home .sr-reviews p { color: var(--sr-text-2) !important; }
/* chữ "tốt", "Acc giống ảnh 100%"... -> trắng */
body.sr-home .sr-reviews .rate-comment,
body.sr-home .rate-comment {
  color: var(--sr-text) !important;
}
body.sr-home .sr-reviews .ws-text-zinc-500,
body.sr-home .sr-reviews .ws-text-xs { color: var(--sr-text-muted) !important; }

/* -----------------------------------------------------------------------------
   11b. DẢI THÔNG BÁO (MARQUEE) + BANNER PHỤ
   -------------------------------------------------------------------------- */
body.sr-home .ws-bg-yellow-300 {
  background: var(--sr-bg-chip) !important;
  color: #fff !important;
}
body.sr-home .ws-bg-yellow-300 *,
body.sr-home .ws-bg-yellow-300 strong,
body.sr-home .ws-bg-yellow-300 span,
body.sr-home .ws-bg-yellow-300 p,
body.sr-home .ws-bg-yellow-300 div { color: #fff !important; }
body.sr-home .ws-bg-yellow-300 .mar { color: #fff !important; }
body.sr-home .ws-notification-home { color: #fff !important; }

/* -----------------------------------------------------------------------------
   11c. WIDGET HỖ TRỢ (nút nổi + popup) + POPOVER
   -------------------------------------------------------------------------- */
body.sr-home .support-toggle,
body.sr-home .support-btn,
body.sr-home #supportToggle {
  background: var(--sr-bg-chip) !important;
  color: #fff !important;
  box-shadow: var(--sr-sh-xl) !important;
}
body.sr-home .support-footer {
  background: var(--sr-bg-card) !important;
  color: var(--sr-text-2) !important;
  border-top: 1px solid var(--sr-bg-border) !important;
}
body.sr-home .support-footer *,
body.sr-home .support-footer a { color: var(--sr-text-2) !important; }
body.sr-home .support-popup {
  background: var(--sr-bg-card) !important;
  border: 1px solid var(--sr-bg-border) !important;
}
body.sr-home .support-section {
  border-bottom-color: var(--sr-bg-border) !important;
  color: var(--sr-text) !important;
}
body.sr-home .support-section:hover { background: var(--sr-bg-main) !important; }
body.sr-home .support-section * { color: var(--sr-text) !important; }

body.sr-home .el-popover.el-popper,
body.sr-home .el-popover {
  background: var(--sr-bg-card) !important;
  border: 1px solid var(--sr-bg-border) !important;
  color: var(--sr-text) !important;
}
body.sr-home .el-popover * { color: var(--sr-text) !important; }
body.sr-home .el-popper__arrow::before,
body.sr-home .el-popover .el-popper__arrow::before {
  background: var(--sr-bg-card) !important;
  border-color: var(--sr-bg-border) !important;
}

/* hộp thông tin ngân hàng trong modal nạp ATM */
body.sr-home .sr-bank-box {
  background: var(--sr-bg-card) !important;
  background-image: none !important;
  border-color: var(--sr-bg-border) !important;
  border-radius: var(--sr-r-sm) !important;
  color: var(--sr-text) !important;
}
body.sr-home .sr-bank-box,
body.sr-home .sr-bank-box * { color: var(--sr-text) !important; }
body.sr-home .sr-bank-box span[style*="color:rgb(0,0,0)"] { color: var(--sr-text) !important; }
body.sr-home .sr-bank-box .ws-bg-zinc-900 { background: var(--sr-bg-chip) !important; }

/* -----------------------------------------------------------------------------
   15b. TRANG DANH MỤC / DỊCH VỤ  (caythue, body/random, pet)
   -------------------------------------------------------------------------- */
body.sr-home .sr-page-cat .ws-more-show,
body.sr-home .ws-more-show {
  background: var(--sr-bg-card) !important;
  border: 1px solid var(--sr-bg-border) !important;
  color: var(--sr-text) !important;
  border-radius: var(--sr-r-sm) !important;
}
body.sr-home .ws-more-show *,
body.sr-home .ws-more-show p,
body.sr-home .ws-more-show span,
body.sr-home .ws-more-show b,
body.sr-home .ws-more-show strong,
body.sr-home .ws-more-show li { color: var(--sr-text) !important; }

/* khung lọc tìm kiếm */
body.sr-home .ws-bg-white.ws-rounded.ws-px-2 {
  background: var(--sr-bg-card) !important;
  border: 1px solid var(--sr-bg-border) !important;
  border-radius: var(--sr-r-sm) !important;
}
body.sr-home .ws-bg-white.ws-rounded.ws-px-2 *,
body.sr-home .ws-bg-white.ws-rounded.ws-px-2 b,
body.sr-home .ws-bg-white.ws-rounded.ws-px-2 label { color: var(--sr-text) !important; }
body.sr-home .ws-bg-white.ws-rounded.ws-px-2 input,
body.sr-home .ws-bg-white.ws-rounded.ws-px-2 select,
body.sr-home .ws-bg-white.ws-rounded.ws-px-2 .el-input__wrapper {
  background: var(--sr-bg-main) !important;
  border: 1px solid var(--sr-bg-border) !important;
  color: var(--sr-text) !important;
  border-radius: var(--sr-r-md) !important;
}
body.sr-home .ws-bg-white.ws-rounded.ws-px-2 input::placeholder { color: var(--sr-text-muted) !important; }
body.sr-home .ws-bg-white.ws-rounded.ws-px-2 select option { background: var(--sr-bg-card); color: var(--sr-text); }
body.sr-home .ws-bg-white.ws-rounded.ws-px-2 .bg-gray-100 { background: var(--sr-bg-main) !important; color: var(--sr-text) !important; }
body.sr-home .ws-bg-white.ws-rounded.ws-px-2 .border-gray-300 {
  border-color: var(--sr-bg-border) !important;
  color: var(--sr-text) !important;
}
body.sr-home .ws-bg-white.ws-rounded.ws-px-2 button,
body.sr-home .ws-bg-white.ws-rounded.ws-px-2 .el-button { border-radius: var(--sr-r-md) !important; }

/* thẻ item trong trang dịch vụ (pet.php) */
body.sr-home .item-card.ws-bg-white,
body.sr-home .item-card {
  background: var(--sr-bg-card) !important;
  border: 1px solid var(--sr-bg-border) !important;
  border-radius: var(--sr-r-sm) !important;
  color: var(--sr-text) !important;
  box-shadow: var(--sr-sh-base) !important;
  overflow: hidden;
}
body.sr-home .item-card:hover { box-shadow: var(--sr-sh-xl) !important; transform: translateY(-2px); }
body.sr-home .item-card h2 {
  color: var(--sr-text) !important;
  border-color: var(--sr-bg-border) !important;
}
body.sr-home .item-card > p { color: var(--sr-text) !important; }

/* gói vật phẩm chọn trong form đặt hàng */
body.sr-home .ws-bg-zinc-100 {
  background: var(--sr-bg-main) !important;
  color: var(--sr-text-2) !important;
  border: 1px solid var(--sr-bg-border) !important;
}
body.sr-home .el-dialog .ws-bg-zinc-100 { background: var(--sr-bg-main) !important; }
body.sr-home .el-dialog .ws-text-black,
body.sr-home .el-dialog label,
body.sr-home .el-dialog b,
body.sr-home .el-dialog strong { color: var(--sr-text) !important; }

/* nút nổi hỗ trợ: giữ vòng icon trắng cho nổi bật */
body.sr-home .support-icon-circle { background: #ffffff !important; }

/* banner hero: bỏ nền xám sáng */
body.sr-home .sr-media,
body.sr-home .sr-media.ws-bg-zinc-50 { background: var(--sr-bg-main) !important; }

/* select2 (dropdown tìm item) -> nền tối */
body.sr-home .select2-container .select2-selection--single,
body.sr-home .select2-selection.select2-selection--single {
  background: var(--sr-bg-main) !important;
  border: 1px solid var(--sr-bg-border) !important;
  color: var(--sr-text) !important;
  border-radius: var(--sr-r-md) !important;
}
body.sr-home .select2-selection--single .select2-selection__rendered { color: var(--sr-text) !important; }
body.sr-home .select2-selection--single .select2-selection__arrow b { border-color: var(--sr-text-2) transparent transparent !important; }
body.sr-home .select2-dropdown {
  background: var(--sr-bg-card) !important;
  border: 1px solid var(--sr-bg-border) !important;
  color: var(--sr-text) !important;
}
body.sr-home .select2-search__field {
  background: var(--sr-bg-main) !important;
  border: 1px solid var(--sr-bg-border) !important;
  color: var(--sr-text) !important;
}
body.sr-home .select2-results__option { color: var(--sr-text) !important; }
body.sr-home .select2-results__option--highlighted { background: var(--sr-bg-chip) !important; }

/* -----------------------------------------------------------------------------
   12. FOOTER
   -------------------------------------------------------------------------- */
body.sr-home .sr-footer {
  background: var(--sr-bg-footer) !important;
  color: var(--sr-text) !important;
  margin-top: 2rem;
  padding: 2.5rem 0;
  border-top: 1px solid var(--sr-bg-border);
}
body.sr-home .sr-footer * { color: var(--sr-text); }
body.sr-home .sr-footer a { color: var(--sr-text); }
body.sr-home .sr-footer a:hover { text-decoration: underline; }
body.sr-home .sr-footer h1,
body.sr-home .sr-footer h2,
body.sr-home .sr-footer h3,
body.sr-home .sr-footer h4 {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.5rem;
  line-height: 1.33;
  margin-bottom: 1.25rem;
}
body.sr-home .sr-footer p { color: var(--sr-text-2) !important; }

/* dải "Hỗ trợ các phương thức nạp" */
body.sr-home .sr-support-bar {
  background: var(--sr-bg-card) !important;
  border-top: 1px solid var(--sr-bg-border);
  color: var(--sr-text) !important;
}
body.sr-home .sr-support-bar span { color: var(--sr-text) !important; }

/* 4 ô tiện ích */
body.sr-home .sr-features { background: transparent !important; }
body.sr-home .sr-feature-card {
  background: var(--sr-bg-card) !important;
  border: 1px solid var(--sr-bg-border);
  box-shadow: var(--sr-sh-base);
}
body.sr-home .sr-feature-card label { color: var(--sr-btn-2) !important; }

/* nhận xét khách hàng trong Footer nếu có */
body.sr-home .sr-footer .ws-border-zinc-800 { border-color: var(--sr-bg-border) !important; }
body.sr-home .sr-footer .sr-copyright {
  background: var(--sr-bg-footer) !important;
  border-top: 1px solid var(--sr-bg-border);
  padding: .5rem 0;
  text-align: center;
  color: var(--sr-text-2) !important;
}

/* -----------------------------------------------------------------------------
   13. NÚT NỔI (bonus) + STACK NÚT PHẢI DƯỚI
   -------------------------------------------------------------------------- */
body.sr-home #bonus img,
body.sr-home #bonus_login img { filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .45)); }

/* -----------------------------------------------------------------------------
   13b. TRANG CHI TIẾT TÀI KHOẢN  (sr-acc-*)
   -------------------------------------------------------------------------- */
body.sr-home .sr-acc {
  max-width: 1500px !important;
}
body.sr-home .sr-acc-breadcrumb,
body.sr-home .sr-acc-breadcrumb a,
body.sr-home .sr-acc-breadcrumb span,
body.sr-home .sr-acc-breadcrumb i {
  color: var(--sr-text-2) !important;
}
body.sr-home .sr-acc-breadcrumb a:hover { color: var(--sr-text) !important; }

/* 2 cột */
body.sr-home .sr-acc-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: start;
}
body.sr-home .sr-acc-col {
  background: var(--sr-bg-card) !important;
  border-radius: var(--sr-r-sm) !important;
  padding: 20px !important;
  margin: 0 !important;
  min-width: 0;
}

/* cột ảnh */
body.sr-home .sr-acc-gallery .your-carousel { border-radius: var(--sr-r-sm); overflow: hidden; position: relative; }
body.sr-home .sr-acc-gallery .your-carousel img {
  width: 100% !important;
  border-radius: var(--sr-r-sm) !important;
  object-fit: contain;
  background: #0f1428;
}
/* giới hạn chiều cao ảnh -> không kéo cột trái dài quá khổ */
body.sr-home .sr-acc-gallery .your-carousel img {
  max-height: 620px !important;
  height: auto !important;
  display: block;
  margin: 0 auto;
}
body.sr-home .sr-acc-gallery .slick-list,
body.sr-home .sr-acc-gallery .slick-track,
body.sr-home .sr-acc-gallery .slick-slide > div { max-height: 620px; }

/* dải ảnh preview (thumbnail) dưới ảnh lớn — giống storerbl */
body.sr-home .sr-acc-thumbs {
  list-style: none;
  margin: 10px 0 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-wrap: nowrap;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
body.sr-home .sr-acc-thumbs::-webkit-scrollbar { height: 5px; }
body.sr-home .sr-acc-thumbs::-webkit-scrollbar-thumb { background: var(--sr-bg-border); border-radius: 3px; }
body.sr-home .sr-acc-thumb {
  flex: 0 0 auto;
  width: 100px;
  height: 74px;
  border: 2px solid transparent;
  border-radius: var(--sr-r-sm);
  background: #0f1428;
  overflow: hidden;
  cursor: pointer;
  transition: border-color .2s;
}
body.sr-home .sr-acc-thumb img {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: cover;
  display: block;
  opacity: .75;
  transition: opacity .2s;
}
body.sr-home .sr-acc-thumb:hover img { opacity: 1; }
body.sr-home .sr-acc-thumb.selected { border-color: var(--sr-blue) !important; }
body.sr-home .sr-acc-thumb.selected img { opacity: 1; }
body.sr-home .sr-acc-gallery .slick-prev,
body.sr-home .sr-acc-gallery .slick-next {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: rgba(0, 0, 0, .45) !important;
  color: #fff !important;
  border: 0;
  border-radius: 50%;
  width: 34px !important;
  height: 34px !important;
  padding: 0;
  z-index: 5;
  text-indent: -9999px;
  overflow: hidden;
  display: flex !important;
  align-items: center;
  justify-content: center;
}
body.sr-home .sr-acc-gallery .slick-prev { left: 10px !important; }
body.sr-home .sr-acc-gallery .slick-next { right: 10px !important; }
body.sr-home .sr-acc-gallery .slick-prev:before,
body.sr-home .sr-acc-gallery .slick-next:before {
  font-family: "slick" !important;
  text-indent: 0;
  display: block;
  color: #fff !important;
  opacity: 1;
  font-size: 14px;
  line-height: 1;
}
body.sr-home .sr-acc-gallery .slick-prev:before { content: "\2190"; font-family: inherit !important; }
body.sr-home .sr-acc-gallery .slick-next:before { content: "\2192"; font-family: inherit !important; }
body.sr-home .sr-acc-gallery .slick-dots { bottom: 8px; }
body.sr-home .sr-acc-gallery .slick-dots li button:before { color: var(--sr-text-2) !important; }
body.sr-home .sr-acc-gallery .slick-dots li.slick-active button:before { color: #fff !important; }

/* cột thông tin */
body.sr-home .sr-acc-info { display: flex; flex-direction: column; }
body.sr-home .sr-acc-info > div {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* tiêu đề */
body.sr-home .sr-acc-head { padding: 12px 20px; }
body.sr-home .sr-acc-head .sr-acc-eyebrow {
  font-size: 15px;
  font-weight: 400;
  color: var(--sr-text) !important;
  margin: 0;
}
body.sr-home .sr-acc-head .sr-acc-code {
  font-size: 25px;
  font-weight: 700;
  color: var(--sr-text) !important;
  margin: .25rem 0 0;
  line-height: 1.3;
}

/* hộp giá */
body.sr-home .sr-acc-price-box {
  background: var(--sr-bg-card) !important;
  border: 1px solid var(--sr-bg-border) !important;
  border-radius: 6px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
body.sr-home .sr-acc-price-label {
  font-size: 14px;
  font-weight: 700;
  color: #f87171 !important;
  margin: 0;
}
body.sr-home .sr-acc-price {
  font-size: 24px;
  font-weight: 700;
  color: #f87171 !important;
  margin: 0;
}
body.sr-home .sr-acc-price-old {
  font-size: 14px;
  font-weight: 700;
  color: var(--sr-text-muted) !important;
  margin: 0;
  text-decoration: line-through;
}

/* hộp mô tả ngắn */
body.sr-home .sr-acc-spec {
  background: var(--sr-bg-card) !important;
  border: 1px solid var(--sr-bg-border) !important;
  border-radius: 6px;
  padding: 20px;
  color: var(--sr-text) !important;
}
body.sr-home .sr-acc-spec b {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: var(--sr-text) !important;
  margin-bottom: .25rem;
}
body.sr-home .sr-acc-spec div { color: var(--sr-text) !important; }

/* nút mua / nạp */
body.sr-home .sr-acc-buywrap { display: flex; flex-direction: column; gap: 12px; }
body.sr-home .sr-acc-buy {
  width: 100% !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  background: rgb(238, 93, 80) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 6px !important;
  padding: 32px 16px !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  cursor: pointer;
  transition: filter .2s;
}
body.sr-home .sr-acc-buy:hover { filter: brightness(.92); }
body.sr-home .sr-acc-buy .el-icon svg { width: 20px; height: 20px; }
body.sr-home .sr-acc-or {
  color: var(--sr-text) !important;
  text-align: center;
  font-size: 16px;
  margin: 0;
}
body.sr-home .sr-acc-topup {
  width: 100% !important;
  background: rgb(34, 59, 200) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 5px !important;
  padding: 25px 20px !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  cursor: pointer;
  transition: background .2s;
}
body.sr-home .sr-acc-topup:hover { background: rgb(36, 64, 215) !important; }

/* bảng thông tin chi tiết -> nền tối */
body.sr-home .sr-acc-detailwrap { background: transparent !important; }
body.sr-home .sr-acc-detailwrap > label {
  color: var(--sr-text) !important;
  font-size: .875rem;
  font-weight: 500;
}
body.sr-home .sr-acc-detailwrap .ws-text-zinc-700,
body.sr-home .sr-acc-detailwrap .ws-text-zinc-800 { color: var(--sr-text-2) !important; }
body.sr-home .sr-acc-detailwrap .ws-bg-zinc-100 {
  background: var(--sr-bg-main) !important;
  color: var(--sr-text) !important;
  border-radius: var(--sr-r-sm);
}
body.sr-home .sr-acc-detailwrap .ws-bg-zinc-50 { background: transparent !important; }
body.sr-home .sr-acc-detailwrap .ws-bg-zinc-100 *,
body.sr-home .sr-acc-detailwrap .ws-bg-zinc-50 * { color: inherit !important; }

/* tài khoản đồng giá */
body.sr-home .sr-acc-related {
  background: var(--sr-bg-card) !important;
  border-radius: var(--sr-r-sm) !important;
  overflow: hidden;
}
body.sr-home .sr-acc-related > div > label {
  color: var(--sr-text) !important;
  font-size: 1.125rem;
  font-weight: 500;
}
body.sr-home .sr-acc-related .ws-bg-white { background: var(--sr-bg-main) !important; }
body.sr-home .sr-acc-related .ws-border { border-color: var(--sr-bg-border) !important; }
body.sr-home .sr-acc-related .ws-text-zinc-700,
body.sr-home .sr-acc-related .ws-text-zinc-800 { color: var(--sr-text-2) !important; }

/* -----------------------------------------------------------------------------
   14b. TRANG QUAY / VÒNG QUAY (quay9, quay2, quay3, quay6, quay7, quay8,
        quay17, quay18, quay23, quay31, spin1...) + khối "Nạp tiền" cột phải
   -------------------------------------------------------------------------- */
body.sr-home .ws-bg-white:not(.support-icon-circle) {
  background: var(--sr-bg-card) !important;
  color: var(--sr-text) !important;
}
body.sr-home .ws-bg-gray-100 { background: var(--sr-bg-main) !important; color: var(--sr-text-2) !important; }
body.sr-home .ws-bg-gray-200 { background: var(--sr-bg-border) !important; color: var(--sr-text) !important; }

/* select chọn giá / số lần quay */
body.sr-home .ws-game__price-play,
body.sr-home select.ws-bg-white,
body.sr-home select.ws-bg-gray-100 {
  background: var(--sr-bg-main) !important;
  color: var(--sr-text) !important;
  border-color: var(--sr-bg-border) !important;
}
body.sr-home .ws-game__price-play option { background: var(--sr-bg-card) !important; color: var(--sr-text) !important; }

/* nhãn el-tag trên trang quay */
body.sr-home .el-tag--light {
  background: var(--sr-bg-chip) !important;
  color: var(--sr-text) !important;
  border-color: var(--sr-bg-chip-2) !important;
}
body.sr-home .el-tag--light .el-tag__content,
body.sr-home .el-tag--light a { color: var(--sr-text) !important; }

/* chữ xám trên trang quay -> sáng */
body.sr-home .ws-text-gray-800,
body.sr-home .ws-text-gray-700,
body.sr-home .ws-text-gray-600 { color: var(--sr-text-2) !important; }
body.sr-home .ws-text-gray-500,
body.sr-home .ws-text-gray-400 { color: var(--sr-text-muted) !important; }

/* chân khối danh sách gợi ý */
body.sr-home .ws-shadow-sm { box-shadow: none !important; }

/* --- biến thể dùng prefix tw-* (quay6, quay18, latbai...) --- */
body.sr-home .tw-bg-white:not(.support-icon-circle) {
  background: var(--sr-bg-card) !important;
  color: var(--sr-text) !important;
}
body.sr-home .tw-bg-gray-100 { background: var(--sr-bg-main) !important; color: var(--sr-text-2) !important; }
body.sr-home .tw-game__price-play,
body.sr-home select.tw-bg-white,
body.sr-home select.tw-bg-gray-100 {
  background: var(--sr-bg-main) !important;
  color: var(--sr-text) !important;
  border-color: var(--sr-bg-border) !important;
}
body.sr-home .tw-game__price-play option { background: var(--sr-bg-card) !important; color: var(--sr-text) !important; }
body.sr-home .tw-text-gray-800,
body.sr-home .tw-text-gray-700,
body.sr-home .tw-text-gray-600 { color: var(--sr-text-2) !important; }
body.sr-home .tw-text-gray-500,
body.sr-home .tw-text-gray-400 { color: var(--sr-text-muted) !important; }
body.sr-home .tw-shadow-sm { box-shadow: none !important; }
body.sr-home .tw-border,
body.sr-home .tw-border-2 { border-color: var(--sr-bg-border) !important; }
body.sr-home .ws-border { border-color: var(--sr-bg-border) !important; }

/* -----------------------------------------------------------------------------
   14. MOBILE BOTTOM NAV
   -------------------------------------------------------------------------- */
body.sr-home .sr-bottomnav {
  background: var(--sr-bg-nav) !important;
  border-top: 1px solid var(--sr-bg-border);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, .1);
}
body.sr-home .sr-bottomnav a,
body.sr-home .sr-bottomnav div { color: var(--sr-text-2) !important; }
body.sr-home .sr-bottomnav .sr-active,
body.sr-home .sr-bottomnav .sr-active * { color: var(--sr-blue) !important; }

/* -----------------------------------------------------------------------------
   15. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  body.sr-home .sr-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 1rem !important; }
  body.sr-home .sr-icon-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  body.sr-home .sr-card-title { font-size: 15px; }
  body.sr-home .sr-price-now,
  body.sr-home .sr-price-old { font-size: 17px; }
  body.sr-home .sr-card-stat { font-size: 12px; }
}
@media (max-width: 767px) {
  body.sr-home .sr-icon-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
  body.sr-home .sr-icon-item img { width: 62px !important; height: 62px !important; }
  body.sr-home .sr-card { height: 275px; }
  body.sr-home .sr-card-body { padding: .75rem .75rem; }
  body.sr-home .sr-card-stat { display: none; }
  body.sr-home .sr-hero-side { display: none !important; }
  body.sr-home .sr-nav { min-height: 64px; }

  /* trang chi tiết acc */
  body.sr-home .sr-acc-row {
    grid-template-columns: 1fr !important;
    padding-bottom: 70px;
  }
  body.sr-home .sr-acc-col { padding: 12px !important; }
  body.sr-home .sr-acc-head { padding: 8px 0; }
  body.sr-home .sr-acc-head .sr-acc-code { font-size: 20px; }
  body.sr-home .sr-acc-buy { padding: 22px 16px !important; font-size: 18px !important; }
  body.sr-home .sr-acc-topup { padding: 18px 16px !important; font-size: 16px !important; }
}
@media (min-width: 1200px) {
  body.sr-home .sr-grid { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
  body.sr-home .sr-icon-grid { gap: 1rem; }
}
@media (min-width: 960px) and (max-width: 1199.98px) {
  body.sr-home .sr-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}