/* ==========================================================
   VTUBER THEME OVERRIDE: KANEZUKI AKIRA (SOFT ROSE BLUSH)
   Tông đỏ nhạt hồng đào dịu dàng (Soft Rose / Blush Pink), êm mắt, không chói
   ========================================================== */
:root {
  /* ==========================================================================
     1. TÔNG MÀU CHỦ ĐẠO (PRIMARY ACCENT - ĐỎ NHẠT HỒNG ĐÀO / SOFT ROSE BLUSH)
     ========================================================================== */
  --theme-primary: #e8607a;            /* Màu chủ đạo chính: Nút bấm chính, tiêu đề nổi bật, viền phát sáng */
  --theme-primary-hover: #f07a90;      /* Màu khi rê chuột (hover) vào nút/thẻ (tông sáng hơn nhẹ nhàng) */
  --theme-primary-active: #c94e66;     /* Màu khi nhấn giữ (click/active) nút (tông đỏ hồng trầm chắc chắn) */
  --theme-primary-light: #fde8ed;      /* Màu phụ sáng phớt hồng: Dùng cho chữ nhấn mạnh, badge dịu mắt, highlight */
  --theme-primary-dark: #a83a52;       /* Tông đỏ hồng sẫm: Dùng cho góc tối của gradient tạo chiều sâu và đổ bóng */
  
  /* Aliases cho tính tương thích ngược với các thành phần giao diện cũ */
  --primary: var(--theme-primary);
  --primary-rgb: var(--theme-primary-rgb);
  
  /* Kênh RGB tương ứng của màu chủ đạo (dùng để ghép hàm rgba() tạo độ trong suốt mờ ảo glassmorphism) */
  --theme-primary-rgb: 232, 96, 122;
  --theme-primary-hover-rgb: 240, 122, 144;
  --theme-primary-active-rgb: 201, 78, 102;
  --theme-primary-light-rgb: 253, 232, 237;

  /* ==========================================================================
     2. TÔNG MÀU PHỤ / KIM LOẠI (SECONDARY / ACCENT - ÁNH BẠCH KIM / PLATINUM)
     ========================================================================== */
  --theme-secondary: #e2e8f0;          /* Màu phụ phối cùng: Ánh bạch kim sáng, tạo tương phản sang trọng với hồng đào */
  --theme-secondary-hover: #ffffff;    /* Màu phụ khi rê chuột (trắng thuần tinh khiết) */
  --theme-secondary-muted: #94a3b8;    /* Màu phụ sắc xám bạc: Viền phụ mờ, văn bản mô tả ít quan trọng */
  --theme-secondary-rgb: 226, 232, 240;      /* Kênh RGB màu phụ dùng cho viền kính mờ */
  --theme-secondary-muted-rgb: 148, 163, 184;/* Kênh RGB màu phụ trầm */

  /* ==========================================================================
     3. MÀU NỀN TỔNG THỂ (BACKGROUND & SPACE)
     ========================================================================== */
  --theme-bg-body: #0c0a13;            /* Màu nền tổng thể trang web (đen thạch anh huyền bí / obsidian midnight) */
  --theme-bg-rgb: 12, 10, 19;          /* Kênh RGB của nền để phối gradient lớp phủ và hiệu ứng hạt canvas */

  /* ==========================================================================
     4. HIỆU ỨNG THẺ KÍNH MỜ (GLASSMORPHISM TINT GRADIENTS) - Trong suốt hơn
     ========================================================================== */
  --theme-tint-card-start: rgba(20, 16, 26, 0.55);        /* Điểm bắt đầu gradient nền thẻ card (kính khói tối - trong suốt hơn) */
  --theme-tint-card-end: rgba(12, 9, 16, 0.65);          /* Điểm kết thúc gradient nền thẻ card */
  --theme-tint-card-hover-start: rgba(28, 22, 36, 0.68);  /* Màu thẻ card kính khi rê chuột vào */
  --theme-tint-card-hover-end: rgba(16, 12, 22, 0.75);
  --theme-tint-popup-start: rgba(22, 17, 30, 0.97);       /* Nền hộp thoại modal / popup (đậm đặc hơn để đọc chữ rõ) */
  --theme-tint-popup-end: rgba(14, 10, 20, 0.98);
  --theme-tint-header-start: rgba(14, 10, 20, 0.90);      /* Nền thanh điều hướng Header trên cùng */

  /* ==========================================================================
     5. ÁNH XẠ CHO TRANG QUẢN TRỊ ADMIN (ADMIN DASHBOARD TOKENS)
     ========================================================================== */
  --gold: #e8607a;                     /* Ánh xạ màu chủ đạo cho Admin (đỏ nhạt hồng đào) */
  --gold-dark: #c94e66;                /* Tông tối của nút/thẻ Admin */
  --gold-light: #f07a90;               /* Tông sáng của nút/thẻ Admin */
  --gold-glow: rgba(232, 96, 122, 0.18);/* Hào quang phát sáng dịu */
  --gold-glass: rgba(232, 96, 122, 0.08);/* Lớp tráng kính mờ ánh hồng đào */
  --gold-text: #ffffff;                /* Màu chữ trên nút/thẻ chủ đạo (luôn là màu trắng tinh để chống chói/dễ đọc) */
}

