/* ── DSOFTVN Store — dùng chung cho mọi trang /store (tiền tố .st-) ── */
.st-page { --st: #0891b2; --st-dk: #0e7490; --st-pale: #ecfeff; --st-line: #a5f3fc; color: #1a2e3f; font-size: 13.5px; }
.st-page h2 { font-size: 19px; font-weight: 700; color: #083344; margin: 0 0 14px; }

/* Toolbar + nút: chuẩn cao 1.6rem, ô nhập 1.75rem */
.st-toolbar { display: flex; gap: 8px; margin-bottom: 12px; align-items: flex-end; flex-wrap: wrap; }
.st-btn {
  height: 1.6rem; padding: 0 12px; border-radius: 5px; font-size: 12.5px; font-weight: 600; cursor: pointer;
  border: 1px solid transparent; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  text-decoration: none; transition: background .15s;
}
.st-btn:disabled { opacity: .55; cursor: not-allowed; }
.st-btn-new { background: #0891b2; border-color: #0891b2; color: #fff; }
.st-btn-new:hover:not(:disabled) { background: #0e7490; color: #fff; }
.st-btn-save { background: #16a34a; border-color: #16a34a; color: #fff; }
.st-btn-save:hover:not(:disabled) { background: #15803d; }
.st-btn-plain { background: #f0f4f8; border-color: #d1dde8; color: #516070; }
.st-btn-plain:hover:not(:disabled) { background: #e2e8f0; color: #516070; }
.st-btn-print { background: #f0fdf4; border-color: #86efac; color: #166534; }
.st-btn-print:hover:not(:disabled) { background: #dcfce7; color: #166534; }
.st-btn-edit { background: var(--st-pale); border-color: var(--st-line); color: #0e7490; }
.st-btn-edit:hover:not(:disabled) { background: #cffafe; color: #0e7490; }
.st-btn-del { background: #fff5f5; border-color: #fecaca; color: #dc2626; }
.st-btn-del:hover:not(:disabled) { background: #fee2e2; }
.st-btn-sm { height: 1.4rem; padding: 0 8px; font-size: 11.5px; }

.st-msg-ok  { color: #16a34a; font-size: 13px; font-weight: 600; }
.st-msg-err { color: #dc2626; font-size: 13px; font-weight: 600; }

/* Form */
.st-form {
  background: var(--st-pale); border: 1px solid var(--st-line); border-radius: 8px; padding: 12px 14px;
  margin-bottom: 12px; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px 12px;
}
.st-form-full { grid-column: 1 / -1; }
.st-field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.st-field label { font-size: 12px; font-weight: 600; color: #516070; margin: 0; }
.st-req { color: #dc2626; }
.st-inp {
  height: 1.75rem; padding: 0 8px; border: 1px solid #cbd5e1; border-radius: 5px; font-size: 13px;
  color: #1a2e3f; background: #fff; width: 100%; outline: none;
}
textarea.st-inp { height: auto; padding: 5px 8px; resize: vertical; }
.st-inp:focus { border-color: #0891b2; }
.st-inp:disabled, .st-inp[readonly] { background: #f1f5f9; color: #64748b; }
.st-inp-num { text-align: right; }
.st-check { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #516070; cursor: pointer; height: 1.75rem; margin: 0; }
.st-check input { width: 14px; height: 14px; }

/* Bảng */
.st-table-wrap { background: #fff; border: 1px solid #d1dde8; border-radius: 8px; overflow: auto; }
.st-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.st-tbl th {
  padding: 7px 10px; text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
  color: #0e7490; background: var(--st-pale); border-bottom: 1.5px solid var(--st-line); white-space: nowrap;
  position: sticky; top: 0; z-index: 1;
}
.st-tbl td { padding: 6px 10px; border-bottom: 1px solid #f0f4f8; vertical-align: middle; }
.st-tbl tr:last-child td { border-bottom: none; }
.st-tbl tbody tr:hover td { background: #f8fbfd; }
.st-tbl .r { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.st-tbl .c { text-align: center; }
.st-tbl th.r { text-align: right; }
.st-tbl th.c { text-align: center; }
.st-tbl .mono { font-family: Consolas, monospace; font-size: 12.5px; }
.st-tbl tr.st-group td { background: #cffafe; font-weight: 700; color: #083344; }
.st-tbl tr.st-total td { background: #ecfeff; font-weight: 700; border-top: 1.5px solid var(--st-line); }
.st-tbl tr.st-void td { color: #94a3b8; text-decoration: line-through; }
.st-tbl .st-inp { min-width: 80px; }
.st-act { display: flex; gap: 5px; }
.st-empty { padding: 28px; text-align: center; color: #516070; }
.st-badge { padding: 1px 8px; border-radius: 8px; font-size: 11px; font-weight: 600; background: var(--st-pale); color: #0e7490; white-space: nowrap; }
.st-badge-ok   { background: #dcfce7; color: #166534; }
.st-badge-warn { background: #fef3c7; color: #92400e; }
.st-badge-off  { background: #f1f5f9; color: #64748b; }
.st-badge-err  { background: #fee2e2; color: #b91c1c; }

.st-sum { display: flex; justify-content: flex-end; gap: 22px; padding: 8px 12px; flex-wrap: wrap; font-size: 13px; }
.st-sum b { font-variant-numeric: tabular-nums; }
.st-note { font-size: 12px; color: #64748b; font-style: italic; }

/* Dashboard */
.st-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; }
.st-card { background: #fff; border: 1px solid #d1dde8; border-top: 3px solid #0891b2; border-radius: 8px; padding: 12px 14px; text-decoration: none; color: inherit; display: block; }
.st-card-warn { border-top-color: #d97706; }
.st-card-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: #516070; }
.st-card-num { font-size: 26px; font-weight: 800; color: #083344; font-variant-numeric: tabular-nums; line-height: 1.3; }

/* Phân quyền menu */
.st-menu-tree { background: #fff; border: 1px solid #d1dde8; border-radius: 6px; padding: 8px 12px; }
.st-menu-children { margin-left: 22px; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }

/* Đăng nhập */
.st-login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background: linear-gradient(145deg, #083344 0%, #0e7490 60%, #083344 100%); }
.st-login-card { background: #fff; border-radius: 14px; width: 100%; max-width: 380px; padding: 34px 32px; box-shadow: 0 8px 40px rgba(0,0,0,.35); }
.st-login-card h2 { text-align: center; font-size: 22px; font-weight: 800; color: #0e7490; margin: 0; }
.st-login-card p { text-align: center; font-size: 13px; color: #64748b; margin: 4px 0 22px; }
.st-login-card .st-inp { height: 2.4rem; font-size: 15px; }
.st-login-card .st-field { margin-bottom: 14px; }
.st-login-card button { width: 100%; padding: 11px; border: none; border-radius: 8px; background: #0891b2; color: #fff; font-size: 15px; font-weight: 700; cursor: pointer; }
.st-login-card button:hover:not(:disabled) { background: #0e7490; }
.st-login-card button:disabled { opacity: .6; cursor: not-allowed; }
.st-login-err { background: #fef2f2; border: 1px solid #fca5a5; border-radius: 8px; color: #b91c1c; font-size: 13px; padding: 9px 12px; margin-bottom: 14px; }

/* Landing */
.st-land { min-height: 100vh; background: #f0fdff; color: #083344; font-family: system-ui, 'Segoe UI', sans-serif; }
.st-land-hero { background: linear-gradient(145deg, #083344 0%, #0e7490 70%); color: #fff; padding: 80px 24px 70px; text-align: center; }
.st-land-hero h1 { font-size: clamp(28px, 4vw, 44px); font-weight: 800; margin-bottom: 14px; }
.st-land-hero p { max-width: 620px; margin: 0 auto 28px; font-size: 16.5px; color: rgba(255,255,255,.8); line-height: 1.6; }
.st-land-cta { display: inline-block; background: #22d3ee; color: #083344 !important; font-weight: 700; padding: 12px 30px; border-radius: 8px; text-decoration: none; }
.st-land-grid { max-width: 1040px; margin: 0 auto; padding: 48px 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.st-land-item { background: #fff; border: 1px solid #cffafe; border-radius: 10px; padding: 20px; }
.st-land-item h3 { font-size: 16px; font-weight: 700; margin-bottom: 6px; color: #0e7490; }
.st-land-item p { font-size: 13.5px; color: #516070; line-height: 1.6; margin: 0; }