/* ============================================================
 *  MyTuni.com - POS stylesheet
 * ========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Sora:wght@600;700;800&display=swap');

:root {
  --ink: #15201c;
  --ink-soft: #5a6b63;
  --line: #e3eae6;
  --bg: #eef2f0;
  --panel: #ffffff;
  --primary: #0f8a5f;       /* emerald */
  --primary-dark: #0b6e4b;
  --amber: #e0871f;
  --danger: #d33a3a;
  --success: #149a5f;
  --radius: 14px;
  --shadow: 0 4px 22px rgba(18, 45, 35, 0.07);
  --shadow-sm: 0 2px 8px rgba(18, 45, 35, 0.06);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Plus Jakarta Sans', -apple-system, system-ui, sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.5;
}
a { color: var(--primary-dark); text-decoration: none; }
.link { color: var(--primary-dark); cursor: pointer; background: none; border: none; font: inherit; padding: 0 4px; }
.link:hover { text-decoration: underline; }
.muted { color: var(--ink-soft); }
.danger { color: var(--danger); }
.warn { color: var(--amber); }
.success { color: var(--success); }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.pad { padding: 18px; }
.inline { display: inline; }

/* ---------- Brand ---------- */
.brand-mark {
  font-family: 'Sora', sans-serif; font-weight: 800; font-size: 22px;
  color: var(--ink); letter-spacing: -0.5px;
}
.brand-mark b { color: var(--primary); }

/* ---------- Topbar ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--panel); padding: 0 22px; height: 60px;
  box-shadow: var(--shadow-sm); position: sticky; top: 0; z-index: 50;
}
.topbar-left { display: flex; align-items: center; gap: 28px; }
.mainnav { display: flex; gap: 4px; }
.mainnav a {
  padding: 8px 14px; border-radius: 9px; color: var(--ink-soft); font-weight: 600;
}
.mainnav a:hover { background: var(--bg); color: var(--ink); }
.mainnav a.active { background: var(--primary); color: #fff; }
.topbar-right { display: flex; align-items: center; gap: 14px; }
.user-chip { font-weight: 600; }
.user-chip small { color: var(--ink-soft); font-weight: 500; }

/* ---------- Layout ---------- */
.container { max-width: 1180px; margin: 0 auto; padding: 26px 22px 60px; }
.page-title { font-family: 'Sora', sans-serif; font-size: 26px; margin: 0 0 20px; letter-spacing: -0.5px; }
.footer { text-align: center; color: var(--ink-soft); padding: 24px; font-size: 13px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: inherit; font-weight: 700; font-size: 15px;
  padding: 11px 18px; border-radius: 11px; border: 1px solid transparent;
  cursor: pointer; transition: .15s; background: var(--bg); color: var(--ink);
}
.btn:hover { filter: brightness(.97); }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); filter: none; }
.btn-ghost { background: transparent; border-color: var(--line); }
.btn-sm { padding: 7px 13px; font-size: 14px; }
.btn-lg { padding: 16px; font-size: 17px; }
.btn-block { display: flex; width: 100%; margin-top: 8px; }
.btn:disabled { opacity: .55; cursor: not-allowed; }

