body {
    -webkit-font-smoothing: antialiased;
}

/* Nền xám-xanh nhạt (giống bản V1 — slate-100) thay vì trắng tinh, để card/nội dung trắng nổi bật hẳn lên trên nền
   thay vì chìm cùng màu. Muốn quay lại nền trắng tinh cũ: background-color: #ffffff. Muốn quay lại nền hồng gradient:
   background-color: #fff0f3; background-image: radial-gradient(900px 420px at 5% -10%, #fdd9e7 0%, transparent 60%),
   radial-gradient(760px 400px at 98% 0%, #ece0fb 0%, transparent 62%), radial-gradient(700px 500px at 50% 108%, #fcdce9 0%, transparent 60%); */
.page-bg {
    background-color: #f1f5f9;
}

.no-bar::-webkit-scrollbar {
    display: none;
}

.no-bar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.card-img {
    transition: transform .55s cubic-bezier(.2,.7,.3,1);
}

.group:hover .card-img {
    transform: scale(1.06);
}

/* Thanh cuộn mảnh, màu nhạt mờ — hiện rõ hơn một chút khi rê chuột vào */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.35) transparent;
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.35);
    border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.6);
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
}

/* Router có <FocusOnNavigate Selector="h1" /> tự đưa focus vào h1 sau mỗi lần chuyển trang để hỗ trợ
   đọc màn hình — giữ hành vi này cho accessibility, chỉ ẩn khung viền focus mặc định của trình duyệt
   vẽ lên tiêu đề (h1 không phải phần tử tương tác nên không cần hiện outline như nút/link/input). */
h1:focus {
    outline: none;
}

/* Icon sóng âm biểu thị có giọng giới thiệu — cùng thiết kế với obs-overlay.html (donate voice),
   dùng lại cho Player: badge tĩnh ở thẻ danh sách, animate khi đang phát ở trang chi tiết. */
.voice-wave {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 12px;
}

.voice-wave span {
    display: block;
    width: 2.5px;
    border-radius: 2px;
    background: currentColor;
}

.voice-wave.is-playing span {
    animation: voice-wave-anim .8s ease-in-out infinite alternate;
}

.voice-wave span:nth-child(1) { height: 4px; animation-delay: 0s; }
.voice-wave span:nth-child(2) { height: 9px; animation-delay: .15s; }
.voice-wave span:nth-child(3) { height: 6px; animation-delay: .3s; }
.voice-wave span:nth-child(4) { height: 10px; animation-delay: .1s; }
.voice-wave span:nth-child(5) { height: 5px; animation-delay: .25s; }

/* Nút sóng âm trên thẻ hàng mobile — thu sóng cho vừa ô, không tràn viền ảnh */
button.row-voice {
    overflow: hidden;
}
button.row-voice .voice-wave {
    height: 9px;
    gap: 1.5px;
}
button.row-voice .voice-wave span {
    width: 2px;
}
button.row-voice .voice-wave span:nth-child(1) { height: 3px; }
button.row-voice .voice-wave span:nth-child(2) { height: 7px; }
button.row-voice .voice-wave span:nth-child(3) { height: 5px; }
button.row-voice .voice-wave span:nth-child(4) { height: 8px; }
button.row-voice .voice-wave span:nth-child(5) { height: 4px; }

/* Nút nghe voice + badge OnCam trên thẻ Player — đúng vị trí/kích thước bản V1, màu đỏ rose V1 */
button.voice-player {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: 28px;
    min-width: 40px;
    padding: 0 8px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, .92);
    color: #6b21a8;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
}

html.dark button.voice-player {
    background: rgba(15, 23, 42, .88);
    color: #d8b4fe;
}

.cam-badge {
    width: 28px;
    height: 28px;
    border-radius: 9999px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .92);
    color: #6b21a8;
    font-size: 11px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
}

html.dark .cam-badge {
    background: rgba(15, 23, 42, .88);
    color: #d8b4fe;
}

@keyframes voice-wave-anim {
    from { transform: scaleY(1); }
    to { transform: scaleY(1.8); }
}