/* ==========================================================
   QUY TẮC PHỐI MÀU: TUYỆT ĐỐI KHÔNG VIỀN ĐỎ CHỮ ĐEN / VIỀN ĐEN CHỮ ĐỎ
   - Nút nền đỏ/viền đỏ: Luôn dùng chữ trắng thuần (#ffffff), icon trắng sáng.
   - Thẻ tối/nền tối: Không dùng chữ đỏ trên nền đen hoặc viền đỏ chữ đỏ.
     Dùng chữ trắng sáng rõ (#ffffff / #fce7f3), điểm xuyết icon màu nhung đỏ.
   ========================================================== */

/* --------------------------------------------------------------------------
   1. CÁC NÚT BẤM CHÍNH (PRIMARY / GOLD BUTTONS)
   Áp dụng cho:
   - .btn-gold, button.btn-gold: Nút bấm phong cách chủ đạo trong Bento Admin & các trang chức năng
   - .gacha-filter-btn.active: Nút lọc danh sách vật phẩm gacha đang được chọn
   - .confirm-modal-btn-confirm.gold, .confirm-modal-btn-confirm.primary: Nút xác nhận trong popup modal xác nhận
   -------------------------------------------------------------------------- */
.btn-gold,
button.btn-gold,
.gacha-filter-btn.active,
.confirm-modal-btn-confirm.gold,
.confirm-modal-btn-confirm.primary {
  color: #ffffff !important;                   /* Chữ trắng tinh tương phản cao trên nền đỏ hồng */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); /* Đổ bóng nhẹ cho chữ tăng độ sắc nét */
  font-weight: 700;
}

/* Icon SVG bên trong các nút bấm chính (Gold / Primary Button) */
.btn-gold svg,
button.btn-gold svg {
  stroke: #ffffff !important;                  /* Nét viền icon chuyển sang màu trắng đồng bộ với chữ */
}

/* Hiệu ứng khi rê chuột (Hover) vào nút bấm chính hoặc nút lọc đang chọn */
.btn-gold:hover,
button.btn-gold:hover,
.gacha-filter-btn.active:hover {
  color: #ffffff !important;
  filter: brightness(1.1);                     /* Tăng nhẹ độ sáng khi hover */
  box-shadow: 0 6px 20px rgba(232, 96, 122, 0.45); /* Hào quang phát sáng màu hồng đào */
}

/* --------------------------------------------------------------------------
   1b. NÚT TEST NẠP / HÀNH ĐỘNG ĐẶC BIỆT (AMBER BUTTONS)
   Áp dụng cho:
   - .btn-amber, button.btn-amber: Nút bấm Test Nạp giả lập giao dịch trong Bento Admin
   -------------------------------------------------------------------------- */
