/* Sales OS — card click → drawer chi tiết (chỉ card chưa-clickable được đánh dấu .sc-clickable) */
.sc-clickable { cursor: pointer; transition: box-shadow .14s ease, transform .14s ease; position: relative; }
.sc-clickable:hover { box-shadow: 0 8px 22px rgba(15, 23, 42, .12); transform: translateY(-2px); }
.sc-clickable::after { content: '⤢'; position: absolute; top: 8px; right: 10px; font-size: 12px; color: #cbd5e1; opacity: 0; transition: opacity .14s; pointer-events: none; }
.sc-clickable:hover::after { opacity: 1; }

.sc-drawer-ov { position: fixed; inset: 0; z-index: 3200; background: rgba(15, 23, 42, .34); display: flex; justify-content: flex-end; }
.sc-drawer { background: #fff; width: min(420px, 94vw); height: 100%; box-shadow: -4px 0 28px rgba(15, 23, 42, .22); display: flex; flex-direction: column; overflow: hidden; animation: scSlide .18s ease; }
@keyframes scSlide { from { transform: translateX(30px); opacity: .4; } to { transform: translateX(0); opacity: 1; } }
.sc-dh { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 15px 18px; border-bottom: 1px solid #eef2f7; flex-shrink: 0; }
.sc-dh strong { font-size: 15px; color: #0f172a; }
.sc-x { width: 34px; height: 34px; border: none; background: #f1f5f9; border-radius: 50%; cursor: pointer; font-size: 14px; color: #475569; flex-shrink: 0; }
.sc-x:hover { background: #e2e8f0; }
.sc-db { padding: 18px; overflow-y: auto; flex: 1; }
.sc-big { font-size: 32px; font-weight: 800; color: #0f172a; line-height: 1.1; letter-spacing: -.01em; }
.sc-sub { font-size: 13px; color: #64748b; margin-top: 4px; }
.sc-sec { font-size: 11.5px; font-weight: 800; color: #64748b; text-transform: uppercase; letter-spacing: .03em; margin: 18px 0 8px; }
.sc-kv { display: flex; flex-direction: column; }
.sc-kv-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid #f1f5f9; font-size: 14px; }
.sc-kv-row span { color: #475569; }
.sc-kv-row b { color: #0f172a; font-weight: 700; }
.sc-extra { font-size: 13px; color: #334155; line-height: 1.55; background: #f8fafc; border: 1px solid #eef2f7; border-radius: 10px; padding: 11px 13px; }
.sc-note { font-size: 13px; color: #854d0e; background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px; padding: 11px 13px; margin-top: 14px; }
.sc-clone { transform-origin: top left; }
.sc-clone .kpi-card, .sc-clone .chart-card { box-shadow: none; border: none; margin: 0; width: 100%; }
@media (max-width: 480px) { .sc-drawer { width: 100vw; } }