/* Vòng lan tỏa (halo) phía sau 2 nút nổi ChatDock (Chat thế giới / Tin nhắn) — 2 vòng lệch nhịp nhau để
   ra hiệu ứng sóng lan liên tục, chỉ chạy CSS thuần, không cần JS. Màu lấy theo currentColor (class
   text-* đặt trên chính <span class="fab-ring">) nên dùng lại được cho nhiều nút khác nhau. */
.fab-ring {
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 9999px;
    pointer-events: none;
}

.fab-ring::before,
.fab-ring::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 9999px;
    background: currentColor;
    opacity: .45;
    animation: fab-ring-pulse 2.4s cubic-bezier(0, 0, .3, 1) infinite;
}

.fab-ring::after {
    animation-delay: 1.2s;
}

/* Vòng lan tỏa trên từng nút kênh: chỉ tablet/desktop (mobile các nút kênh xòe ra từ nút gộp đã có vòng riêng) */
.fab-ring-desktop { display: none; }
@media (min-width: 768px) {
    .fab-ring-desktop { display: block; }
}

@keyframes fab-ring-pulse {
    0% { transform: scale(1); opacity: .45; }
    100% { transform: scale(1.9); opacity: 0; }
}

/* Blazor Router tự focus <h1> mỗi lần chuyển trang (FocusOnNavigate, đúng chuẩn a11y cho trình đọc màn
   hình) — trình duyệt mặc định vẽ viền outline đen quanh phần tử được focus bằng JS giống hệt focus bàn
   phím, gây khó chịu về mặt thị giác dù người dùng không hề bấm Tab. Ẩn outline này đi, không ảnh hưởng
   focus bàn phím thật vì h1 vốn không nằm trong luồng Tab tự nhiên. */
h1:focus {
    outline: none;
}

/* Ô nhập liệu (input/textarea/select) toàn site luôn nền trắng — không dùng hồng nhạt. Chọn theo thẻ nên phủ được cả component chung
   (TableSearchBar, SingleSelect...) mà không phải sửa từng class bg-blush-* rải rác; dấu :not() loại các ô không phải ô gõ chữ (và nâng độ ưu tiên của textarea/select lên trên class bg-blush-* của Tailwind). */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="button"]):not([type="submit"]),
textarea:not([hidden]),
select:not([hidden]) {
    background-color: #ffffff;
}

/* Logo trong khung điện thoại của banner tải app: nhấp nhô nhẹ + toả sáng hồng để gây chú ý mà không rối mắt. */
@keyframes tbcg-logo-float {
    0%, 100% { transform: translateY(0) scale(1); filter: drop-shadow(0 0 0 rgba(107, 33, 168, 0)); }
    50% { transform: translateY(-4px) scale(1.08); filter: drop-shadow(0 6px 10px rgba(107, 33, 168, .38)); }
}

.logo-float {
    animation: tbcg-logo-float 2.8s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .logo-float {
        animation: none !important;
    }
}

/* Chiều cao thanh menu tab (cả padding safe-area). Thanh Đặt đơn/Donate dùng đúng biến này, không cộng safe-area lần nữa — nếu cộng sẽ hở một khe so với menu. */
:root {
    --tabbar-h: calc(51px + env(safe-area-inset-bottom, 0px));
}

/* Hiệu ứng mở modal dùng chung (AppModal, ConfirmHost) — nền mờ dần, hộp thoại phóng to nhẹ + trượt lên, tạo cảm giác
   nổi bật hơn so với việc bật ra tức thì như trước. */
@keyframes tbcg-modal-backdrop-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-backdrop-in {
    animation: tbcg-modal-backdrop-in .18s ease-out;
}

