/* Thể Thao Sỉ - B2B portal | app.css */
:root{
  --brand:#0b6b3a; --brand-2:#0e8f4c; --brand-ink:#083d22;
  --bg:#f4f6f5; --panel:#ffffff; --ink:#1c2b25; --muted:#6b7b74;
  --line:#dde5e0; --warn:#b54708; --warn-bg:#fef3e2; --ok:#0b6b3a;
  --danger:#b42318; --danger-bg:#fee4e2; --radius:10px;
  --shadow:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.1);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--ink); font-size:15px; line-height:1.5;
}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}
.container{max-width:1180px; margin:0 auto; padding:0 16px}

/* ---------- Topbar ---------- */
.topbar{background:var(--brand); color:#fff; box-shadow:var(--shadow); position:sticky; top:0; z-index:20}
.topbar-inner{display:flex; align-items:center; gap:18px; min-height:56px; flex-wrap:wrap}
.brand{color:#fff; font-weight:700; font-size:17px; display:flex; align-items:center; gap:8px}
.brand:hover{text-decoration:none}
.logo-sm{background:#fff; color:var(--brand); border-radius:6px; padding:2px 6px; font-size:12px; font-weight:800}
.topnav{display:flex; gap:14px; flex-wrap:wrap; align-items:center}
.topnav a{color:#e7f5ee; font-size:14px}
.topnav a:hover{color:#fff}
.topnav .spacer{margin-left:auto}
.topbar .who{color:#cdeada; font-size:13px}
.topbar form{display:inline}

/* ---------- Layout ---------- */
main.page{padding:22px 0 60px}
.page-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin:4px 0 18px; flex-wrap:wrap}
.page-head h1{font-size:22px; margin:0}
.subtle{color:var(--muted); font-size:13px}

/* ---------- Panels ---------- */
.panel{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow)}
.panel + .panel{margin-top:16px}
.panel h2{font-size:16px; margin:0 0 12px}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}

/* ---------- Stats ---------- */
.stat-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px}
.stat-card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:4px}
.stat-card.warn{background:var(--warn-bg); border-color:#f5d9ac}
.stat-label{color:var(--muted); font-size:13px}
.stat-value{font-size:22px; font-weight:700; color:var(--brand-ink)}
.stat-card.warn .stat-value{color:var(--warn)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:6px; border:1px solid var(--line); background:#fff; color:var(--ink); border-radius:8px; padding:8px 14px; font-size:14px; cursor:pointer; font-weight:600; text-decoration:none}
.btn:hover{background:#f1f5f2; text-decoration:none}
.btn-primary{background:var(--brand); border-color:var(--brand); color:#fff}
.btn-primary:hover{background:var(--brand-2)}
.btn-danger{background:var(--danger-bg); border-color:#f5b5b0; color:var(--danger)}
.btn-sm{padding:5px 10px; font-size:13px}
.btn-block{width:100%}
.btn-row{display:flex; gap:10px; flex-wrap:wrap}

/* ---------- Forms ---------- */
label{display:block; font-size:13px; color:var(--muted); margin:10px 0 4px}
input,select,textarea{width:100%; padding:9px 11px; border:1px solid var(--line); border-radius:8px; font-size:14px; font-family:inherit; background:#fff; color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid #b8e0cb; border-color:var(--brand-2)}
.filters{display:flex; gap:10px; align-items:end; flex-wrap:wrap; margin-bottom:16px}
.filter-row{display:flex; gap:10px; flex-wrap:wrap; align-items:end; width:100%}
.filter-row > *{min-width:150px}

/* ---------- Tables ---------- */
.table{width:100%; border-collapse:collapse; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
.table th,.table td{padding:10px 12px; text-align:left; border-bottom:1px solid var(--line); font-size:14px; vertical-align:middle}
.table th{background:#f0f4f2; font-size:12px; text-transform:uppercase; letter-spacing:.03em; color:var(--muted)}
.table tr:last-child td{border-bottom:0}
.table tr:hover td{background:#fafcfb}
.table .num{text-align:right; font-variant-numeric:tabular-nums}
.table-wrap{overflow-x:auto}

/* ---------- Badges ---------- */
.badge{display:inline-block; padding:2px 9px; border-radius:999px; font-size:12px; font-weight:600; background:#eaf3ee; color:var(--brand-ink)}
.badge.ok{background:#e6f6ec; color:var(--ok)}
.badge.warn{background:var(--warn-bg); color:var(--warn)}
.badge.danger{background:var(--danger-bg); color:var(--danger)}
.badge.muted{background:#eef1ef; color:var(--muted)}

/* ---------- Alerts ---------- */
.alert{padding:11px 14px; border-radius:8px; margin:0 0 16px; font-size:14px; border:1px solid transparent}
.alert-info{background:#eaf3ee; border-color:#c6e2d4; color:var(--brand-ink)}
.alert-error{background:var(--danger-bg); border-color:#f5b5b0; color:var(--danger)}
.alert-warn{background:var(--warn-bg); border-color:#f5d9ac; color:var(--warn)}
.alert-success{background:#e6f6ec; border-color:#bfe6cd; color:var(--ok)}

/* ---------- Login ---------- */
.login-page{min-height:100vh; display:grid; place-items:center; background:linear-gradient(160deg,var(--brand) 0%,var(--brand-ink) 100%); padding:20px}
.login-card{background:#fff; border-radius:14px; padding:28px; width:100%; max-width:400px; box-shadow:0 12px 40px rgba(0,0,0,.25)}
.login-card h1{font-size:20px; margin:0 0 4px}
.login-card .logo-lg{background:var(--brand); color:#fff; border-radius:10px; width:52px; height:52px; display:grid; place-items:center; font-weight:800; margin-bottom:14px}
.login-card .hint{font-size:12px; color:var(--muted); margin-top:14px}

/* ---------- Products ---------- */
.product-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:16px}
.product-card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--shadow)}
.product-card .thumb{aspect-ratio:1/1; background:#eef1ef; display:grid; place-items:center; color:var(--muted); font-size:13px; overflow:hidden}
.product-card .thumb img{width:100%; height:100%; object-fit:cover}
.product-card .body{padding:12px; display:flex; flex-direction:column; gap:6px; flex:1}
.product-card .name{font-weight:600; font-size:14px; line-height:1.35}
.product-card .price{color:var(--brand); font-weight:700; font-size:16px}
.product-card .sku{font-size:12px; color:var(--muted)}

/* ---------- Cart / totals ---------- */
.cart-summary{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow)}
.cart-summary .row{display:flex; justify-content:space-between; padding:6px 0; font-size:14px}
.cart-summary .row.total{border-top:1px solid var(--line); margin-top:8px; padding-top:10px; font-weight:700; font-size:17px; color:var(--brand-ink)}

/* ---------- Footer ---------- */
.footer{border-top:1px solid var(--line); background:#fff; padding:20px 0; color:var(--muted); font-size:13px; margin-top:40px}

/* ---------- Admin ---------- */
.admin-body{display:flex; min-height:100vh}
.sidebar{width:236px; background:var(--brand-ink); color:#cfe7db; flex-shrink:0; padding:16px 0}
.sidebar .side-brand{color:#fff; font-weight:800; padding:0 18px 16px; font-size:16px}
.sidebar a{display:block; color:#cfe7db; padding:10px 18px; font-size:14px}
.sidebar a:hover{background:rgba(255,255,255,.08); color:#fff; text-decoration:none}
.sidebar a.active{background:var(--brand-2); color:#fff; font-weight:600}
.admin-main{flex:1; min-width:0; display:flex; flex-direction:column}
.admin-top{background:#fff; border-bottom:1px solid var(--line); padding:12px 20px; display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.admin-top h1{font-size:18px; margin:0}
.admin-content{padding:22px 20px 60px}

/* ---------- Utilities ---------- */
.text-right{text-align:right}
.mt-2{margin-top:8px}.mt-3{margin-top:16px}.mb-2{margin-bottom:8px}
.flex{display:flex; gap:10px; align-items:center}
.flex-between{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap}
.empty{padding:30px; text-align:center; color:var(--muted)}
@media(max-width:760px){
  .container{padding:0 12px}
  .grid-2,.grid-3{grid-template-columns:1fr}
  .admin-body{flex-direction:column}
  .sidebar{width:100%; display:flex; overflow-x:auto; padding:8px; position:sticky; top:0; z-index:15}
  .sidebar .side-brand{display:none}
  .sidebar a{white-space:nowrap; padding:8px 12px}
  .admin-content{padding:14px 12px 60px}
  .admin-top{padding:10px 12px}
  .admin-top h1{font-size:16px; width:100%}
  .panel{padding:13px}
  .page-head{margin-bottom:12px}
  .page-head h1{font-size:19px}
  .stat-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px}
  .stat-value{font-size:19px}
  input,select,textarea{font-size:16px}
  .btn{padding:10px 14px}
  .btn-sm{padding:7px 11px; font-size:13px}
  .filter-row > *{min-width:100%}
  .product-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px}
  .table th,.table td{padding:8px 9px; font-size:13px}
  .topbar-inner{gap:10px; padding-top:8px; padding-bottom:8px}
  .topnav{gap:10px; font-size:13px}
  .footer-inner{flex-direction:column; gap:10px}
}