/* ---------- Panels / cards ---------- */
.panel { background: var(--panel); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; margin-bottom: 22px; }
.panel-title { font-family: 'Sora', sans-serif; font-size: 17px; margin: 0 0 14px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.grid-2-side { display: grid; grid-template-columns: 360px 1fr; gap: 22px; align-items: start; }
@media (max-width: 880px) { .grid-2, .grid-2-side { grid-template-columns: 1fr; } }

/* ---------- Stat cards ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 22px; }
@media (max-width: 880px) { .stat-grid { grid-template-columns: 1fr 1fr; } }
.stat-card { background: var(--panel); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); border-left: 5px solid var(--line); }
.stat-card.accent-blue { border-left-color: #2f7dd1; }
.stat-card.accent-green { border-left-color: var(--primary); }
.stat-card.accent-orange { border-left-color: var(--amber); }
.stat-card.accent-purple { border-left-color: #7a5cd0; }
.stat-label { color: var(--ink-soft); font-size: 13px; font-weight: 600; }
.stat-value { font-family: 'Sora', sans-serif; font-size: 24px; font-weight: 800; margin-top: 6px; }

/* ---------- Tables ---------- */
.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--ink-soft); padding: 8px 10px; border-bottom: 2px solid var(--line); }
.table td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.table.compact td { padding: 6px 8px; border: none; }
.table tr:last-child td { border-bottom: none; }
.tag { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 12px; font-weight: 700; }
.tag.retail { background: #e7f3ee; color: var(--primary-dark); }
.tag.wholesale { background: #fcefdb; color: #9a5a06; }

/* ---------- Bar chart ---------- */
.bar-chart { display: flex; align-items: flex-end; gap: 12px; height: 160px; padding-top: 10px; }
.bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; }
.bar { width: 70%; background: linear-gradient(180deg, var(--primary), var(--primary-dark)); border-radius: 6px 6px 0 0; min-height: 3px; }
.bar-label { font-size: 12px; color: var(--ink-soft); margin-top: 6px; }

/* ---------- Forms ---------- */
.form label, .form-grid label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-soft); margin: 10px 0 4px; }
input, select, textarea {
  font-family: inherit; font-size: 15px; width: 100%; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 10px; background: #fbfdfc; color: var(--ink);
}
input:focus, select:focus { outline: none; border-color: var(--primary); background: #fff; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.search-inline { display: flex; gap: 8px; margin-bottom: 14px; }
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; background: var(--panel); padding: 14px 18px; border-radius: var(--radius); box-shadow: var(--shadow-sm); margin-bottom: 20px; }
.filter-bar label { font-size: 13px; color: var(--ink-soft); display: flex; gap: 6px; align-items: center; }
.filter-bar input { width: auto; }
.filter-sum { margin-left: auto; }