@keyframes tbcg-modal-pop-in {
    0% { opacity: 0; transform: scale(.94) translateY(10px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-pop-in {
    animation: tbcg-modal-pop-in .24s cubic-bezier(.2, .8, .3, 1);
}

/* Nền khung chat kiểu "doodle" giống app mobile (ChatWallpaper.js): gradient pastel rất nhạt + ô icon game lặp
   liền mạch. Ô ảnh vẽ sẵn ở 2x (1184px) nên background-size 592px để nét trên màn retina; độ đậm icon đã nằm sẵn
   trong ảnh. Nền đứng yên khi cuộn danh sách tin — bong bóng tin vẫn nền đặc nên chữ không bị lẫn. */
.chat-wallpaper {
    background-color: #fbf3ff;
    background-image: url('/assets/chat-doodle.png?v=1'), linear-gradient(135deg, #fff5f7, #fbf3ff, #f2f5ff);
    background-size: 592px 592px, 100% 100%;
    background-repeat: repeat, no-repeat;
}

html.dark .chat-wallpaper {
    background-color: #111827;
    background-image: url('/assets/chat-doodle-dark.png?v=1'), linear-gradient(135deg, #0f172a, #161a2e, #111827);
}

/* Dark Mode — 3 chỗ không định nghĩa được bằng class dark: của Tailwind vì đều nằm trong file CSS thuần này
   (page-bg là 1 class riêng, scrollbar là pseudo-element, input là rule ép bằng tên thẻ có độ ưu tiên cao hơn
   mọi class Tailwind — xem rule "Ô nhập liệu" phía trên). Toàn bộ màu còn lại của site dùng class dark: trực tiếp
   trong .razor, xem 0.docs/TinhNang_DarkMode.md. */
html.dark .page-bg {
    background-color: #0f172a;
}

html.dark * {
    scrollbar-color: rgba(148, 163, 184, 0.25) transparent;
}

html.dark ::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.25);
}

html.dark ::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.45);
}

/* Đè lại đúng rule "Ô nhập liệu" ở trên khi Dark Mode bật — cùng kiểu selector (tên thẻ + :not()) để độ ưu tiên
   cao hơn class dark:bg-* của Tailwind. Chữ + placeholder phải đủ sáng: trình duyệt (Safari) hay giữ
   -webkit-text-fill-color / opacity mặc định làm ô tìm bị mờ. */
html.dark {
    color-scheme: dark;
}

html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="button"]):not([type="submit"]),
html.dark textarea:not([hidden]),
html.dark select:not([hidden]) {
    background-color: #1e293b;
    color: #f8fafc;
    -webkit-text-fill-color: #f8fafc;
    caret-color: #d8b4fe;
}

html.dark input::placeholder,
html.dark textarea::placeholder {
    color: #94a3b8;
    -webkit-text-fill-color: #94a3b8;
    opacity: 1;
}

/* Ô tìm nằm trong khung (Players/Streamers): giữ trong suốt, không bị đè thành khối slate mờ hơn khung. */
html.dark input.bg-transparent:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="button"]):not([type="submit"]) {
    background-color: transparent;
}

/* Đồng hồ cát của bộ đếm "Phiên đang diễn ra" (OrderCountdownChip thẻ lớn): tự lật 180° mỗi vòng + vòng lan toả
   phía sau, để người dùng thấy ngay thời gian ĐANG chạy thật chứ không phải con số tĩnh. Không phải icon "đang tải"
   nên không vi phạm quy ước cấm spinner ở trạng thái tải dữ liệu. */
@keyframes tbcg-hourglass-flip {
    0%, 45% { transform: rotate(0deg); }
    55%, 100% { transform: rotate(180deg); }
}

.tbcg-hourglass {
    animation: tbcg-hourglass-flip 2.4s ease-in-out infinite;
}

@keyframes tbcg-countdown-ring {
    0% { transform: scale(1); opacity: .35; }
    100% { transform: scale(1.35); opacity: 0; }
}

.tbcg-countdown-ring {
    background: currentColor;
    animation: tbcg-countdown-ring 2.4s cubic-bezier(0, 0, .3, 1) infinite;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .tbcg-hourglass,
    .tbcg-countdown-ring {
        animation: none !important;
    }
}

/* Con trỏ giả của ô nhập mã xác thực (OtpCodeInput) — con trỏ thật bị ẩn vì chữ thật nằm sát mép trái input phủ
   toàn dải, không khớp vị trí từng ô. Nhấp nháy đúng nhịp mặc định của trình duyệt (~1s). */
