/* Trang Doanh thu theo ca live (/tiktok-shop/live-sessions). Tông cam như trang Đơn hàng.
 * Nạp SAU tiktok-shop-mobile.css. Hero cam do tiktok-shop-subpage-hero.css (thanh chuyển nhanh) lo. */

.ls-page {
    --o: #ea580c; --o-dark: #c2410c; --o-bg: #fff7ed; --o-line: #fed7aa; --o-ink: #9a3412;
    --ink: #111827; --muted: #6b7280; --line: #eef0f3; --card: #fff;
    color: var(--ink);
}

/* Hero: kiểu nền tảng (đệm, bo góc, cỡ chữ) — tiktok-shop-subpage-hero.css chỉ đổi màu, mỗi trang tự đặt khung. */
.tts-hero { background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%); border: 1px solid #fed7aa; border-radius: 16px; padding: 18px 22px; margin-bottom: 12px; color: #111827; position: relative; overflow: hidden; }
.tts-hero h1 { font-size: 1.45rem; font-weight: 800; margin: 0 0 4px; color: #111827; }
.tts-hero h1 > .bi:first-child { color: #ea580c; }
.tts-hero p { color: #6b7280; font-size: .875rem; margin: 0; max-width: 760px; }

/* ---- Nút ---- */
.ls-btn-primary { background: var(--o, #ea580c); border: 1px solid var(--o, #ea580c); color: #fff; font-weight: 700; border-radius: 9px; }
.ls-btn-primary:hover, .ls-btn-primary:focus { background: #c2410c; border-color: #c2410c; color: #fff; }
.ls-btn-outline { background: #fff; border: 1px solid #fed7aa; color: #9a3412; font-weight: 700; border-radius: 9px; }
.ls-btn-outline:hover { background: #fff7ed; color: #9a3412; border-color: #fdba74; }

/* ---- Thanh lọc ---- */
.ls-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 8px 10px; margin-bottom: 12px; box-shadow: 0 1px 2px rgba(17,24,39,.04); }
.ls-presets { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.ls-presets::-webkit-scrollbar { display: none; }
.ls-preset { flex: none; height: 32px; padding: 0 12px; border: 1px solid transparent; background: #f9fafb; color: #374151; font-size: .8rem; font-weight: 600; border-radius: 999px; white-space: nowrap; }
.ls-preset:hover { background: var(--o-bg); color: var(--o-ink); }
.ls-preset.is-active { background: var(--o); color: #fff; }
.ls-toolbar-right { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ls-range { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: .75rem; }
.ls-toolbar .form-control, .ls-toolbar .form-select { width: auto; height: 32px; font-size: .8rem; border-radius: 9px; border-color: #e5e7eb; }
.ls-toolbar .form-control { padding: 0 8px; }
.ls-toolbar .form-select { padding: 0 1.8rem 0 .65rem; }
.ls-toolbar .btn { height: 32px; padding: 0 11px; font-size: .8rem; display: inline-flex; align-items: center; }

.ls-notice { display: flex; gap: 8px; align-items: center; background: #fffbeb; border: 1px solid #fde68a; color: #92400e; border-radius: 12px; padding: 8px 12px; font-size: .82rem; margin-bottom: 10px; }

/* ---- Tab chính ---- */
.ls-main-tabs { display: flex; gap: 4px; background: #f3f4f6; border-radius: 12px; padding: 4px; margin-bottom: 12px; overflow-x: auto; scrollbar-width: none; }
.ls-main-tabs button { flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 38px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent; color: #4b5563; font-weight: 700; font-size: .86rem; white-space: nowrap; }
.ls-main-tabs button span:not(:empty) { background: #e5e7eb; border-radius: 999px; padding: 0 7px; font-size: .7rem; }
.ls-main-tabs button.is-active { background: #fff; color: #9a3412; box-shadow: 0 1px 3px rgba(17,24,39,.1); }
.ls-main-tabs button.is-active span:not(:empty) { background: #ffedd5; }

/* ---- KPI ---- */
.ls-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.ls-kpi { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 14px; box-shadow: 0 1px 2px rgba(17,24,39,.04); position: relative; overflow: hidden; min-width: 0; }
.ls-kpi::after { content: ''; position: absolute; right: -26px; bottom: -26px; width: 84px; height: 84px; border-radius: 50%; background: var(--k-soft); opacity: .55; }
.ls-kpi.is-orange { --k: #ea580c; --k-soft: #ffedd5; }
.ls-kpi.is-blue { --k: #2563eb; --k-soft: #dbeafe; }
.ls-kpi.is-violet { --k: #7c3aed; --k-soft: #ede9fe; }
.ls-kpi.is-green { --k: #059669; --k-soft: #d1fae5; }
.ls-kpi.is-dark { --k: #fff; --k-soft: rgba(255,255,255,.08); background: linear-gradient(135deg, #111827, #3b1d10); border-color: transparent; color: #fff; }
.ls-kpi.is-dark .ls-kpi-label, .ls-kpi.is-dark .ls-kpi-sub { color: rgba(255,255,255,.75); }
.ls-kpi.is-dark .ls-kpi-ic { background: rgba(255,255,255,.14); color: #fdba74; }
.ls-kpi-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; position: relative; z-index: 1; }
.ls-kpi-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--k-soft); color: var(--k); font-size: 1rem; }
.ls-kpi-label, .ls-kpi-val, .ls-kpi-sub { position: relative; z-index: 1; }
.ls-kpi-label { font-size: .75rem; color: var(--muted); font-weight: 600; }
.ls-kpi-val { font-size: 1.45rem; font-weight: 800; line-height: 1.2; font-variant-numeric: tabular-nums; }
.ls-kpi.is-green .ls-kpi-val { color: #047857; }
.ls-kpi-sub { font-size: .72rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ls-delta { display: inline-flex; align-items: center; gap: 1px; font-size: .7rem; font-weight: 800; border-radius: 999px; padding: 2px 7px; }
.ls-delta.is-up { background: #dcfce7; color: #15803d; }
.ls-delta.is-down { background: #fee2e2; color: #b91c1c; }

/* ---- Biểu đồ ---- */
.ls-grid-2 { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 12px; margin-bottom: 18px; }
.ls-panel { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; box-shadow: 0 1px 2px rgba(17,24,39,.04); min-width: 0; }
.ls-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.ls-panel-head h2 { font-size: .95rem; font-weight: 800; margin: 0; display: flex; gap: 8px; align-items: center; }
.ls-panel-head h2 .bi { color: var(--o); }
.ls-trend-scroll { overflow-x: auto; }
.ls-trend svg { display: block; max-width: none; }
.ls-grid { stroke: #f1f2f4; }
.ls-axis { font-size: 10px; fill: #9ca3af; font-family: inherit; }
.ls-col-hit { fill: transparent; }
.ls-col:hover .ls-col-hit { fill: #fff7ed; }
.ls-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; font-size: .72rem; color: #4b5563; }
.ls-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }
.ls-heat-grid { display: grid; grid-template-columns: 26px repeat(24, minmax(0, 1fr)); gap: 2px; }
.ls-heat-h { font-size: 9px; color: #9ca3af; text-align: left; }
.ls-heat-d { font-size: 10px; font-weight: 700; color: #6b7280; align-self: center; }
.ls-cell { aspect-ratio: 1; border-radius: 3px; background: #f3f4f6; }
.ls-cell.is-on { background: rgba(234, 88, 12, var(--a)); cursor: help; }
.ls-heat-best { margin-top: 10px; font-size: .78rem; color: #374151; background: #fff7ed; border-radius: 10px; padding: 6px 10px; }
.ls-heat-best .bi { color: #ea580c; margin-right: 4px; }

/* ---- Khối ---- */
.ls-section { margin-bottom: 18px; }
.ls-section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.ls-section-head h2 { font-size: 1.05rem; font-weight: 800; margin: 0; display: flex; align-items: center; gap: 8px; }
.ls-section-head h2 .bi { color: var(--o); }
.ls-hint { font-size: .75rem; color: var(--muted); }

/* ---- Bảng xếp hạng người live ---- */
.ls-hosts { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.ls-host { text-align: left; background: var(--card); border: 1.5px solid var(--line); border-radius: 16px; padding: 12px 14px; box-shadow: 0 1px 2px rgba(17,24,39,.04); transition: border-color .15s, transform .15s, box-shadow .15s; color: inherit; }
.ls-host:hover { border-color: var(--o-line); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(234,88,12,.08); }
.ls-host.is-active { border-color: var(--o); box-shadow: 0 0 0 3px rgba(234,88,12,.15); }
.ls-host.is-unassigned { background: #fafafa; border-style: dashed; }
.ls-host-top { display: flex; align-items: center; gap: 10px; position: relative; }
.ls-host-name { min-width: 0; display: flex; flex-direction: column; }
.ls-host-name b { font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ls-host-name span { font-size: .72rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ls-medal { position: absolute; right: -4px; top: -4px; width: 18px; height: 18px; border-radius: 50%; font-size: .62rem; font-weight: 800; display: grid; place-items: center; color: #fff; border: 2px solid #fff; }
.ls-medal.is-1 { background: #f59e0b; } .ls-medal.is-2 { background: #94a3b8; } .ls-medal.is-3 { background: #b45309; }
.ls-host-money { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0 8px; }
.ls-money { background: #f0fdf4; border-radius: 12px; padding: 8px 10px; min-width: 0; }
.ls-money.is-pay { background: #111827; }
.ls-money.is-pay small { color: rgba(255,255,255,.7); }
.ls-money.is-pay b { color: #fff; }
.ls-money.is-na { background: #f3f4f6; }
.ls-money.is-na b { color: #9ca3af; }
.ls-money b { display: block; font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ls-host-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .74rem; color: #6b7280; margin-bottom: 10px; }
.ls-host-meta b { color: #111827; font-weight: 700; }
.ls-host-money small { display: block; font-size: .68rem; color: var(--muted); }
.ls-host-money b { font-size: .88rem; font-variant-numeric: tabular-nums; }
.ls-host-money b.is-green { color: #047857; }
.ls-host-name { flex: 1; }
.ls-share { font-size: .8rem; font-weight: 800; color: #9a3412; background: #fff7ed; border-radius: 999px; padding: 2px 8px; }
.ls-code { font-size: .66rem; font-weight: 700; color: #4b5563; background: #f3f4f6; border-radius: 6px; padding: 1px 6px; vertical-align: 2px; }
.ls-ava-wrap { position: relative; flex: none; }
.ls-auto { font-style: normal; font-size: .62rem; font-weight: 800; color: #1d4ed8; background: #dbeafe; border-radius: 999px; padding: 1px 6px; white-space: nowrap; }
.ls-bar { height: 6px; background: #f3f4f6; border-radius: 999px; overflow: hidden; }
.ls-bar i { display: block; height: 100%; border-radius: 999px; transition: width .4s; }
.ls-empty-inline { color: var(--muted); font-size: .85rem; padding: 12px; background: var(--card); border: 1px dashed var(--line); border-radius: 12px; }

/* Avatar chữ cái */
.ls-ava { flex: none; width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center; color: #fff; font-weight: 800; font-size: .72rem; }
.ls-ava.is-lg { width: 40px; height: 40px; font-size: 1rem; }
.ls-ava.is-empty { background: #e5e7eb; color: #6b7280; }

/* ---- Tab danh sách ca ---- */
.ls-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.ls-tab { height: 30px; padding: 0 10px; border-radius: 999px; border: 1px solid #e5e7eb; background: #fff; font-size: .78rem; font-weight: 700; color: #374151; display: inline-flex; align-items: center; gap: 5px; }
.ls-tab span { background: #f3f4f6; border-radius: 999px; padding: 0 6px; font-size: .7rem; }
.ls-tab span.is-warn { background: #fef3c7; color: #92400e; }
.ls-tab.is-active { border-color: var(--o); color: var(--o-ink); background: var(--o-bg); }
.ls-tab.is-filter { border-color: var(--o); background: var(--o); color: #fff; }

.ls-bulk { position: sticky; top: 8px; z-index: 5; display: flex; align-items: center; gap: 10px; background: #111827; color: #fff; border-radius: 12px; padding: 8px 12px; margin-bottom: 8px; font-size: .85rem; box-shadow: 0 8px 20px rgba(17,24,39,.2); }
.ls-bulk .btn-link { color: #d1d5db; text-decoration: none; }

/* ---- Thẻ ca live ---- */
.ls-session { border-left: 4px solid var(--host, #e5e7eb) !important; background: var(--card); border: 1px solid var(--line); border-radius: 14px; margin-bottom: 8px; box-shadow: 0 1px 2px rgba(17,24,39,.04); transition: border-color .15s; }
.ls-session:hover { border-color: #fde3cc; }
.ls-session.is-selected { border-color: var(--o); background: #fffaf5; }
.ls-session-main { display: grid; grid-template-columns: auto 52px minmax(0, 1fr) 280px 168px 30px; align-items: center; gap: 12px; padding: 10px 12px; }
.ls-check input { width: 17px; height: 17px; accent-color: var(--o); cursor: pointer; }
.ls-when { text-align: center; background: var(--o-bg); border-radius: 10px; padding: 4px 0; line-height: 1.15; }
.ls-wd { display: block; font-size: .65rem; font-weight: 800; color: var(--o); text-transform: uppercase; }
.ls-when b { font-size: .88rem; }
.ls-info { min-width: 0; }
.ls-time { font-size: .9rem; font-weight: 700; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.ls-time .bi { color: var(--muted); font-size: .8rem; }
.ls-time > span:not(.ls-chan) { color: var(--muted); font-weight: 500; font-size: .78rem; }
.ls-chan { font-size: .7rem; font-weight: 700; color: #be185d; background: #fdf2f8; border-radius: 999px; padding: 1px 8px; }
.ls-cid { border: 0; background: none; padding: 0; color: #9ca3af; font-size: .72rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; display: inline-flex; gap: 4px; align-items: center; }
.ls-cid:hover { color: var(--o-ink); }
.ls-note { font-size: .74rem; color: #4b5563; display: flex; gap: 5px; align-items: center; margin-top: 2px; }
.ls-stats { display: grid; grid-template-columns: 56px 80px 1fr; gap: 12px; text-align: right; }
.ls-stats small { display: block; font-size: .66rem; color: var(--muted); }
.ls-stats b { font-size: .9rem; font-variant-numeric: tabular-nums; }
.ls-stats em { display: block; font-style: normal; font-size: .65rem; color: #dc2626; }
.ls-stats .is-comm b { color: #047857; }
.ls-host-chip { display: inline-flex; align-items: center; gap: 6px; width: 100%; max-width: 168px; height: 34px; padding: 0 10px 0 4px; border-radius: 999px; border: 1px solid #e5e7eb; background: #fff; font-size: .8rem; font-weight: 700; color: #111827; }
.ls-host-chip span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ls-host-chip .bi-pencil { font-size: .7rem; color: #9ca3af; }
.ls-host-chip:hover:not(:disabled) { border-color: var(--o); }
.ls-host-chip.is-auto { border-color: #bfdbfe; background: #eff6ff; }
.ls-host-chip.is-empty { border-style: dashed; border-color: #fdba74; color: var(--o-ink); background: var(--o-bg); }
.ls-host-chip:disabled { opacity: .6; }
.ls-expand { width: 30px; height: 30px; border-radius: 50%; border: 0; background: #f3f4f6; color: #4b5563; }
.ls-expand .bi { display: inline-block; transition: transform .2s; }
.ls-session.is-open .ls-expand .bi { transform: rotate(180deg); }

.ls-products { border-top: 1px dashed var(--line); padding: 8px 12px 12px; overflow-x: auto; }
.ls-ptable { width: 100%; font-size: .8rem; border-collapse: collapse; }
.ls-ptable th { font-size: .68rem; color: var(--muted); font-weight: 700; text-align: right; padding: 4px 6px; white-space: nowrap; }
.ls-ptable td { text-align: right; padding: 6px; border-top: 1px solid #f5f5f5; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ls-ptable th:first-child, .ls-ptable td:first-child { text-align: left; white-space: normal; }
.ls-ptable td.is-comm { color: #047857; font-weight: 700; }
.ls-ptable em { font-style: normal; color: #dc2626; font-size: .7rem; }
.ls-pname { display: flex; align-items: center; gap: 8px; min-width: 200px; }
.ls-pname img { width: 34px; height: 34px; border-radius: 8px; object-fit: cover; flex: none; background: #f3f4f6; }
.ls-pname span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ls-products-empty { color: var(--muted); font-size: .8rem; padding: 6px 0; }

/* ---- Trạng thái ---- */
.ls-state { text-align: center; padding: 32px 16px; background: var(--card); border: 1px dashed #fdba74; border-radius: 14px; }
.ls-state > .bi { font-size: 2rem; color: var(--o); display: block; margin-bottom: 6px; }
.ls-state b { display: block; margin-bottom: 4px; }
.ls-state p { color: var(--muted); font-size: .85rem; margin: 0 auto 10px; max-width: 460px; }
.ls-skel { background: linear-gradient(90deg,#f3f4f6 25%,#e5e7eb 50%,#f3f4f6 75%); background-size: 200% 100%; animation: lsShimmer 1.2s infinite; border-radius: 14px; height: 18px; }
.ls-skel.is-kpi { height: 86px; } .ls-skel.is-host { height: 122px; } .ls-skel.is-row { height: 64px; margin-bottom: 8px; }
@keyframes lsShimmer { 0% { background-position: 200% 0 } 100% { background-position: -200% 0 } }
.ls-foot { font-size: .75rem; color: var(--muted); margin-top: 8px; }

/* ---- Modal gán ---- */
.ls-modal { border-radius: 16px; border: 0; }
.ls-modal .modal-header { border-bottom: 0; padding-bottom: 0; }
.ls-modal .modal-title { font-weight: 800; }
.ls-modal .modal-footer { border-top: 0; }
.ls-modal-sub { font-size: .82rem; color: #6b7280; }
.ls-modal .form-control:focus { border-color: #fdba74; box-shadow: 0 0 0 3px rgba(234,88,12,.12); }
.ls-modal .ls-btn-primary, .ls-modal .ls-btn-outline { --o: #ea580c; }
.ls-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ls-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 999px; border: 1px solid #e5e7eb; background: #fff; font-size: .78rem; font-weight: 600; }
.ls-chip i { width: 8px; height: 8px; border-radius: 50%; }
.ls-chip.is-active { border-color: #ea580c; background: #fff7ed; color: #9a3412; }

.ls-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: #111827; color: #fff; padding: 10px 16px; border-radius: 12px; font-size: .85rem; z-index: 2000; box-shadow: 0 10px 30px rgba(0,0,0,.2); transition: opacity .3s; }
.ls-toast.is-err { background: #b91c1c; }
.ls-toast.is-out { opacity: 0; }

/* ---- Mobile ---- */
@media (max-width: 1100px) {
    .ls-session-main { grid-template-columns: auto 52px minmax(0, 1fr) 240px 150px 30px; }
}
@media (max-width: 1199px) {
    .ls-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 991px) {
    .ls-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ls-kpi.is-dark { grid-column: 1 / -1; }
    .ls-grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .ls-toolbar-right { width: 100%; }
    .ls-range { flex: 1; }
    .ls-range .form-control { flex: 1; min-width: 0; }
    .ls-kpi { padding: 12px; gap: 8px; }
    .ls-kpi-ic { width: 32px; height: 32px; font-size: .95rem; }
    .ls-kpi-val { font-size: 1.15rem; }
    .ls-hosts { grid-template-columns: 1fr; }
    .ls-host-money { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ls-main-tabs button { padding: 0 10px; font-size: .8rem; }
    .ls-session-main { grid-template-columns: auto 46px minmax(0, 1fr) auto; grid-template-areas: "chk when info exp" "stats stats stats stats" "host host host host"; gap: 8px 10px; }
    .ls-check { grid-area: chk; } .ls-when { grid-area: when; } .ls-info { grid-area: info; } .ls-expand { grid-area: exp; }
    .ls-stats { grid-area: stats; justify-content: space-between; text-align: left; background: #f9fafb; border-radius: 10px; padding: 6px 10px; }
    .ls-host-chip { grid-area: host; max-width: none; justify-self: start; }
}