/* ===================== v16 — viền sáng chạy, đếm ngược thanh toán, quản trị nâng cao, sửa lỗi chữ ===================== */

/* ---------- 1) Viền sáng chạy khi rê chuột (gắn tự động qua fx/glowcard.js) ---------- */
@property --gc-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
:root { --gc-1: 142, 166, 255; --gc-2: 110, 231, 208; --gc-core: 255, 255, 255; }
:root[data-theme=light] { --gc-1: 51, 89, 240; --gc-2: 124, 92, 255; --gc-core: 160, 190, 255; }
.gc { transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .35s; }
.gc-rel { position: relative; }
.gc > .gc-rim {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3; padding: 2px;
  background:
    radial-gradient(220px circle at var(--gx, 50%) var(--gy, 50%), rgba(var(--gc-core), .95), rgba(var(--gc-1), .55) 30%, transparent 62%),
    conic-gradient(from var(--gc-a), transparent 0 58%, rgba(var(--gc-1), .0) 60%, rgba(var(--gc-1), .95) 74%, rgba(var(--gc-core), 1) 78%, rgba(var(--gc-2), .95) 82%, transparent 94%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
  opacity: 0; transition: opacity .4s ease; animation: gcSpin 3.4s linear infinite; animation-play-state: paused;
}
.gc:hover > .gc-rim, .gc.gc-on > .gc-rim, .gc:focus-within > .gc-rim { opacity: 1; animation-play-state: running; }
.gc:hover { box-shadow: 0 18px 46px -18px rgba(var(--gc-1), .55), 0 0 0 1px rgba(var(--gc-1), .18); }
a.gc:hover, .g-step.gc:hover, .gw.gc:hover, .tip.gc:hover, .perk.gc:hover, .acc-tile.gc:hover, .ord-row.gc:hover, .kpi.gc:hover, .cat-it.gc:hover, .lk-card.gc:hover { transform: translateY(-3px); }
@keyframes gcSpin { to { --gc-a: 360deg; } }
/* quầng sáng mờ phía sau ô */
.gc::before { content: none; }
@media (hover: none) { .gc > .gc-rim { display: none; } }
@media (prefers-reduced-motion: reduce) { .gc > .gc-rim { animation: none; } .gc:hover { transform: none !important; } }
:root[data-fx=lite] .gc > .gc-rim { animation: none; }

/* ---------- 2) Sửa lỗi chữ mất: nút chính trên hóa đơn (nền sáng) + các nút chính nói chung ---------- */
:root .rcw .rc-acts .btn.main, :root[data-theme] .rcw .rc-acts .btn.main { background: var(--btn) !important; color: var(--btn-ink) !important; border-color: transparent !important; }
:root[data-theme=light] .rcw .rc-acts .btn.main { background: #0e1530 !important; color: #fff !important; }
:root[data-theme=light] .rcw .rc-acts .btn.main .ic svg { stroke: currentColor; }
:root[data-theme=light] .btn.primary, :root[data-theme=light] .btn.primary * { color: var(--btn-ink); }

/* ---------- 3) Đồng hồ đếm ngược thanh toán ---------- */
.pt-left, .pt-row.meta .pt-left { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; min-width: 0; }
.pt-row.meta .pt-left .pt-bar { display: block; flex: 1 1 120px; min-width: 90px; max-width: 220px; }
.pt-clock { font: 700 1.05rem/1 var(--font-ui, inherit); font-variant-numeric: tabular-nums; letter-spacing: .02em; color: var(--text); }
.pt-bar { position: relative; display: block; width: min(220px, 100%); height: 5px; border-radius: 99px; background: color-mix(in srgb, var(--text) 12%, transparent); overflow: hidden; }
.pt-bar i { position: absolute; inset: 0; transform-origin: left; border-radius: inherit; background: linear-gradient(90deg, #22c55e, #6ee7d0); transition: transform 1s linear, background .4s; }
.pt-left.urgent .pt-clock { color: #f97316; animation: ptPulse 1s ease-in-out infinite; }
.pt-left.urgent .pt-bar i { background: linear-gradient(90deg, #ef4444, #f97316); }
.pt-left.over .pt-clock { color: var(--err, #ef4444); animation: none; }
@keyframes ptPulse { 50% { opacity: .55; } }
.pt.pt-over .pt-qr { filter: grayscale(1) blur(2px); opacity: .45; transition: .5s; }
.btn.ghost-danger { background: transparent; color: var(--err, #ef4444); border-color: color-mix(in srgb, var(--err, #ef4444) 40%, transparent); }
.btn.ghost-danger:hover { background: color-mix(in srgb, var(--err, #ef4444) 12%, transparent); border-color: var(--err, #ef4444); }
.es-inline { padding: clamp(28px, 5vw, 48px) 16px; }
.es-inline .es-art { width: 150px; }

/* ---------- 4) Hộp xác nhận đẹp ---------- */
.ask { display: grid; justify-items: center; text-align: center; gap: 8px; padding: 6px 4px 2px; min-width: min(380px, 80vw); }
.ask h3 { margin: 6px 0 0; } .ask p { margin: 0; max-width: 36ch; }
.ask .acts { display: flex; gap: 10px; justify-content: center; margin-top: 14px; width: 100%; } .ask .acts .btn { flex: 1; max-width: 170px; }
.ask-ic { width: 54px; height: 54px; border-radius: 18px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent, #8ea6ff) 18%, transparent); position: relative; }
.ask-ic::after { content: '?'; font: 800 1.5rem/1 var(--font-ui, inherit); color: var(--accent, #8ea6ff); }
.ask.is-danger .ask-ic { background: color-mix(in srgb, var(--err, #ef4444) 16%, transparent); } .ask.is-danger .ask-ic::after { content: '!'; color: var(--err, #ef4444); }
.ask .btn.danger { background: var(--err, #ef4444); color: #fff; border-color: transparent; }
.modal form .acts .btn.danger { background: var(--err, #ef4444); color: #fff; border-color: transparent; }

/* ---------- 5) Quản trị: thanh lọc, chọn nhiều, danh sách sản phẩm ---------- */
.adp-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 14px 0 12px; }
.adp-tools input[type=search] { flex: 1 1 220px; max-width: 360px; margin: 0; }
.seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 14px; border: 1px solid var(--border); background: color-mix(in srgb, var(--text) 4%, transparent); }
.seg-b { display: inline-flex; align-items: center; gap: 7px; border: 0; background: transparent; color: var(--muted); font: 600 .84rem var(--font-ui, inherit); padding: 7px 12px; border-radius: 10px; cursor: pointer; transition: .2s; }
.seg-b small { font-size: .72rem; padding: 1px 7px; border-radius: 99px; background: color-mix(in srgb, var(--text) 10%, transparent); color: var(--text); }
.seg-b small.warn { background: #f59e0b; color: #241500; }
.seg-b:hover { color: var(--text); } .seg-b.on { background: var(--btn); color: var(--btn-ink); box-shadow: 0 6px 18px -8px rgba(var(--rim, 120,140,255), .6); }
.seg-b.on small { background: color-mix(in srgb, var(--btn-ink) 18%, transparent); color: var(--btn-ink); }
.bulk-bar { position: sticky; top: 10px; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; margin: 0 0 12px; border-radius: 16px;
  background: color-mix(in srgb, var(--surface, #12172e) 88%, transparent); backdrop-filter: blur(14px); border: 1px solid color-mix(in srgb, var(--accent, #8ea6ff) 45%, var(--border)); box-shadow: 0 16px 40px -20px rgba(0,0,0,.5); animation: bbIn .25s ease; }
.bulk-bar b { margin-right: 6px; } @keyframes bbIn { from { opacity: 0; transform: translateY(-6px); } }
.adp-list { display: grid; gap: 10px; }
.adp-row { display: grid; grid-template-columns: auto 56px minmax(0, 1fr) auto auto auto; align-items: center; gap: 14px; padding: 10px 14px 10px 12px; border-radius: 18px; border: 1px solid var(--border); background: var(--surface, rgba(255,255,255,.03)); }
.adp-row.is-sel { border-color: var(--accent, #8ea6ff); background: color-mix(in srgb, var(--accent, #8ea6ff) 8%, var(--surface, transparent)); }
.adp-cb input { width: 18px; height: 18px; accent-color: var(--accent, #8ea6ff); cursor: pointer; margin: 0; }
.adp-thumb { width: 56px; height: 56px; border-radius: 14px; overflow: hidden; display: grid; place-items: center; background: linear-gradient(135deg, rgba(var(--gc-1), .35), rgba(var(--gc-2), .25)); font: 800 1.3rem var(--font-ui, inherit); color: var(--text); }
.adp-thumb img { width: 100%; height: 100%; object-fit: cover; }
.adp-main { display: grid; gap: 3px; min-width: 0; } .adp-main b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .adp-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adp-price { font-variant-numeric: tabular-nums; white-space: nowrap; }
.adp-acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.adp-empty { padding: 28px; text-align: center; border: 1px dashed var(--border); border-radius: 18px; }
.cat-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin-top: 10px; }
.cat-it { display: grid; gap: 6px; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--border); background: color-mix(in srgb, var(--text) 3%, transparent); }
.cat-it.is-hidden { opacity: .6; } .cat-it .row { gap: 6px; }
.row.nowrap { flex-wrap: nowrap; } .td-clip { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ttl { font-variant-numeric: tabular-nums; color: var(--muted); } .ttl.urgent { color: #f97316; font-weight: 700; }
.money-in { color: #22c55e; font-variant-numeric: tabular-nums; white-space: nowrap; }
:root[data-theme=light] .money-in { color: #15803d; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 14px 0 6px; }
.kpis .kpi { display: grid; gap: 6px; padding: 18px; }
.kpi-v { font-size: 1.6rem; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.kpis .kpi.green .kpi-v { color: #22c55e; } .kpis .kpi.blue .kpi-v { color: #60a5fa; } .kpis .kpi.violet .kpi-v { color: #a78bfa; }
:root[data-theme=light] .kpis .kpi.green .kpi-v { color: #15803d; } :root[data-theme=light] .kpis .kpi.blue .kpi-v { color: #1d4ed8; } :root[data-theme=light] .kpis .kpi.violet .kpi-v { color: #6d28d9; }
.pill.ok { color: #22c55e; } :root[data-theme=light] .pill.ok { color: #15803d; }
.pill.warn { color: #f59e0b; } :root[data-theme=light] .pill.warn { color: #b45309; }

@media (max-width: 760px) {
  .adp-row { grid-template-columns: auto 48px minmax(0, 1fr) auto; gap: 10px; }
  .adp-thumb { width: 48px; height: 48px; }
  .adp-row .status { grid-column: 3; justify-self: start; }
  .adp-price { grid-column: 4; grid-row: 1; }
  .adp-acts { grid-column: 1 / -1; justify-content: flex-start; }
  .bulk-bar { top: 64px; }
}

/* Nút đỏ đặc (xác nhận hủy / xóa trong hộp thoại) — luôn chữ trắng trên nền đỏ ở cả hai giao diện */
.ask .btn.danger, .modal form .acts .btn.danger, .btn.solid-danger { background: var(--err, #ef4444) !important; color: #fff !important; border-color: transparent !important; }
.ask .btn.danger:hover, .modal form .acts .btn.danger:hover { filter: brightness(1.08); box-shadow: 0 10px 26px -10px rgba(239, 68, 68, .7); }
:root[data-theme=light] .btn.accent { background: var(--cta); color: var(--cta-ink); }
.es-inline { margin-bottom: 16px; }
td.nowrap, .nowrap { white-space: nowrap; }
.td-who { display: table-cell; } .td-who b { display: block; font-weight: 600; } .td-who small { display: block; max-width: 260px; }
.td-sub { display: block; margin-top: 4px; }