/* ============================================================
   GIAO-DIEN-SANG.CSS (19/10/2026) - giao diện SÁNG cho trang khách.
   Nạp SAU theme.css + hieu-ung.css ở views/partials/header.php.
   Chỉ có tác dụng khi <html data-theme="light"> (khách bấm nút mặt trời
   trên thanh menu; lựa chọn nhớ trong trình duyệt). Mặc định vẫn là tối.
   Admin và khu CTV không đổi (vẫn tối).
   ============================================================ */

/* ---------- nút đổi sáng/tối (hiện ở cả 2 giao diện) ---------- */
.theme-toggle {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 38px; height: 38px; padding: 0; cursor: pointer; border-radius: 999px;
    border: 1px solid rgba(110, 130, 255, .3); background: rgba(79, 123, 255, .1); color: #ffd36b;
    transition: background .2s, transform .2s;
}
.theme-toggle:hover { background: rgba(79, 123, 255, .2); }
.theme-toggle:active { transform: scale(.92); }
.theme-toggle .tt-moon { display: none; }
@media (max-width: 1340px) { .theme-toggle { width: 40px; height: 40px; border-radius: 12px; } }
@media (max-width: 360px) { .theme-toggle { width: 36px; height: 36px; } }

html[data-theme="light"] .theme-toggle { color: #4f5bd5; border-color: #d5dbea; background: #fff; }
html[data-theme="light"] .theme-toggle:hover { background: #eef1fb; }
html[data-theme="light"] .theme-toggle .tt-sun { display: none; }
html[data-theme="light"] .theme-toggle .tt-moon { display: block; }

/* ---------- bảng màu sáng ---------- */
html[data-theme="light"] {
    color-scheme: light;
    --void: #f3f5fa;
    --ink-900: #ffffff;
    --panel: #ffffff;
    --panel-hi: #f0f3f9;
    --line: #dfe4ee;
    --ink-100: #151b28;
    --ink-300: #424d61;
    --ink-400: #6b7588;
    --ember: #f2662a;
    --ember-hi: #ff7f45;
    --cyan: #0e9c90;
    --green: #1e9b52;
    --red: #d9364a;
    --gold: #c88a0a;
    --shadow: 0 10px 28px rgba(30, 42, 80, .10);
    --fx-glow: rgba(79, 123, 255, .18);
}
html[data-theme="light"] body { background: var(--void); color: var(--ink-100); }

/* nền lưới phát sáng: nhạt hơn trên nền trắng */
html[data-theme="light"] .fx-bg::before { background-image: linear-gradient(rgba(70, 90, 180, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(70, 90, 180, .06) 1px, transparent 1px); }
html[data-theme="light"] .fx-bg::after { background: radial-gradient(circle at 30% 50%, rgba(79, 123, 255, .10), transparent 55%), radial-gradient(circle at 70% 50%, rgba(139, 92, 246, .08), transparent 55%); }

/* ---------- thanh menu trên cùng ---------- */
html[data-theme="light"] .topbar { background: transparent; }
html[data-theme="light"] .topbar-inner {
    background: rgba(255, 255, 255, .9); border-color: #dfe4ee;
    box-shadow: 0 8px 24px rgba(30, 42, 80, .08);
}
html[data-theme="light"] .nav-links > a:hover, html[data-theme="light"] .nav-links .nav-dd:hover .nav-dd-trigger, html[data-theme="light"] .nav-links a.on {
    color: #1d2a5c; background: rgba(79, 123, 255, .10); border-color: rgba(79, 123, 255, .3); box-shadow: none;
}
html[data-theme="light"] .nav-ic { color: #4f6fe0; }
html[data-theme="light"] .nav-links a.nav-gdv, html[data-theme="light"] .nav-links a.nav-gdv .nav-ic { color: #d9273a; }
html[data-theme="light"] .nav-links a.nav-gdv:hover { color: #c01d30; background: rgba(217, 39, 58, .08); box-shadow: none; }
html[data-theme="light"] .nav-topup > .nav-dd-trigger, html[data-theme="light"] .nav-topup .nav-ic, html[data-theme="light"] .mnav-topup > summary { color: #c27400; }
html[data-theme="light"] .nav-topup .nav-dd-panel a:hover { color: #a86200; }
html[data-theme="light"] .nav-market > .nav-dd-trigger, html[data-theme="light"] .nav-market .nav-ic, html[data-theme="light"] .mnav-market > summary { color: #0b8d82; }
html[data-theme="light"] .nav-market .nav-dd-panel a:hover { color: #087a70; }
html[data-theme="light"] .topbar .btn-ghost { color: #3b56c9; border-color: rgba(79, 123, 255, .35); background: rgba(79, 123, 255, .06); }
html[data-theme="light"] .topbar .btn-primary { box-shadow: 0 6px 16px rgba(242, 102, 42, .25); }
html[data-theme="light"] .mnav-toggle { border-color: #d5dbea; background: #fff; }
html[data-theme="light"] .mnav-toggle span { background: #3b4a7a; }
html[data-theme="light"] .mnav:not([hidden]) { background: rgba(255, 255, 255, .98); border-color: #dfe4ee; box-shadow: 0 18px 40px rgba(30, 42, 80, .16); }
html[data-theme="light"] .mnav > a:hover, html[data-theme="light"] .mnav summary:hover, html[data-theme="light"] .mnav-group > a:hover { background: rgba(79, 123, 255, .08); }
html[data-theme="light"] .mnav-gdv { color: #d9273a !important; }
html[data-theme="light"] .mnav-sep { background: #e3e7f0; }
@media (max-width: 1340px) {
    html[data-theme="light"] .top-right > .btn.top-login { color: #2c45b8; border-color: rgba(79, 123, 255, .45); background: rgba(79, 123, 255, .08); }
}

/* ---------- nút, thẻ, nhãn ---------- */
html[data-theme="light"] .btn:hover { border-color: #c3cbdc; }
html[data-theme="light"] .alert-success { background: #ebf8f0; border-color: #a9e2bf; color: #17703c; }
html[data-theme="light"] .alert-error { background: #fdeef0; border-color: #f4b3bb; color: #b42335; }
html[data-theme="light"] .card:hover, html[data-theme="light"] .server-tile:hover { border-color: rgba(79, 123, 255, .45); box-shadow: 0 14px 30px rgba(30, 42, 80, .12), 0 0 0 1px rgba(79, 123, 255, .12); }
html[data-theme="light"] .id-badge { background: rgba(255, 255, 255, .9); color: #1d2433; }
html[data-theme="light"] .badge-on { background: #e8f7ee; color: #17703c; border-color: #a9e2bf; }
html[data-theme="light"] .badge-mid { background: #fdf5e2; color: #95660a; border-color: #efd28f; }
html[data-theme="light"] .badge-off { background: #fdeef0; color: #b42335; border-color: #f4b3bb; }
html[data-theme="light"] .ctv-badge { background: #e3f6f4; color: #0b7d73; border-color: #9fdcd5; }
html[data-theme="light"] .footer-status { color: #1e9b52; }
html[data-theme="light"] .promo-banner { background: linear-gradient(120deg, rgba(14, 156, 144, .12), #ffffff 60%); }
html[data-theme="light"] .promo-banner-icon, html[data-theme="light"] .promo-banner-cta { color: #fff; }

/* nút ghost / ô nhập */
html[data-theme="light"] input, html[data-theme="light"] select, html[data-theme="light"] textarea { color-scheme: light; }

/* ---------- khung ảnh phóng to (lightbox) giữ nền tối để xem ảnh ---------- */
html[data-theme="light"] .lightbox, html[data-theme="light"] .lightbox * { color-scheme: dark; }

/* ---------- màu nhấn đậm hơn để đọc rõ trên nền trắng ---------- */
html[data-theme="light"] { --ember-hi: #e2571b; }
html[data-theme="light"] .nav-topup .nav-ic { color: #d98200; }

/* ---------- trang chủ: dải Nạp game / Chợ ACC, băng chuyền acc chợ ---------- */
html[data-theme="light"] .nap-strip { background: linear-gradient(100deg, #fff1df, #ffffff 60%); border-color: #f3d3a6; }
html[data-theme="light"] .nap-strip-ic { color: #c27400; border-color: #f0c98c; background: #fff7ea; }
html[data-theme="light"] .nap-strip.ca-strip { background: linear-gradient(100deg, #def5fa, #ffffff 60%); border-color: #a9dfeb; }
html[data-theme="light"] .ca-strip .nap-strip-ic { color: #0a87a3; border-color: #a9dfeb; background: #eefafd; }
html[data-theme="light"] .ca-strip .nap-strip-go { color: #fff; background: linear-gradient(135deg, #0ea5c6, #19b8d6); }
html[data-theme="light"] .ca-belt-item { border-color: #c9e9f1; }
html[data-theme="light"] .ca-belt-game { color: #087f99; background: #eaf8fb; border-color: #a9dfeb; }
html[data-theme="light"] .ca-belt-price b { color: #087f99; }

/* ---------- khối Giao dịch viên (trang chủ + /bao-hiem-gdv) ---------- */
html[data-theme="light"] .gh-intro, html[data-theme="light"] .gh-panel {
    background: linear-gradient(160deg, #eef2ff, #ffffff 55%);
    border-color: #d9e0f5; box-shadow: 0 12px 30px rgba(30, 42, 80, .08);
}
html[data-theme="light"] .gh-page .gdv-notes { background: linear-gradient(160deg, #eef2ff, #ffffff 60%); border-color: #d9e0f5; border-left-color: #e0a21c; }
html[data-theme="light"] .gh-page .gdv-notes-title { color: #a86c00; }
html[data-theme="light"] .gh-page .gdv-notes li::marker { color: #4f6fe0; }
html[data-theme="light"] .gh-intro-glow { background: radial-gradient(circle, rgba(139, 92, 246, .12), transparent 65%); }
html[data-theme="light"] .gh-shield { color: rgba(79, 111, 224, .5); filter: none; }
html[data-theme="light"] .gh-title, html[data-theme="light"] .gh-stat b { color: #151b28; }
html[data-theme="light"] .gh-title span { background-image: linear-gradient(90deg, #3d6bf0, #7b4fe0, #3d6bf0); }
html[data-theme="light"] .gh-tag-blue, html[data-theme="light"] .gh-count { color: #3456c8; background: #e8eeff; border-color: #c3d0fb; }
html[data-theme="light"] .gh-tag-violet { color: #6a3fd0; background: #f1ebff; border-color: #d6c7fb; }
html[data-theme="light"] .gh-stat-ic, html[data-theme="light"] .gh-panel-ic, html[data-theme="light"] .gh-go { color: #3d63e0; background: #e8eeff; border-color: #c3d0fb; }
html[data-theme="light"] a.gh-stat-link .gh-stat-ic, html[data-theme="light"] .gh-link-go { color: #6a3fd0; }
html[data-theme="light"] a.gh-stat-link .gh-stat-ic { background: #f1ebff; border-color: #d6c7fb; }
html[data-theme="light"] .gh-stats { border-top-color: #e1e6f4; }
html[data-theme="light"] .gh-chip:not(.on) { background: #fff; border-color: #dfe4ee; }
html[data-theme="light"] .gh-t-vip { --tc: #b67a00; }
html[data-theme="light"] .gh-t-premium { --tc: #7048d8; }
html[data-theme="light"] .gh-t-master { --tc: #d23a3a; }
html[data-theme="light"] .gh-t-pro { --tc: #0b7fb8; }
html[data-theme="light"] .gh-t-semipro { --tc: #0f8a5f; }
html[data-theme="light"] .gh-row { background: #fff; border-color: #e3e8f2; }
html[data-theme="light"] .gh-row:hover { background: #f4f7ff; }
html[data-theme="light"] .gh-online { border-color: #fff; }
html[data-theme="light"] .gh-amt { color: #a86c00; }
html[data-theme="light"] .gh-status { color: #16824a; background: #e8f7ee; border-color: #a9e2bf; }
html[data-theme="light"] .gh-all { color: #3456c8; background: #e8eeff; border-color: #c3d0fb; }
html[data-theme="light"] .gh-all:hover { color: #1f3aa8; background: #dce5ff; }

/* ---------- thẻ acc (danh sách game, Chợ ACC, gian hàng) ---------- */
html[data-theme="light"] .ac-price { background: linear-gradient(180deg, #fff1e8, #ffffff); }
html[data-theme="light"] .ac-box { border-color: #e1e6f0; background: #fafbfd; }
html[data-theme="light"] .ac-row + .ac-row { border-top-color: #eceff5; }
html[data-theme="light"] .ac-ic { color: #4f6fe0; }
html[data-theme="light"] .ac-gray { color: #3b4559; background: #f0f2f7; border-color: #dadfe9; }
html[data-theme="light"] .ac-gold { color: #9a6400; background: #fff6df; border-color: #f0cd78; }
html[data-theme="light"] .ac-green { color: #157a42; background: #e8f7ee; border-color: #9fdcb8; }
html[data-theme="light"] .ac-red { color: #c4202f; background: #fdecee; border-color: #f2a9b1; }
html[data-theme="light"] .card.ac2 .card-actions .btn-view { background: #fff; border-color: #d6dcea; }
html[data-theme="light"] .ff-gun-k { color: #9a6400 !important; }
html[data-theme="light"] .ho-chip-safe { color: #157a42; background: #e8f7ee; border-color: #9fdcb8; }
html[data-theme="light"] .ho-chip-full { color: #9a6400; background: #fff6df; border-color: #f0cd78; }
html[data-theme="light"] .flt-chip b { color: #b67a00; }

/* ---------- trang chi tiết acc ---------- */
html[data-theme="light"] .acc-chip { background: rgba(255, 255, 255, .92); color: #151b28; border-color: rgba(0, 0, 0, .08); }
html[data-theme="light"] .acc-st-on, html[data-theme="light"] .acc-receive-done { color: #157a42; }
html[data-theme="light"] .acc-st-off { color: #c4202f; }
html[data-theme="light"] .acc-st-wait { color: #9a6400; }
html[data-theme="light"] .acc-ins { color: #157a42; background: #e8f7ee; border-color: #9fdcb8; }
html[data-theme="light"] .acc-shop { background: #fff1e8; }

/* ---------- ví / nạp tiền / thẻ cào / nạp game ---------- */
html[data-theme="light"] .dp-tabs a.on { background: #fff4dc; color: #a86c00; box-shadow: inset 0 0 0 1px #f0cd78; }
html[data-theme="light"] .dp-line .v.gold, html[data-theme="light"] .nt-sum .v, html[data-theme="light"] .ng-sum .v, html[data-theme="light"] .ng-item .pr, html[data-theme="light"] .ng-tile.is-group .ck { color: #b06f00; }
html[data-theme="light"] .dp-alert, html[data-theme="light"] .ng-alert { color: #8a5a00; background: #fff6df; border-color: #f0cd78; }
html[data-theme="light"] .dp-row .r .amt, html[data-theme="light"] .nt-opt em, html[data-theme="light"] .ng-tile .ck { color: #1e8a4c; }
html[data-theme="light"] .dp-st.ok, html[data-theme="light"] .ngo-st.ok, html[data-theme="light"] .ngh-st.ok { color: #157a42; background: #e8f7ee; }
html[data-theme="light"] .dp-st.warn, html[data-theme="light"] .ngo-st.wait, html[data-theme="light"] .ngh-st.wait { color: #9a6400; background: #fff6df; }
html[data-theme="light"] .dp-st.wait, html[data-theme="light"] .ngo-st.back, html[data-theme="light"] .ngh-st.back { color: #0b7d73; background: #e3f6f4; }
html[data-theme="light"] .nt-opt input:checked + span, html[data-theme="light"] .ng-item input:checked + span { border-color: #e0a21c; background: #fff8e8; box-shadow: 0 0 0 1px #f0cd78; }
html[data-theme="light"] .ng-tile.is-on, html[data-theme="light"] .ng-hist:hover { border-color: #e0a21c; }
html[data-theme="light"] .ng-hist:hover, html[data-theme="light"] .ng-crumb a:hover { color: #a86c00; }
html[data-theme="light"] .ng-tile .ph { background: linear-gradient(135deg, #fff1d6, #f6f7fb); }

/* ---------- màu ghi thẳng trong thẻ HTML (style="color:...") ---------- */
html[data-theme="light"] [style*="color:#ffc34d"], html[data-theme="light"] [style*="color: #ffc34d"],
html[data-theme="light"] [style*="color:#f7cf7d"], html[data-theme="light"] [style*="color: #f7cf7d"],
html[data-theme="light"] [style*="color:#ffd98a"], html[data-theme="light"] [style*="color: #ffd98a"] { color: #a86c00 !important; }
html[data-theme="light"] [style*="color:#7fe3a3"], html[data-theme="light"] [style*="color: #7fe3a3"],
html[data-theme="light"] [style*="color:#6fe397"], html[data-theme="light"] [style*="color: #6fe397"] { color: #157a42 !important; }
html[data-theme="light"] [style*="color:#ff9aa3"], html[data-theme="light"] [style*="color: #ff9aa3"],
html[data-theme="light"] [style*="color:#ff9aa2"], html[data-theme="light"] [style*="color: #ff9aa2"] { color: #c4202f !important; }
html[data-theme="light"] [style*="color:#5fdcf5"], html[data-theme="light"] [style*="color:#5fe3d6"] { color: #087f99 !important; }
html[data-theme="light"] a.gh-stat-link b.gh-link-t { color: #151b28; }
html[data-theme="light"] .dp-steps .n { color: #157a42; background: #e3f5ea; }
html[data-theme="light"] .acc-hero img { background: #eef1f6; }
html[data-theme="light"] .acc-buybar { background: rgba(255, 255, 255, .97); border-color: #dfe4ee; box-shadow: 0 -8px 24px rgba(30, 42, 80, .10); }

/* ---------- Chợ ACC / gian hàng ---------- */
html[data-theme="light"] .ca-st-on { color: #157a42; background: #e8f7ee; border-color: #9fdcb8; }
html[data-theme="light"] .ca-st-off { color: #c4202f; background: #fdecee; border-color: #f2a9b1; }
html[data-theme="light"] .ca-st-wait { color: #9a6400; background: #fff6df; border-color: #f0cd78; }
html[data-theme="light"] .ca-warn h2 { color: #a86c00; }
html[data-theme="light"] .alert [style*="color:#fff"] { color: inherit !important; }