@keyframes tbcg-otp-caret {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

.otp-caret {
    animation: tbcg-otp-caret 1s step-end infinite;
}

@media (prefers-reduced-motion: reduce) {
    .otp-caret {
        animation: none !important;
    }
}


/* Đồng hồ cát "Thanh toán tự động": lật nửa vòng rồi dừng một nhịp, lặp lại — báo hệ thống đang chờ webhook ngân hàng */
@keyframes tbcg-hourglass-flip {
    0% { transform: rotate(0deg); }
    30%, 50% { transform: rotate(180deg); }
    80%, 100% { transform: rotate(360deg); }
}

.hourglass-flip {
    display: inline-block;
    animation: tbcg-hourglass-flip 2.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .hourglass-flip {
        animation: none !important;
    }
}

/* Thanh chạy chữ trang chủ (NotificationTicker) — 2 bản sao text nối đuôi nhau trong .ticker-track, dịch translateX(-50%)
   là chạy liền mạch vô hạn với BẤT KỲ độ dài chuỗi nào (không cần đo px thật): mép cuối bản 1 luôn khớp mép đầu bản 2
   vì -50% luôn đúng bằng nửa chiều rộng của chính .ticker-track. Fade 2 mép bằng mask thay vì lớp phủ gradient riêng. */
.ticker-viewport {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
    mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
}

.ticker-track {
    display: flex;
    width: max-content;
    animation-name: tbcg-ticker-scroll;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.ticker-item {
    white-space: nowrap;
}

@keyframes tbcg-ticker-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .ticker-track {
        animation: none !important;
    }
}

/* Bong bóng xem trước tin mới cạnh nút kênh chat (ChatDock) — trượt nhẹ từ phải sang khi vừa có tin */
.chat-preview-pop {
    animation: chat-preview-in .28s cubic-bezier(.2, .9, .3, 1.2);
}

@keyframes chat-preview-in {
    0% { opacity: 0; transform: translate(12px, -50%) scale(.96); }
    100% { opacity: 1; transform: translate(0, -50%) scale(1); }
}

/* Nội dung bài tin tức soạn bằng CKEditor 5 (PageChiTietThongBao). Tailwind preflight xoá style mặc định của
   heading/list/quote nên khai lại ở đây; class ảnh (image, image_resized) là class CKEditor sinh ra. */
.article-content {
    font-size: 14.5px;
    line-height: 1.75;
    color: #475569;
}

.article-content > :first-child {
    margin-top: 0;
}

.article-content p {
    margin: 0 0 .85em;
}

.article-content h2 {
    margin: 1.4em 0 .55em;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.35;
    color: #1e293b;
}

.article-content h3,
.article-content h4 {
    margin: 1.15em 0 .45em;
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1.4;
    color: #1e293b;
}

.article-content strong,
.article-content b {
    font-weight: 700;
    color: #334155;
}

.article-content ul,
.article-content ol {
    margin: 0 0 .85em;
    padding-left: 1.4em;
}

.article-content ul {
    list-style: disc;
}

.article-content ol {
    list-style: decimal;
}

.article-content li {
    margin: .2em 0;
}

.article-content li::marker {
    color: #6b21a8;
}

.article-content blockquote {
    margin: 0 0 .85em;
    padding: .6em 1em;
    border-left: 4px solid #fd9bb2;
    border-radius: 0 10px 10px 0;
    background: #fff0f3;
}

.article-content blockquote p:last-child {
    margin-bottom: 0;
}

.article-content a {
    color: #6b21a8;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.article-content figure.image {
    display: table;
    clear: both;
    margin: 1em auto;
    max-width: 100%;
}

.article-content figure.image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
    border: 1px solid #ffe0e8;
}

.article-content figure.image_resized {
    display: block;
    box-sizing: border-box;
}

.article-content figure.image_resized > figcaption {
    display: block;
}

.article-content figure.image figcaption {
    display: table-caption;
    caption-side: bottom;
    padding-top: .5em;
    font-size: 12.5px;
    text-align: center;
    color: #64748b;
}

html.dark .article-content {
    color: #cbd5e1;
}

html.dark .article-content h2,
html.dark .article-content h3,
html.dark .article-content h4,
html.dark .article-content strong,
html.dark .article-content b {
    color: #f1f5f9;
}

html.dark .article-content blockquote {
    border-left-color: #950c2c;
    background: rgba(124, 14, 39, .25);
}

html.dark .article-content a {
    color: #d8b4fe;
}