.btn-amber,
button.btn-amber {
  background: linear-gradient(135deg, #e8607a, #c94e66) !important; /* Dải màu gradient từ hồng đào sang đỏ trầm */
  box-shadow: 0 4px 14px rgba(232, 96, 122, 0.35) !important;       /* Đổ bóng phát sáng viền nút */
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  font-weight: 700;
}

/* Hiệu ứng khi rê chuột (Hover) vào nút Amber / Test Nạp */
.btn-amber:hover,
button.btn-amber:hover {
  background: linear-gradient(135deg, #f07a90, #e8607a) !important; /* Đổi màu gradient sáng hơn */
  box-shadow: 0 8px 22px rgba(232, 96, 122, 0.5) !important;        /* Mở rộng bán kính đổ bóng */
}

/* Icon SVG bên trong nút Amber / Test Nạp */
.btn-amber svg,
button.btn-amber svg {
  stroke: #ffffff !important;                  /* Nét viền icon màu trắng */
}

/* --------------------------------------------------------------------------
   2. THANH ĐIỀU HƯỚNG BENTO ADMIN (SIDEBAR NAVIGATION)
   Áp dụng cho:
   - .bento-nav-item.active: Tab danh mục đang được mở trong Sidebar Admin
   -------------------------------------------------------------------------- */
.bento-nav-item.active {
  color: #ffffff !important;                   /* Chữ trắng sáng chống chìm trên nền tối */
  background: linear-gradient(135deg, rgba(232, 96, 122, 0.22), rgba(232, 96, 122, 0.10)) !important; /* Lớp nền tráng kính ánh hồng */
  border-color: rgba(232, 96, 122, 0.45) !important;                                                    /* Đường viền phát sáng */
  box-shadow: 0 0 16px rgba(232, 96, 122, 0.18) !important;                                            /* Ánh sáng mờ bao quanh tab */
}

/* Icon đại diện bên trong tab danh mục Sidebar đang kích hoạt */
.bento-nav-item.active .bento-nav-icon,
.bento-nav-item.active .bento-nav-icon svg {
  color: #fce7f3 !important;                   /* Màu biểu tượng hồng phớt nhạt dịu mắt */
  stroke: #fce7f3 !important;
}

/* --------------------------------------------------------------------------
   3. HUY HIỆU & THÔNG SỐ OBS (BADGES, PILLS & WIDGET SPECS)
   Áp dụng cho:
   - .bento-role-badge: Huy hiệu phân quyền Streamer / Admin trên Sidebar
   - .badge-admin-pill, .badge-admin: Các thẻ huy hiệu đánh dấu trạng thái quản trị viên
   -------------------------------------------------------------------------- */
.bento-role-badge,
.badge-admin-pill,
.badge-admin {
  color: #ffffff !important;                   /* Chữ trắng rõ ràng dễ đọc */
  background: rgba(232, 96, 122, 0.2) !important;  /* Nền trong suốt màu hồng đào */
  border-color: rgba(232, 96, 122, 0.45) !important;/* Đường viền mỏng làm nổi bật huy hiệu */
  font-weight: 700 !important;
}

/* Ô giá trị kích thước / thông số widget OBS (độ phân giải Width x Height, FPS) */
.obs-spec-val {
  color: #ffffff !important;
  background: rgba(232, 96, 122, 0.2) !important;
  border-color: rgba(232, 96, 122, 0.4) !important;
}

/* Nút bấm chuyển đổi ẩn/hiện bảng thông số kỹ thuật OBS */
.btn-obs-specs-toggle {
  color: #f1f5f9 !important;
  background: rgba(232, 96, 122, 0.1) !important;
  border-color: rgba(232, 96, 122, 0.3) !important;
}

/* Trạng thái Hover của nút xem thông số kỹ thuật OBS */
.btn-obs-specs-toggle:hover {
  color: #ffffff !important;
  background: rgba(232, 96, 122, 0.2) !important;
  border-color: rgba(232, 96, 122, 0.5) !important;
}

/* --------------------------------------------------------------------------
   4. NÚT ĐĂNG XUẤT & HÀNH ĐỘNG CẢNH BÁO (LOGOUT / DANGER ACTIONS)
   Áp dụng cho:
   - .btn-bento-logout: Nút đăng xuất tài khoản quản trị trên thanh Sidebar
   -------------------------------------------------------------------------- */
.btn-bento-logout {
  color: #ffffff !important;                   /* Chữ màu trắng trên nền cảnh báo */
  background: rgba(239, 68, 68, 0.16) !important;   /* Nền đỏ cảnh báo trong suốt */
  border-color: rgba(239, 68, 68, 0.35) !important; /* Viền đỏ cảnh báo mờ */
}

/* Hiệu ứng khi rê chuột vào nút Đăng xuất */
.btn-bento-logout:hover {
  color: #ffffff !important;
  background: rgba(239, 68, 68, 0.3) !important;    /* Tăng độ đậm màu nền đỏ khi hover */
  border-color: rgba(239, 68, 68, 0.6) !important;
  box-shadow: 0 4px 16px rgba(239, 68, 68, 0.3) !important; /* Đổ bóng phát sáng đỏ */
}

/* --------------------------------------------------------------------------
   5. TIÊU ĐỀ & ĐIỂM NHẤN THỐNG KÊ (HIGHLIGHTS & STAT NUMBERS)
   Áp dụng cho:
   - .text-gold: Tiêu đề chào mừng Streamer, các dòng chữ điểm nhấn màu chủ đạo
   - .gacha-trigger-amount: Nhãn số tiền kích hoạt mốc quay gacha trong Admin
   - .stat-gold: Con số thống kê nổi bật trên các ô Bento Grid Dashboard
   -------------------------------------------------------------------------- */
.text-gold {
  color: #fce7f3 !important;                   /* Ánh bạch kim phớt hồng dịu êm, không chói lóa */
  text-shadow: 0 0 16px rgba(232, 96, 122, 0.35); /* Hào quang phát sáng nhẹ xung quanh chữ */
}

/* Khối hiển thị số tiền kích hoạt lượt quay gacha */
.gacha-trigger-amount {
  color: #ffffff !important;                   /* Số tiền hiển thị màu trắng rõ nét */
}

/* Ký hiệu đơn vị tiền tệ (ví dụ: đ, VNĐ) bên cạnh số tiền kích hoạt */
.gacha-trigger-amount span {
  color: #94a3b8 !important;                   /* Màu xám bạc cho đơn vị tiền tệ */
}

/* Chỉ số thống kê quan trọng trong các thẻ Bento Dashboard */
.stat-gold {
  color: #fce7f3 !important;                   /* Số liệu nổi bật ánh hồng nhạt */
}

/* --------------------------------------------------------------------------
   6. BIỂU MẪU & LIÊN KẾT ĐIỀU HƯỚNG (FORM INPUTS & AUTH LINKS)
   Áp dụng cho:
   - .donate-auth-link: Liên kết đăng nhập / chuyển đổi trang trên giao diện donate
   - .donate-error-msg: Khung hiển thị thông báo lỗi khi nhập liệu form donate
   - #subathonWidgetHint, #goalOverviewHint: Dòng văn bản hướng dẫn/chú thích widget
   -------------------------------------------------------------------------- */
.donate-auth-link {
  color: #f472b6 !important;                   /* Màu liên kết hồng đào sáng */
}

/* Trạng thái Hover của liên kết đăng nhập / chuyển trang */
.donate-auth-link:hover {
  color: #ffffff !important;                   /* Chuyển sang màu trắng tinh khi rê chuột */
}

/* Khung hiển thị thông báo lỗi validation trên form donate */
.donate-error-msg {
  color: #ffffff !important;
  background: rgba(232, 96, 122, 0.22) !important;  /* Nền thông báo lỗi tông hồng đỏ trong suốt */
  border-color: rgba(232, 96, 122, 0.45) !important;/* Viền nổi bật thông báo lỗi */
}

/* Dòng ghi chú hướng dẫn cấu hình widget Subathon và Mục tiêu (Goal) trong Admin */
#subathonWidgetHint span,
#goalOverviewHint span {
  color: #fce7f3 !important;                   /* Chữ ghi chú phụ phớt hồng dễ đọc */
}

/* ==========================================================
   7. TÙY CHỈNH VÒNG QUAY GACHA THEO KHÁCH HÀNG (AKIRA CUSTOM THEME)
   ========================================================== */
:root {
  /* Huy hiệu nhãn tiêu đề "VÒNG QUAY TIME" phía trên widget */
  --gacha-badge-bg: rgba(232, 96, 122, 0.28);        /* Nền huy hiệu kính mờ ánh hồng đào */
  --gacha-badge-border: rgba(240, 122, 144, 0.55);   /* Đường viền phát sáng của huy hiệu */
  --gacha-badge-shadow: 0 4px 16px rgba(232, 96, 122, 0.45); /* Bóng đổ hào quang màu hồng */
  --gacha-badge-color: #ffffff;                      /* Màu chữ tiêu đề "VÒNG QUAY TIME" */
  --gacha-badge-text-shadow: 0 1px 6px rgba(232, 96, 122, 0.7); /* Bóng chữ sắc nét */

  /* Dòng thông báo người ủng hộ "vừa quay" và số tiền donate */
  --gacha-action-color: #fce7f3;                     /* Màu chữ hành động "vừa quay" (hồng phớt) */
  --gacha-amount-color: #ff758f;                     /* Màu số tiền donate (hồng đào rực rỡ) */
  --gacha-amount-shadow: 0 0 14px rgba(232, 96, 122, 0.6), 0 2px 8px rgba(0, 0, 0, 0.95); /* Hào quang số tiền */

  /* Khung kết quả quay trúng thưởng hiển thị bên dưới vòng quay */
  --gacha-result-title-color: #ffffff;               /* Tiêu đề kết quả trúng thưởng (trắng tinh nổi bật) */
  --gacha-result-title-shadow: 0 0 18px rgba(232, 96, 122, 0.75), 0 2px 10px rgba(0, 0, 0, 0.95); /* Bóng phát sáng tiêu đề */
  --gacha-result-note-color: #fce7f3;                /* Màu văn bản mô tả hình phạt / phần thưởng nhận được */
  --gacha-result-note-shadow: 0 2px 8px rgba(0, 0, 0, 0.95); /* Bóng đổ văn bản ghi chú */

  /* ==========================================================
     8. TÙY CHỈNH THANH TIẾN TRÌNH MỤC TIÊU (GOAL PROGRESS BAR - AKIRA THEME)
     Tông đỏ nhạt hồng đào dịu dàng (Soft Rose / Blush Pink)
     ========================================================== */
  /* Khung thẻ kính Goal Card bao quanh toàn bộ thanh mục tiêu trên OBS */
  --goal-card-bg: linear-gradient(135deg, rgba(24, 18, 28, 0.88), rgba(16, 11, 20, 0.94)); /* Nền thẻ kính tối sẫm */
  --goal-card-border: 1.5px solid rgba(232, 96, 122, 0.4);                                  /* Viền thẻ kính phát sáng */
  --goal-card-shadow: 0 16px 45px rgba(0, 0, 0, 0.65), 0 0 25px rgba(232, 96, 122, 0.22); /* Đổ bóng sâu tạo chiều sâu OBS */

  /* Biểu tượng Icon & Tiêu đề mục tiêu */
  --goal-icon-color: #f07a90;                        /* Màu icon cúp / ngôi sao mục tiêu */
  --goal-title-color: #ffffff;                       /* Tiêu đề mục tiêu quyên góp (ví dụ: "Nâng cấp PC Stream") */
  --goal-title-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);

  /* Rãnh trượt tiến trình (Track) và Dải thanh màu đã đạt (Fill) */
  --goal-track-bg: rgba(10, 8, 14, 0.75);            /* Nền rãnh trượt màu đen khói */
  --goal-track-border: 1px solid rgba(255, 255, 255, 0.12); /* Đường viền mờ rãnh trượt */
  --goal-fill-bg: linear-gradient(90deg, #c94e66 0%, #e8607a 50%, #f07a90 100%); /* Dải gradient chạy từ đỏ trầm sang hồng tươi */
  --goal-fill-shadow: 0 0 18px rgba(232, 96, 122, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.35); /* Hào quang phát sáng thanh tiến độ */

  /* Hiển thị số tiền hiện tại & mục tiêu & phần trăm */
  --goal-current-amount-color: #f07a90;              /* Màu số tiền đã nhận được */
  --goal-current-amount-shadow: 0 0 12px rgba(232, 96, 122, 0.55), 0 1px 3px rgba(0, 0, 0, 0.8); /* Bóng phát sáng số tiền hiện tại */
  --goal-target-amount-color: rgba(255, 255, 255, 0.75); /* Màu số tiền mục tiêu cần đạt */
  --goal-pct-badge-bg: rgba(232, 96, 122, 0.22);     /* Nền huy hiệu hiển thị phần trăm (%) hoàn thành */
  --goal-pct-badge-border: 1px solid rgba(232, 96, 122, 0.5); /* Đường viền huy hiệu phần trăm */
  --goal-pct-badge-color: #ffffff;                   /* Chữ số phần trăm hoàn thành */
  --goal-pct-badge-shadow: 0 2px 8px rgba(232, 96, 122, 0.25);

  /* Delta Pill: Bong bóng thông báo khi có lượt donate mới làm tăng thanh tiến trình (+...VNĐ) */
  --goal-delta-bg: linear-gradient(135deg, #e8607a, #c94e66); /* Nền bong bóng cộng tiền mới */
  --goal-delta-color: #ffffff;                               /* Số tiền cộng thêm hiển thị màu trắng */
  --goal-delta-shadow: 0 6px 18px rgba(232, 96, 122, 0.5);   /* Đổ bóng nổi bật hiệu ứng cộng tiền */

  /* ==========================================================
     9. TÙY CHỈNH WIDGET ĐỒNG HỒ SUBATHON (SUBATHON TIMER OVERLAY - AKIRA THEME)
     ========================================================== */
  /* Khung thẻ kính Subathon Overlay Card trên OBS */
  --subathon-card-bg: linear-gradient(135deg, rgba(24, 18, 28, 0.88), rgba(16, 11, 20, 0.94)); /* Nền thẻ kính mờ khói tối */
  --subathon-card-border: 1.5px solid rgba(232, 96, 122, 0.4);                                  /* Viền phát sáng ánh hồng đào */
  --subathon-card-shadow: 0 16px 45px rgba(0, 0, 0, 0.65), 0 0 25px rgba(232, 96, 122, 0.22); /* Đổ bóng sâu tạo chiều sâu OBS */

  /* Chữ số đồng hồ đếm ngược */
  --subathon-digits-shadow: 0 0 20px rgba(232, 96, 122, 0.6), 0 0 40px rgba(232, 96, 122, 0.3); /* Hào quang phát sáng chữ số đồng hồ */
}

/* --------------------------------------------------------------------------
   KHUNG THẺ KÍNH NỀN WIDGET ĐỒNG HỒ SUBATHON (SUBATHON OVERLAY CARD)
   Áp dụng cho:
   - .subathon-overlay-card: Khung thẻ kính chứa toàn bộ nội dung widget Subathon trên OBS
   -------------------------------------------------------------------------- */
.subathon-overlay-card {
  background: var(--subathon-card-bg, linear-gradient(135deg, rgba(24, 18, 28, 0.88), rgba(16, 11, 20, 0.94))) !important; /* Lớp nền thẻ kính mờ chống lóa OBS */
  border: var(--subathon-card-border, 1.5px solid rgba(232, 96, 122, 0.4)) !important;                                       /* Đường viền ánh hồng đào đồng bộ nhận diện */
  box-shadow: var(--subathon-card-shadow, 0 16px 45px rgba(0, 0, 0, 0.65), 0 0 25px rgba(232, 96, 122, 0.22)) !important;  /* Hiệu ứng bóng đổ nổi bật trên stream */
}

/* ==========================================================
   10. TÙY CHỈNH CHỌN CHẾ ĐỘ, MỐC THƯỞNG & GACHA (AKIRA THEME)
   Giao diện chọn chế độ ủng hộ (Mặc định / Mốc Thưởng / Quay Gacha) trên form donate
   ========================================================== */

/* --------------------------------------------------------------------------
   10a. CÁC NÚT TAB CHỌN CHẾ ĐỘ DONATE (DONATE MODE PILLS)
   Áp dụng cho:
   - .mode-pill.is-active: Tab chế độ đang được người dùng lựa chọn
   - .mode-pill[data-mode="REWARD"].is-active: Tab chế độ "Mốc Thưởng" khi được chọn
   - .mode-pill[data-mode="GACHA"].is-active: Tab chế độ "Quay Gacha" khi được chọn
   -------------------------------------------------------------------------- */
.mode-pill.is-active,
.mode-pill[data-mode="REWARD"].is-active,
.mode-pill[data-mode="GACHA"].is-active {
  background: linear-gradient(135deg, rgba(232, 96, 122, 0.28) 0%, rgba(201, 78, 102, 0.14) 100%) !important; /* Gradient nền hồng đào mờ */
  border-color: rgba(240, 122, 144, 0.6) !important;                                                             /* Viền phát sáng nổi bật */
  color: #ffffff !important;                                                                                     /* Chữ màu trắng sáng */
  box-shadow: 0 2px 14px rgba(232, 96, 122, 0.28) !important;                                                   /* Hào quang đổ bóng xung quanh tab */
}

/* Huy hiệu hiển thị số lượng mốc thưởng khả dụng gắn trên tab Mốc Thưởng */
.mode-pill-badge {
  background: rgba(232, 96, 122, 0.35) !important;  /* Nền huy hiệu số mốc tông hồng đào */
  color: #ffffff !important;                        /* Số lượng màu trắng */
}

/* Chấm tròn trạng thái trực tiếp (Live Stream Indicator) nhấp nháy trên tab Quay Gacha */
.mode-pill-live-dot {
  background: #f07a90 !important;                   /* Màu chấm tròn phát sáng hồng đào */
}

/* --------------------------------------------------------------------------
   10b. DROPDOWN TÙY CHỈNH CHỌN MỐC THƯỞNG & LƯỢT QUAY GACHA (CUSTOM SELECT)
   Áp dụng cho:
   - .reward-select-label svg, .gacha-select-label svg: Icon tiêu đề của ô chọn mốc thưởng & gacha
   -------------------------------------------------------------------------- */
.reward-select-label svg,
.gacha-select-label svg {
  color: #f07a90 !important;                        /* Icon tiêu đề chuyển sang màu hồng đào */
}

/* Khung Trigger (nút bấm mở dropdown) khi rê chuột vào */
.reward-custom-select-trigger:hover,
.gacha-custom-select-trigger:hover {
  border-color: rgba(232, 96, 122, 0.5) !important; /* Viền sáng lên màu hồng khi hover */
}

/* Khung Trigger khi dropdown đang ở trạng thái MỞ (is-open) */
.reward-custom-select.is-open .reward-custom-select-trigger,
.gacha-custom-select.is-open .gacha-custom-select-trigger {
  background: rgba(232, 96, 122, 0.14) !important;  /* Lớp nền tráng kính mờ ánh hồng khi mở */
  border-color: rgba(240, 122, 144, 0.7) !important; /* Viền sáng rõ nét */
  box-shadow: 0 0 16px rgba(232, 96, 122, 0.3) !important; /* Hào quang bao quanh khung chọn */
}

/* Icon biểu tượng bên trong ô chọn và mũi tên xoay dropdown khi mở */
.reward-select-icon,
.reward-custom-select.is-open .reward-select-arrow,
.gacha-select-icon,
.gacha-custom-select.is-open .gacha-select-arrow {
  color: #f07a90 !important;                        /* Icon và mũi tên hiển thị màu hồng đào đồng bộ */
}

/* Nhãn hiển thị số tiền yêu cầu của mốc thưởng / lượt quay gacha đang được chọn */
.reward-selected-cost,
.gacha-selected-cost {
  color: #f07a90 !important;                        /* Số tiền màu hồng đào nổi bật */
}

/* --------------------------------------------------------------------------
   10c. BẢNG DANH SÁCH DROPDOWN MENU XỔ XUỐNG (DROPDOWN MENU & OPTIONS)
   Áp dụng cho:
   - .reward-custom-dropdown-menu, .gacha-custom-dropdown-menu: Menu danh sách các mốc xổ xuống
   -------------------------------------------------------------------------- */
.reward-custom-dropdown-menu,
.gacha-custom-dropdown-menu {
  background: linear-gradient(135deg, rgba(22, 17, 30, 0.98) 0%, rgba(14, 10, 20, 0.99) 100%) !important; /* Nền kính tối sâu chống lóa */
  border-color: rgba(232, 96, 122, 0.45) !important;                                                         /* Đường viền hồng đào phát sáng */
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8), 0 0 24px rgba(232, 96, 122, 0.25) !important;                 /* Đổ bóng sâu tạo cảm giác nổi */
}

/* Từng dòng mốc lựa chọn khi người dùng rê chuột qua */
.reward-custom-option:hover,
.gacha-custom-option:hover {
  background: rgba(232, 96, 122, 0.16) !important;  /* Nền sáng nhẹ ánh hồng khi hover */
  border-color: rgba(232, 96, 122, 0.4) !important;
}

/* Mốc lựa chọn ĐANG ĐƯỢC CHỌN (is-selected) trong danh sách */
.reward-custom-option.is-selected,
.gacha-custom-option.is-selected {
  background: linear-gradient(135deg, rgba(232, 96, 122, 0.28) 0%, rgba(201, 78, 102, 0.16) 100%) !important; /* Nền gradient đánh dấu mốc đang chọn */
  border-color: rgba(240, 122, 144, 0.65) !important;                                                           /* Viền nổi bật mốc đang chọn */
  box-shadow: 0 0 14px rgba(232, 96, 122, 0.28) !important;
}

/* Icon đại diện cho từng mốc thưởng trong menu danh sách */
.reward-option-icon {
  color: #f07a90 !important;                        /* Icon mốc màu hồng đào */
}

/* Số tiền tương ứng của từng mốc thưởng / mốc gacha hiển thị trong menu xổ xuống */
.reward-option-cost,
.gacha-option-cost {
  color: #f07a90 !important;                        /* Số tiền màu hồng đào sắc nét */
}

/* Biểu tượng dấu tích kiểm (Checkmark) đánh dấu mốc đang được lựa chọn */
.reward-option-check,
.gacha-option-check {
  color: #f07a90 !important;                        /* Dấu tích màu hồng đào */
  filter: drop-shadow(0 0 6px rgba(240, 122, 144, 0.8)) !important; /* Hiệu ứng hào quang phát sáng dấu tích */
}

/* Huy hiệu nhãn mốc đặc biệt / hot gắn kèm mốc thưởng */
.reward-option-badge {
  background: rgba(232, 96, 122, 0.2) !important;   /* Nền huy hiệu mốc trong suốt */
  color: #ffffff !important;                        /* Chữ huy hiệu màu trắng */
  border-color: rgba(232, 96, 122, 0.45) !important;
}

/* --------------------------------------------------------------------------
   10d. BẢNG TÓM TẮT QUYỀN LỢI DONATE (PERK SUMMARY)
   Áp dụng cho:
   - .perk-summary-mode-badge: Huy hiệu hiển thị tên chế độ đang chọn ở phần tóm tắt
   - .perk-summary-val.highlight: Chữ làm nổi bật giá trị nhận được (tên mốc thưởng, lượt quay)
   -------------------------------------------------------------------------- */
.perk-summary-mode-badge {
  background: rgba(232, 96, 122, 0.22) !important;  /* Nền huy hiệu tóm tắt quyền lợi ánh hồng */
  color: #ffffff !important;                        /* Chữ màu trắng dễ đọc */
  border-color: rgba(232, 96, 122, 0.5) !important;
}

/* Văn bản điểm nhấn hiển thị chi tiết phần thưởng hoặc số lượt quay trong bảng tóm tắt */
.perk-summary-val.highlight {
  color: #f07a90 !important;                        /* Chữ nổi bật tông màu hồng đào */
}