/* ---------- Alerts ---------- */
.alert { background: #fdecec; color: var(--danger); padding: 12px 16px; border-radius: 11px; margin-bottom: 16px; font-weight: 600; }
.alert.ok { background: #e7f6ee; color: var(--primary-dark); }

/* ============================================================
 *  LOGIN
 * ========================================================== */
.login-page { display: grid; place-items: center; min-height: 100vh;
  background: radial-gradient(circle at 30% 20%, #1a3a2c, #0c1f17); }
.login-card { background: var(--panel); width: 360px; padding: 34px 30px; border-radius: 20px; box-shadow: 0 30px 60px rgba(0,0,0,.3); }
.login-card .brand { text-align: center; margin-bottom: 22px; }
.login-card .brand-sub { display: block; color: var(--ink-soft); font-size: 13px; margin-top: 2px; }
.login-card label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-soft); margin: 12px 0 4px; }
.login-card .hint { text-align: center; color: var(--ink-soft); font-size: 12px; margin-top: 16px; }
.login-card code { background: var(--bg); padding: 1px 6px; border-radius: 5px; }

/* ============================================================
 *  POS
 * ========================================================== */
.pos-wrap { display: grid; grid-template-columns: 1fr 400px; gap: 20px; align-items: start; }
@media (max-width: 980px) { .pos-wrap { grid-template-columns: 1fr; } }

.pos-left { background: var(--panel); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; }
.pos-toolbar { display: flex; gap: 12px; margin-bottom: 14px; }
.sale-type { display: flex; background: var(--bg); border-radius: 11px; padding: 4px; }
.st-btn { border: none; background: transparent; font-weight: 700; padding: 8px 16px; border-radius: 8px; cursor: pointer; color: var(--ink-soft); white-space: nowrap; }
.st-btn.active { background: var(--primary); color: #fff; }
.st-btn[data-type="wholesale"].active { background: var(--amber); }
.search-box { flex: 1; }

.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; max-height: 70vh; overflow-y: auto; }
.prod-card { text-align: left; border: 1px solid var(--line); background: #fbfdfc; border-radius: 12px; padding: 12px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; transition: .12s; font-family: inherit; }
.prod-card:hover:not(:disabled) { border-color: var(--primary); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.prod-card:disabled { opacity: .45; cursor: not-allowed; }
.prod-name { font-weight: 700; font-size: 14px; line-height: 1.3; }
.prod-meta { font-size: 11px; color: var(--ink-soft); }
.prod-price { font-weight: 800; color: var(--primary-dark); margin-top: auto; }

/* Cart */
.pos-right { background: var(--panel); border-radius: var(--radius); box-shadow: var(--shadow); display: flex; flex-direction: column; position: sticky; top: 80px; max-height: calc(100vh - 100px); }
.cart-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.cart-head h2 { font-family: 'Sora', sans-serif; font-size: 18px; margin: 0; }
.cart-items { overflow-y: auto; flex: 1; min-height: 120px; padding: 6px 0; }
.cart-item { padding: 10px 16px; border-bottom: 1px solid var(--line); }
.ci-top { display: flex; justify-content: space-between; gap: 8px; }
.ci-name { font-weight: 700; font-size: 14px; }
.ci-del { border: none; background: none; color: var(--danger); cursor: pointer; font-size: 14px; }
.ci-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.qty { display: flex; align-items: center; gap: 4px; }
.qty button { width: 28px; height: 28px; border: 1px solid var(--line); background: var(--bg); border-radius: 7px; cursor: pointer; font-size: 16px; font-weight: 700; }
.qty-input { width: 54px; text-align: center; padding: 5px; }
.ci-unit { font-size: 12px; color: var(--ink-soft); }
.ci-price { margin-left: auto; color: var(--ink-soft); font-size: 13px; }
.ci-disc label { font-size: 12px; color: var(--ink-soft); }
.disc-val { width: 70px; padding: 5px 8px; }
.disc-type { width: 56px; padding: 5px; }
.ci-linetotal { margin-left: auto; font-weight: 800; color: var(--primary-dark); }

.cart-foot { padding: 14px 18px; border-top: 1px solid var(--line); background: #fbfdfc; border-radius: 0 0 var(--radius) var(--radius); }
.cart-foot .row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.cart-foot .row label { font-size: 13px; color: var(--ink-soft); width: 90px; flex-shrink: 0; }
.disc-input { display: flex; gap: 6px; flex: 1; }
.disc-input input { flex: 1; }
.disc-input select { width: 64px; }
.line { display: flex; justify-content: space-between; padding: 5px 0; font-size: 14px; }
.line b { font-weight: 700; }
.total-line { font-family: 'Sora', sans-serif; font-size: 20px; font-weight: 800; border-top: 2px dashed var(--line); border-bottom: 2px dashed var(--line); padding: 10px 0; margin: 6px 0; }
.total-line b { color: var(--primary-dark); }
.paid-input { font-weight: 700; }
.quick-cash { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.qc { border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 5px 10px; cursor: pointer; font-size: 13px; font-weight: 600; }
.qc:hover { border-color: var(--primary); color: var(--primary-dark); }
.note-input { margin-bottom: 10px; }
.pos-msg { margin-top: 10px; font-weight: 600; font-size: 14px; text-align: center; }
.pos-msg.ok { color: var(--success); }
.pos-msg.err { color: var(--danger); }

/* ---------- SaaS additions ---------- */
.brand-mark { text-decoration: none; }
.biz-badge { background: #e7f3ee; color: var(--primary-dark); font-weight: 700; font-size: 12px; padding: 4px 11px; border-radius: 20px; white-space: nowrap; }
.biz-badge.platform { background: #15201c; color: #fff; letter-spacing: .5px; }
.reset-pass { display: inline-block; margin: 0 6px; }
.reset-pass summary { cursor: pointer; list-style: none; }
.reset-pass summary::-webkit-details-marker { display: none; }
.topbar-left { flex-wrap: wrap; }
@media (max-width: 720px) {
  .mainnav { width: 100%; overflow-x: auto; }
  .topbar { height: auto; padding: 10px 16px; flex-wrap: wrap; gap: 8px; }
}

/* ============================================================
 *  FIX THANH TIÊU ĐỀ TRÀN TRÊN MOBILE (ghi đè)
 * ========================================================== */
.topbar { display: block; height: auto; padding: 0; }
.topbar-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 18px; min-width: 0;
}
.brand-mark { flex: 0 0 auto; font-size: 20px; }
.biz-badge {
  flex: 0 1 auto; min-width: 0; max-width: 42%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.topbar-right {
  margin-left: auto; flex: 0 0 auto;
  display: flex; align-items: center; gap: 8px;
}
.user-chip {
  max-width: 220px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-size: 14px;
}
.mainnav {
  display: flex; gap: 4px; width: 100%;
  padding: 2px 12px 8px; overflow-x: auto;
  border-top: 1px solid var(--line);
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.mainnav::-webkit-scrollbar { display: none; }
.mainnav a { flex: 0 0 auto; white-space: nowrap; }

@media (max-width: 640px) {
  .topbar-row { padding: 9px 14px; gap: 8px; }
  .brand-mark { font-size: 18px; }
  .biz-badge { max-width: 50vw; font-size: 11px; padding: 3px 9px; }
  .user-chip { display: none; }
  .mainnav { padding: 2px 10px 8px; }
  .mainnav a { padding: 8px 12px; }
  .container { padding: 18px 14px 50px; }
}

.biz-badge.owner { background: #fcefdb; color: #9a5a06; }

/* ---- Sao chép sản phẩm ---- */
.copy-summary { cursor: pointer; font-weight: 700; font-size: 16px; list-style: none; }
.copy-summary::-webkit-details-marker { display: none; }
.copy-summary::before { content: "▸ "; }
details[open] .copy-summary::before { content: "▾ "; }
.copy-form { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; margin-top: 12px; }
.copy-form > div { min-width: 220px; flex: 1; }
.copy-check { display: flex; align-items: center; gap: 6px; font-size: 13px; width: 100%; }
.copy-check input { width: auto; }

/* ---- Sao chép SP cấp owner ---- */
.lbl { display:block; font-size:13px; font-weight:600; color:var(--ink-soft); margin-bottom:4px; }
.target-list { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
@media (max-width:560px){ .target-list { grid-template-columns:1fr; } }
.target-item { display:flex; align-items:center; gap:8px; padding:9px 12px; border:1px solid var(--line); border-radius:10px; cursor:pointer; background:#fbfdfc; }
.target-item input { width:auto; }
.target-item:hover { border-color:var(--primary); }

/* ---- Thanh "đăng nhập tạm" của owner ---- */
.impersonate-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; background:#9a5a06; color:#fff; padding:9px 18px; font-size:14px; }
.impersonate-bar b { color:#fff; }
.impersonate-back { background:#fff; color:#9a5a06; font-weight:700; flex-shrink:0; }
.impersonate-back:hover { filter:brightness(.95); }
@media (max-width:560px){ .impersonate-bar { font-size:12px; padding:8px 12px; gap:8px; } }

/* ---- Tabs + thanh tỷ trọng báo cáo ---- */
.rep-tabs { display:inline-flex; background:var(--bg); border-radius:11px; padding:4px; gap:4px; }
.rep-tabs a { padding:7px 16px; border-radius:8px; font-weight:600; color:var(--ink-soft); }
.rep-tabs a.active { background:var(--primary); color:#fff; }
.rep-bar { background:var(--bg); border-radius:8px; height:14px; overflow:hidden; }
.rep-bar span { display:block; height:100%; background:linear-gradient(90deg,var(--primary),var(--primary-dark)); border-radius:8px; }

/* ============================================================
 *  LANDING PAGE (hiện đại, căn giữa) + BẢNG GIÁ
 * ========================================================== */
.landing { background:#fff; }
.landing .brand-mark { font-size:24px; }
.lp-nav { display:flex; align-items:center; justify-content:space-between; padding:18px 24px; max-width:1120px; margin:0 auto; flex-wrap:wrap; gap:12px; }
.lp-nav-links { display:flex; align-items:center; gap:16px; }
.lp-nav-links a { color:var(--ink); font-weight:600; }

/* Hero */
.lp-hero { text-align:center; padding:54px 22px 30px; max-width:880px; margin:0 auto; display:flex; flex-direction:column; align-items:center; }
.lp-pill { display:inline-block; background:#e7f6ee; color:var(--primary-dark); font-weight:700; font-size:13px; padding:7px 16px; border-radius:999px; margin-bottom:20px; }
.lp-hero h1 { font-family:'Sora',sans-serif; font-size:46px; line-height:1.1; letter-spacing:-1.2px; margin:0 0 18px; }
.lp-hero h1 span { color:var(--primary); }
.lp-hero p { font-size:18px; color:var(--ink-soft); margin:0 auto 26px; max-width:620px; }
.lp-hero-cta { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.lp-hero-note { font-size:13px; color:var(--ink-soft); margin-top:16px; }
.lp-illustration { width:100%; max-width:640px; margin:34px auto 0; }
.lp-dash { width:100%; height:auto; display:block; filter:drop-shadow(0 24px 50px rgba(15,45,35,.14)); border-radius:18px; }

/* Sections */
.lp-section { max-width:1120px; margin:0 auto; padding:60px 22px; text-align:center; }
.lp-h2 { font-family:'Sora',sans-serif; font-size:32px; margin:0 0 10px; letter-spacing:-.6px; }
.lp-sub { color:var(--ink-soft); margin:0 auto 34px; max-width:620px; font-size:16px; }

/* Features */
.lp-features { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media (max-width:820px){ .lp-features { grid-template-columns:1fr; } }
.lp-feature { background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:30px 24px; text-align:center; transition:.18s; }
.lp-feature:hover { transform:translateY(-4px); box-shadow:var(--shadow); border-color:#cfe6db; }
.lp-feature-ico { width:58px; height:58px; margin:0 auto 16px; border-radius:16px; background:#e7f6ee; color:var(--primary-dark); display:flex; align-items:center; justify-content:center; }
.lp-feature-ico svg { width:28px; height:28px; }
.lp-feature h3 { font-family:'Sora',sans-serif; font-size:18px; margin:0 0 8px; }
.lp-feature p { color:var(--ink-soft); margin:0; font-size:15px; line-height:1.6; }

/* Showcase báo cáo */
.lp-showcase { background:linear-gradient(180deg,#f4f8f6,#ffffff); border-radius:28px; }
.lp-showcase-art { max-width:620px; margin:8px auto 26px; }
.lp-showcase-art .lp-dash { filter:drop-shadow(0 20px 44px rgba(15,45,35,.12)); }
.lp-showcase-points { display:flex; flex-direction:column; gap:12px; max-width:520px; margin:0 auto; text-align:left; }
.lp-showcase-points > div { display:flex; align-items:center; gap:12px; font-size:16px; font-weight:600; color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px 16px; }
.lp-dot { flex:0 0 auto; width:26px; height:26px; border-radius:50%; background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center; }
.lp-dot svg { width:15px; height:15px; }

/* Pricing */
.lp-pricing-wrap { }
.lp-pricing { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:stretch; }
@media (max-width:820px){ .lp-pricing { grid-template-columns:1fr; max-width:420px; margin:0 auto; } }
.lp-plan { position:relative; background:#fff; border:1px solid var(--line); border-radius:20px; padding:30px 26px; display:flex; flex-direction:column; text-align:center; }
.lp-plan.featured { border:2px solid var(--primary); box-shadow:0 18px 40px rgba(15,138,95,.16); }
.lp-plan-badge { position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--primary); color:#fff; font-size:12px; font-weight:700; padding:5px 16px; border-radius:999px; }
.lp-plan h3 { font-family:'Sora',sans-serif; font-size:22px; margin:0 0 8px; }
.lp-price { font-family:'Sora',sans-serif; font-size:32px; font-weight:800; color:var(--ink); margin-bottom:20px; }
.lp-price span { font-size:14px; font-weight:500; color:var(--ink-soft); }
.lp-plan-feats { list-style:none; padding:0; margin:0 0 22px; flex:1; text-align:left; }
.lp-plan-feats li { display:flex; align-items:flex-start; gap:9px; padding:8px 0; color:var(--ink); font-size:15px; border-bottom:1px solid var(--line); }
.lp-plan-feats li svg { width:17px; height:17px; flex:0 0 auto; color:var(--primary); margin-top:2px; }
.lp-plan-feats li:last-child { border-bottom:none; }

.lp-footer { text-align:center; padding:44px 22px; border-top:1px solid var(--line); color:var(--ink-soft); }
.lp-footer .brand-mark { font-size:22px; }
.lp-footer p { margin:10px 0 0; font-size:14px; }

@media (max-width:560px){ .lp-hero h1 { font-size:32px; } .lp-h2 { font-size:26px; } }


/* ---- Nhãn kênh bán hàng ---- */
.chan-tag { display:inline-block; padding:2px 10px; border-radius:20px; font-size:12px; font-weight:700; color:#fff; white-space:nowrap; }

/* ---- Giữ đơn (POS) ---- */
.held-bar { display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:8px 16px; border-bottom:1px solid var(--line); background:#fbfdfc; }
.held-label { font-size:12px; color:var(--ink-soft); font-weight:600; }
.held-chip { display:inline-flex; align-items:center; gap:6px; background:#fff3e2; color:#9a5a06; border:1px solid #f0d9b5; border-radius:20px; padding:4px 10px; font-size:12px; font-weight:600; cursor:pointer; }
.held-chip:hover { border-color:var(--amber); }
.held-x { font-weight:700; opacity:.6; }
.held-x:hover { opacity:1; color:var(--danger); }

/* ---- Logo cửa hàng ---- */
.logo-preview { background:#fbfdfc; border:1px solid var(--line); border-radius:12px; padding:14px; text-align:center; margin-bottom:12px; }
.logo-preview img { max-width:160px; max-height:90px; }

/* ---- Gói & Thanh toán (owner) ---- */
.bill-status { display:flex; flex-wrap:wrap; gap:30px; }
.bill-plan { font-family:'Sora',sans-serif; font-size:22px; font-weight:800; }
.bill-plans { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media (max-width:760px){ .bill-plans { grid-template-columns:1fr; } }
.bill-card { border:1px solid var(--line); border-radius:14px; padding:18px; }
.bill-card.current { border:2px solid var(--primary); }
.bill-card h3 { font-family:'Sora',sans-serif; margin:0 0 8px; font-size:18px; }
.bill-price { font-family:'Sora',sans-serif; font-size:22px; font-weight:800; margin-bottom:10px; }
.bill-price span { font-size:13px; font-weight:500; color:var(--ink-soft); }
.bill-feats { list-style:none; padding:0; margin:0; }
.bill-feats li { padding:5px 0 5px 20px; position:relative; font-size:14px; color:var(--ink-soft); }
.bill-feats li::before { content:"✓"; position:absolute; left:0; color:var(--primary); font-weight:800; }
.bill-pay { display:flex; flex-wrap:wrap; gap:24px; align-items:flex-start; }
.bill-qr { text-align:center; }
.bill-qr img { width:200px; height:200px; border:1px solid var(--line); border-radius:12px; display:block; margin-bottom:6px; }
.bill-info { flex:1; min-width:240px; }
.bill-info > div { display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid var(--line); }
.bill-info span { color:var(--ink-soft); }

/* ---- Khách hàng: điểm, nhật ký ---- */
.cust-cards { display:flex; gap:14px; flex-wrap:wrap; margin:14px 0; }
.cust-card { flex:1; min-width:150px; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:16px 18px; border-left:4px solid var(--primary); }
.cust-card.accent-orange { border-left-color:var(--amber); }
.cust-card .stat-value { font-family:'Sora',sans-serif; font-size:24px; font-weight:800; }
.inline-form { display:flex; gap:8px; max-width:380px; }
.inline-form input { flex:1; }
.log-list { list-style:none; padding:0; margin:0; max-height:420px; overflow:auto; }
.log-list li { display:flex; gap:10px; align-items:flex-start; padding:10px 0; border-bottom:1px solid var(--line); }
.log-ico { font-size:18px; flex:0 0 auto; }

/* ---- Dòng bật/tắt ---- */
.switch-line { display:flex; align-items:center; gap:8px; font-size:14px; margin:8px 0; }
.switch-line input { width:auto; }

/* ---- Báo cáo tồn kho theo nhóm ---- */
.inv-cat td { background:#e7f6ee; font-weight:700; color:var(--primary-dark); }
.inv-subtotal td { background:#fbfdfc; font-weight:600; border-top:1px dashed var(--line); }
.inv-grand { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; background:linear-gradient(135deg,#0f8a5f,#0b6e4b); color:#fff; padding:14px 18px; border-radius:14px; margin-top:12px; }
.inv-grand-label { font-weight:700; font-size:14px; letter-spacing:.5px; }
.inv-grand-val { font-size:18px; }
.inv-grand-val b { font-family:'Sora',sans-serif; font-size:22px; }

/* ---- Bảng lãi/lỗ (P&L) ---- */
.pnl-table { width:100%; border-collapse:collapse; }
.pnl-table td { padding:11px 8px; border-bottom:1px solid var(--line); }
.pnl-table td.right { text-align:right; }
.pnl-group td { font-weight:600; }
.pnl-detail td { color:var(--ink-soft); font-size:14px; border-bottom:1px dashed var(--line); padding:7px 8px; }
.pnl-sub td { background:#fbfdfc; }
.pnl-final td { font-size:18px; padding:16px 8px; border-top:2px solid var(--ink); border-bottom:none; }
.pnl-final.profit td { background:#e7f6ee; color:var(--primary-dark); }
.pnl-final.loss td { background:#fdecec; color:var(--danger); }

/* ---- Hàng KPI tổng quan ---- */
.kpi-row { display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; padding-top:12px; border-top:1px solid var(--line); }
.kpi { flex:1; min-width:120px; display:flex; flex-direction:column; gap:3px; padding:10px 14px; background:#fbfdfc; border:1px solid var(--line); border-radius:12px; }
.kpi span { font-size:12px; color:var(--ink-soft); }
.kpi b { font-family:'Sora',sans-serif; font-size:18px; }
.kpi-net.profit { background:#e7f6ee; border-color:#bfe6d2; }
.kpi-net.profit b { color:var(--primary-dark); }
.kpi-net.loss { background:#fdecec; border-color:#f3c9c9; }
.kpi-net.loss b { color:var(--danger); }

/* ---- Chăm sóc khách hàng ---- */
.care-tpl { background:#f4f8f6; border:1px solid var(--line); border-radius:12px; padding:14px; margin-bottom:14px; }
.care-tpl-box { background:#fff; border:1px dashed var(--line); border-radius:8px; padding:10px 12px; margin:8px 0; font-size:14px; line-height:1.5; }
.tier-badge { display:inline-block; padding:2px 10px; border-radius:20px; color:#fff; font-size:12px; font-weight:600; white-space:nowrap; }

/* ---- Thẻ nhắc CSKH trên tổng quan ---- */
.care-link { text-decoration:none; transition:transform .1s, box-shadow .1s; }
.care-link:hover { transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,.08); }
.care-link b { color:var(--primary-dark); }
.care-reminder { border-left:4px solid var(--amber); }