html.dark .article-content figure.image img {
    border-color: #334155;
}

html.dark .article-content figure.image figcaption {
    color: #94a3b8;
}

/* Ảnh bìa + ảnh trong bài tin tức bấm được để xem lớn (Fancybox — xem custom.js) */
[data-article-gallery] img[data-gallery-img],
[data-article-gallery] .article-content img {
    cursor: zoom-in;
}

/* ===== Nút chat gộp nổi (ChatDock) =====
   Gốc .chat-fab neo bằng class Tailwind; JS (tbcgChatFab) chuyển sang toạ độ tường minh khi kéo thả.
   data-open="1": các kênh xòe vòng cung (--dx/--dy do JS tính); data-side: bong bóng xem trước hiện về phía giữa màn hình. */
.chat-fab { touch-action: none; }
.chat-fab[data-snap="1"] { transition: left .25s cubic-bezier(.2, .9, .3, 1.1), top .25s cubic-bezier(.2, .9, .3, 1.1); }
.chat-fab-main { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.chat-fab-main:active { cursor: grabbing; }
.chat-fab-main img { pointer-events: none; -webkit-user-drag: none; }
.chat-fab-x { display: none; }
.chat-fab[data-open="1"] .chat-fab-main img,
.chat-fab[data-open="1"] .fab-ring,
.chat-fab[data-open="1"] .chat-fab-total,
.chat-fab[data-open="1"] .chat-fab-preview { display: none; }
.chat-fab[data-open="1"] .chat-fab-x { display: grid; }

.chat-fab-item {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transform: translate(0, 0) scale(.3);
    transition: transform .32s cubic-bezier(.2, .9, .3, 1.25), opacity .18s ease;
}
.chat-fab[data-open="1"] .chat-fab-item {
    opacity: 1;
    pointer-events: auto;
    transform: translate(var(--dx, 0), var(--dy, 0)) scale(1);
}
/* Lệch pha nhẹ giữa các kênh để xòe ra lần lượt chứ không bật cùng lúc */
.chat-fab[data-open="1"] .chat-fab-item:nth-child(2) { transition-delay: .04s; }
.chat-fab[data-open="1"] .chat-fab-item:nth-child(3) { transition-delay: .08s; }
.chat-fab[data-open="1"] .chat-fab-item:nth-child(4) { transition-delay: .12s; }

.chat-fab-preview { top: 50%; }
.chat-fab[data-side="right"] .chat-fab-preview { right: 100%; margin-right: 12px; }
.chat-fab[data-side="left"] .chat-fab-preview { left: 100%; margin-left: 12px; }
.chat-fab[data-side="left"] .chat-preview-pop { animation-name: chat-preview-in-left; }

@keyframes chat-preview-in-left {
    0% { opacity: 0; transform: translate(-12px, -50%) scale(.96); }
    100% { opacity: 1; transform: translate(0, -50%) scale(1); }
}

/* Tablet/desktop (>= 768px): không gộp — các kênh xếp thẳng hàng dọc, luôn hiện; nút gộp ẩn đi.
   Vẫn kéo thả được (JS tbcgChatFab kéo bằng chính các nút kênh). Phải đè h-14 của Tailwind trên phần tử gốc. */
@media (min-width: 768px) {
    .chat-fab { display: flex; flex-direction: column; gap: 12px; height: auto !important; }
    .chat-fab-main { display: none !important; }
    .chat-fab-item {
        position: relative;
        inset: auto;
        opacity: 1;
        pointer-events: auto;
        transform: none;
        transition: none;
        cursor: grab;
    }
    .chat-fab-item:active { cursor: grabbing; }
    .chat-fab-item img { pointer-events: none; -webkit-user-drag: none; user-select: none; }
    .chat-fab-item > button { display: block; }
    .chat-fab[data-open="1"] .chat-fab-item { transform: none; }
    .chat-fab-preview { top: 50%; }
}

/* ═══ Hero trang /streamers — nền tím đậm kiểu "Hall of Fame": gần đen, quầng tím/fuchsia, lưới mờ; khung video phát sáng nhẹ ═══ */
.streamer-hero { position: relative; isolation: isolate; color: #fff; background: radial-gradient(720px 380px at 92% -12%, rgba(168, 85, 247, .40), transparent 62%), radial-gradient(560px 340px at -6% 112%, rgba(217, 70, 239, .20), transparent 62%), linear-gradient(135deg, #0b0618 0%, #1a0b30 55%, #12081f 100%); }
.streamer-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px); background-size: 36px 36px; -webkit-mask-image: radial-gradient(ellipse at 65% 35%, #000 15%, transparent 72%); mask-image: radial-gradient(ellipse at 65% 35%, #000 15%, transparent 72%); }
.hero-video-frame { box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 30px 80px -24px rgba(168, 85, 247, .6); }
.hero-float { animation: hero-float 5s ease-in-out infinite; }
.hero-float.delay { animation-delay: -2.5s; }
@keyframes hero-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@media (prefers-reduced-motion: reduce) { .hero-float { animation: none; } }

/* ═══ Tông navy toàn site: palette "blush" trong cấu hình Tailwind nay là xanh navy (600 = #6b21a8) — quá tối để làm chữ/nút trên nền tối,
   nên ở Dark Mode tăng sáng các lớp blush đang dùng làm chữ và nền nút. Lớp dark:* của Tailwind (nạp sau file này) vẫn thắng khi markup tự chỉ định. ═══ */
.dark .text-blush-500, .dark .text-blush-600, .dark .text-blush-700 { color: #d8b4fe; }
.dark .hover\:text-blush-600:hover, .dark .hover\:text-blush-700:hover { color: #e9d5ff; }
.dark .bg-blush-500, .dark .bg-blush-600 { background-color: #7e22ce; }
.dark .hover\:bg-blush-600:hover, .dark .hover\:bg-blush-700:hover { background-color: #a855f7; }
.dark .border-blush-500, .dark .border-blush-600 { border-color: #c084fc; }

/* Dark Mode: trạng thái hover/group-hover của lớp blush/navy (tên Player, tiêu đề tin... đổi màu khi rê chuột) — cobalt #7e22ce quá tối trên nền tối nên dùng xanh nhạt */
.dark .group:hover .group-hover\:text-blush-400, .dark .group:hover .group-hover\:text-blush-500, .dark .group:hover .group-hover\:text-blush-600, .dark .group:hover .group-hover\:text-blush-700,
.dark .group:hover .group-hover\:text-navy-500, .dark .group:hover .group-hover\:text-navy-600, .dark .group:hover .group-hover\:text-navy-700,
.dark .hover\:text-blush-400:hover, .dark .hover\:text-blush-500:hover, .dark .hover\:text-navy-500:hover, .dark .hover\:text-navy-600:hover, .dark .hover\:text-navy-700:hover { color: #e9d5ff; }
.dark .group:hover .group-hover\:bg-blush-500, .dark .group:hover .group-hover\:bg-blush-600, .dark .group:hover .group-hover\:bg-blush-700 { background-color: #a855f7; }
.dark .group:hover .group-hover\:border-blush-500, .dark .group:hover .group-hover\:border-blush-600 { border-color: #c084fc; }
.dark .hover\:bg-blush-50:hover, .dark .hover\:bg-blush-100:hover { background-color: rgba(192, 132, 252, .14); }

/* Tiêu đề dùng Plus Jakarta Sans (nét tròn, hiện đại), nội dung dùng Inter */
h1, h2, h3, h4 { font-family: "Plus Jakarta Sans", Inter, system-ui, sans-serif; letter-spacing: -0.015em; }

/* ═══ Ant Design (Blazor) — chủ đề tím của site + khử bộ reset toàn cục của Ant (chỉ nạp ở trang /streamers) ═══ */
html:root {
    --ant-primary-color: #6b21a8; --ant-primary-color-hover: #7e22ce; --ant-primary-color-active: #581c87; --ant-primary-color-outline: rgba(107, 33, 168, .2);
    --ant-primary-1: #faf5ff; --ant-primary-2: #f3e8ff; --ant-primary-3: #e9d5ff; --ant-primary-4: #d8b4fe; --ant-primary-5: #c084fc; --ant-primary-6: #6b21a8; --ant-primary-7: #581c87;
    --ant-primary-color-deprecated-l-35: #e9d5ff; --ant-primary-color-deprecated-l-20: #c084fc; --ant-primary-color-deprecated-t-20: #8b3fc0; --ant-primary-color-deprecated-t-50: #b57fd4;
    --ant-primary-color-deprecated-f-12: rgba(107, 33, 168, .12); --ant-primary-color-active-deprecated-f-30: rgba(250, 245, 255, .3); --ant-primary-color-active-deprecated-d-02: #f3e8ff;
    --ant-info-color: #6b21a8;
}
html h1, html h2, html h3, html h4, html h5, html h6, html p, html ul, html ol, html dl { margin-bottom: 0; }
[class^="ant-"], [class*=" ant-"] { font-family: Inter, system-ui, sans-serif; }
.tbcg-ant-card { border-radius: 12px; overflow: hidden; border-color: #eaecf0; box-shadow: 0 1px 3px rgba(16, 24, 40, .06); }
.tbcg-ant-card .ant-card-body { padding: 12px 14px 14px; }
.tbcg-ant-card .ant-card-cover { margin: 0; }
.ant-btn-primary, .ant-input-search-button { font-weight: 600; }
/* Dark Mode cho các thành phần Ant đang dùng (Ant chỉ hỗ trợ biến cho màu chủ đạo, nền/chữ phải đè tay) */
.dark .ant-card { background: #101828; border-color: #1d2939; color: #eaecf0; }
.dark .ant-input-affix-wrapper, .dark .ant-input, .dark .ant-input-group-addon { background: #101828; border-color: #344054; color: #eaecf0; }
.dark .ant-input::placeholder { color: #667085; }
.dark .ant-pagination-item, .dark .ant-pagination-prev .ant-pagination-item-link, .dark .ant-pagination-next .ant-pagination-item-link { background: #101828; border-color: #344054; color: #eaecf0; }
.dark .ant-pagination-item a { color: #eaecf0; }
.dark .ant-pagination-item-active { border-color: #c084fc; }
.dark .ant-pagination-item-active a { color: #d8b4fe; }
.dark .ant-empty-description { color: #98a2b3; }
.dark .ant-tag-purple { background: rgba(192, 132, 252, .14); border-color: rgba(192, 132, 252, .35); color: #d8b4fe; }
.dark .ant-btn-primary { background: #7e22ce; border-color: #7e22ce; }
.dark .ant-tag { background: rgba(192, 132, 252, .14) !important; border-color: rgba(192, 132, 252, .35) !important; color: #d8b4fe !important; }

/* Trình phát nhạc /phat-nhac: iframe YouTube (tắt tiếng) do tbcgMusicVideo tạo, không nhận chuột (điều khiển ở nút bên trái) */
/* Iframe cao hơn khung 140px (lệch lên 70px): video vẫn vừa khít khung 16:9, còn thanh tiêu đề/kênh của YouTube ở mép trên và logo/gợi ý ở mép dưới nằm ngoài vùng nhìn thấy */
.music-video-host iframe { position: absolute; left: 0; top: -70px; width: 100%; height: calc(100% + 140px); border: 0; pointer-events: none; }

/* ═══ Trang chi tiết Streamer (0.docs/TinhNang_TrangStreamerGiaoDienMoi.md) ═══ */
/* Viền avatar gradient 4 màu xoay chậm — @property để trình duyệt nội suy được góc của conic-gradient */
@property --streamer-ring-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.streamer-avatar-ring { background: conic-gradient(from var(--streamer-ring-angle), #a855f7, #ec4899, #f59e0b, #22d3ee, #a855f7); animation: streamer-ring-spin 6s linear infinite; }
@keyframes streamer-ring-spin { to { --streamer-ring-angle: 360deg; } }
@media (prefers-reduced-motion: reduce) { .streamer-avatar-ring { animation: none; } }
/* Mép dưới ảnh bìa mờ dần vào nền thẻ */
.streamer-cover-fade { background: linear-gradient(to top, #ffffff 0%, rgba(255, 255, 255, 0) 100%); }
html.dark .streamer-cover-fade { background: linear-gradient(to top, #101828 0%, rgba(16, 24, 40, 0) 100%); }