/*
Theme Name: SIMPLUS Dashboard
Theme URI: https://simplus.vn
Author: SIMPLUS
Description: Theme quản trị SIMPLUS - dashboard quản lý sim, đơn hàng, cộng tác viên và hoa hồng. Gồm 15 trang nghiệp vụ, biểu đồ, bảng dữ liệu, hộp thư và trang cấu hình.
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: simplus-dashboard
Tags: dashboard, admin, custom-colors, translation-ready
*/
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body.simplus-body{background:#eef2f9;color:#1a2334;font-family:system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
body.simplus-body a{color:#2563eb;text-decoration:none}
body.simplus-body a:hover{color:#1d4ed8}
/* ---------- icons ----------
Self-hosted rather than pulled from fonts.googleapis.com.
This is a ligature font: the markup literally says search
and the font turns the word into a glyph. So until the font arrives the browser
renders the word itself -- which is why the dashboard used to flash "payments",
"sim_card", "chevron_right" at every load, and kept showing them whenever
Google Fonts was slow or unreachable.
Two things stop that: the file is served from this domain, and font-display is
block, so the text stays invisible while loading instead of falling back to the
name. */
@font-face{
font-family:'Material Symbols Rounded';
font-style:normal;
font-weight:400;
font-display:block;
src:url('assets/fonts/material-symbols-rounded.woff2') format('woff2');
}
/* Every glyph in this font has a 1em square advance, so pinning the box to 1em
changes nothing while the font is present -- and clips the ligature name to a
blank square if it ever fails outright, instead of spilling the word into the
layout. */
.msr{font-family:'Material Symbols Rounded';font-weight:400;font-style:normal;line-height:1;letter-spacing:normal;display:inline-block;width:1em;overflow:hidden;white-space:nowrap;word-wrap:normal;direction:ltr;text-transform:none;font-feature-settings:'liga';-webkit-font-smoothing:antialiased}
/* ---------- shell ---------- */
.sp-app{display:flex;align-items:flex-start;min-height:100vh;min-width:1360px;background:#eef2f9}
.sp-side{flex:0 0 212px;width:212px;align-self:stretch;background:#0f1c34;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.sp-brand{display:flex;align-items:center;gap:9px;height:56px;padding:0 18px;border-bottom:1px solid rgba(255,255,255,.07);flex:0 0 auto}
.sp-brand-mark{width:27px;height:27px;border-radius:50%;background:linear-gradient(140deg,#3d9bff,#1f6fe0);display:flex;align-items:center;justify-content:center;box-shadow:0 3px 8px rgba(31,111,224,.45);color:#fff}
.sp-brand-mark .msr{font-size:16px}
.sp-brand-name{font-size:17px;font-weight:800;letter-spacing:.3px;color:#fff}
.sp-brand-name em{color:#3d9bff;font-style:normal}
.sp-nav{flex:1;min-height:0;overflow-y:auto;padding:16px 12px 10px}
.sp-nav-label{font-size:10px;font-weight:700;letter-spacing:.9px;color:#5a6b85;margin-bottom:10px}
.sp-nav-label.is-second{margin-top:22px}
.sp-side .sp-nav a{display:flex;align-items:center;gap:11px;padding:9.5px 12px;margin-top:2px;border-radius:8px;font-size:13.5px;font-weight:500;color:#9fb0c9;cursor:pointer}
.sp-nav a .msr{font-size:19px}
.sp-nav a .sp-nav-text{flex:1}
.sp-nav a .sp-chev{font-size:16px;color:#56688a}
.sp-side .sp-nav a:hover{background:rgba(255,255,255,.06);color:#fff}
.sp-side .sp-nav a.is-active{background:linear-gradient(90deg,#2b7ff0,#3189f7);color:#fff;font-weight:600;box-shadow:0 5px 14px rgba(43,127,240,.35)}
.sp-support{flex:0 0 auto;margin:12px;padding:15px 15px 20px;border-radius:12px;background:#0a1526;border:1px solid rgba(255,255,255,.06)}
.sp-support-t{display:flex;align-items:center;gap:8px;color:#fff;font-size:13px;font-weight:600}
.sp-support-t .msr{font-size:17px;color:#3d9bff}
.sp-support-r{display:flex;align-items:center;gap:8px;margin-top:9px;color:#93a5bf;font-size:12px}
.sp-support-r .msr{font-size:15px;color:#6f84a3}
.sp-support-av{display:flex;justify-content:center;margin-top:14px}
.sp-support-av span{width:40px;height:40px;border-radius:50%;background:linear-gradient(140deg,#2b7ff0,#1f5fc0);display:flex;align-items:center;justify-content:center;box-shadow:0 5px 16px rgba(43,127,240,.4);color:#fff}
.sp-support-av .msr{font-size:21px}
.sp-main{flex:1;min-width:0;display:flex;flex-direction:column}
.sp-top{display:flex;align-items:center;gap:18px;height:56px;flex:0 0 56px;padding:0 22px;background:#fff;border-bottom:1px solid #e6ecf5;position:sticky;top:0;z-index:5}
.sp-hamburger{width:32px;height:32px;border:0;border-radius:8px;background:transparent;color:#5a6b83;cursor:pointer;display:flex;align-items:center;justify-content:center}
.sp-hamburger:hover{background:#f1f5fb;color:#1a2334}
.sp-hamburger .msr{font-size:22px}
.sp-search{position:relative;width:418px}
.sp-search input{width:100%;height:36px;padding:0 38px 0 14px;border:1px solid #e4eaf3;border-radius:8px;background:#f8fafd;font-family:inherit;font-size:13px;color:#1a2334;outline:none}
.sp-search input:focus{border-color:#a9caf7;background:#fff}
.sp-search .msr{font-size:19px;color:#8b9ab0;position:absolute;right:12px;top:9px;pointer-events:none}
.sp-spacer{flex:1}
.sp-bell{position:relative}
/* Chỉ cái nút chuông, không phải mọi nằm trong đó: các dòng trong
popover cũng là , và luật 34x34 này ép chúng thành ô vuông 34px --
chữ tràn ra ngoài rồi bị cắt cụt. Dùng > để luật dừng lại ở con trực tiếp. */
.sp-bell > button{width:34px;height:34px;border:0;border-radius:9px;background:transparent;color:#5a6b83;cursor:pointer;display:flex;align-items:center;justify-content:center}
.sp-bell > button:hover{background:#f1f5fb}
.sp-bell > button .msr{font-size:21px}
.sp-count{position:absolute;top:-3px;right:-4px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#ef4444;border:2px solid #fff;color:#fff;font-size:10.5px;font-weight:700;display:flex;align-items:center;justify-content:center}
.sp-count[hidden]{display:none}
/* Danh sách việc đang chờ, thả xuống từ cái chuông. */
.sp-note-pop{position:absolute;top:42px;right:-6px;width:302px;max-width:calc(100vw - 24px);background:#fff;border:1px solid #e4eaf3;border-radius:12px;box-shadow:0 12px 32px rgba(20,40,80,.16);z-index:60;overflow:hidden}
.sp-note-pop[hidden]{display:none}
.sp-note-head{padding:11px 14px;border-bottom:1px solid #eef2f8;font-size:12.5px;font-weight:700;color:#1a2334}
.sp-note-list{max-height:330px;overflow-y:auto}
.sp-note-item{display:flex;align-items:center;gap:10px;width:100%;padding:10px 14px;border:0;border-bottom:1px solid #f4f7fb;background:transparent;cursor:pointer;text-align:left;font:inherit}
.sp-note-item:last-child{border-bottom:0}
.sp-note-item:hover{background:#f7faff}
.sp-note-item .sp-tile{width:30px;height:30px;border-radius:8px;flex:none}
.sp-note-item .sp-tile .msr{font-size:17px}
.sp-note-txt{flex:1;font-size:12.5px;color:#1a2334;line-height:1.35}
.sp-note-item b{font-size:13px;color:#2563eb}
.sp-note-empty{margin:0;padding:20px 14px;text-align:center;font-size:12.5px;color:#8695ab}
.sp-div{width:1px;height:26px;background:#e6ecf5;margin:0 4px}
.sp-user{display:flex;align-items:center;gap:10px;padding:4px 8px 4px 4px;border-radius:10px;cursor:pointer;border:0;background:transparent;font:inherit;text-align:left}
.sp-user:hover{background:#f6f9fd}
.sp-user-av{position:relative;width:34px;height:34px;border-radius:50%;background:linear-gradient(140deg,#3d9bff,#1f5fc0);display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;font-weight:700}
.sp-user-av i{position:absolute;right:-1px;bottom:-1px;width:10px;height:10px;border-radius:50%;background:#22c55e;border:2px solid #fff}
.sp-user-n{display:block;font-size:13px;font-weight:600;color:#1a2334;line-height:1.25}
.sp-user-r{display:block;font-size:11.5px;color:#8b9ab0;line-height:1.25}
.sp-user .msr{font-size:19px;color:#8b9ab0}
.sp-content{padding:22px 24px 30px}
.sp-screen{display:none;flex-direction:column;gap:18px}
.sp-screen.is-active{display:flex}
/* ---------- headings ---------- */
.sp-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
.sp-h1{margin:0;font-size:21px;font-weight:700;letter-spacing:-.2px;color:#16213a}
.sp-sub{margin:5px 0 0;font-size:13.5px;color:#7a879c}
.sp-head-actions{display:flex;align-items:center;gap:10px}
.sp-daterange{display:flex;align-items:center;gap:10px;height:38px;padding:0 13px;background:#fff;border:1px solid #e4eaf3;border-radius:8px;font-size:13px;color:#33405a;cursor:pointer}
.sp-daterange:hover{border-color:#a9caf7}
.sp-daterange .msr{font-size:18px;color:#8b9ab0}
.sp-btn{display:flex;align-items:center;gap:8px;height:38px;padding:0 14px;border:1px solid #e4eaf3;border-radius:8px;background:#fff;color:#33405a;font-family:inherit;font-size:13px;font-weight:500;cursor:pointer}
.sp-btn:hover{border-color:#a9caf7}
.sp-btn .msr{font-size:18px;color:#8b9ab0}
.sp-btn-primary{border-color:#2563eb;background:#2563eb;color:#fff;font-weight:600;padding:0 16px;box-shadow:0 4px 12px rgba(37,99,235,.22)}
.sp-btn-primary:hover{background:#1d4ed8;border-color:#1d4ed8}
.sp-btn-primary .msr{color:#fff}
/* A link styled as a button loses its colour to `body.simplus-body a` above,
which is more specific than a bare class -- so a primary renders blue on
blue and reads as an empty box. Restated here at matching specificity. */
body.simplus-body a.sp-btn{color:#33405a}
body.simplus-body a.sp-btn-primary{color:#fff}
/* ---------- cards / kpi ---------- */
.sp-grid-6{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.sp-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.sp-grid-5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}
.sp-grid-2{display:grid;grid-template-columns:1.18fr 1fr;gap:18px}
.sp-grid-1{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
.sp-mine-figs{display:flex;flex-direction:column;gap:2px;margin-top:6px}
.sp-acc-bank{margin-top:20px;padding-top:18px;border-top:1px solid #f2f5fa}
.sp-acc-bank h3{display:flex;align-items:center;gap:8px;margin:0 0 4px;font-size:14px;font-weight:650;color:#16213a}
.sp-acc-bank h3 .msr{font-size:19px;color:#5b6b83}
.sp-acc-who{display:flex;align-items:center;gap:14px;padding-bottom:17px;margin-bottom:5px;border-bottom:1px solid #f2f5fa}
.sp-acc-who>div{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-width:0}
.sp-acc-who b{font-size:16px;font-weight:650;color:#16213a}
.sp-acc-who small{flex-basis:100%;color:#8b9ab0;font-size:12.5px}
.sp-avatar-lg{width:52px;height:52px;flex:none;font-size:19px}
.sp-form-ok{display:flex;align-items:center;gap:7px;margin:4px 0 0;color:#16a34a;font-size:13px;font-weight:500}
.sp-form-ok[hidden]{display:none}
.sp-form-ok .msr{font-size:18px}
.sp-mine-fig{display:flex;align-items:center;gap:11px;padding:11px 2px;border-bottom:1px solid #f2f5fa}
.sp-mine-fig:last-child{border-bottom:0}
.sp-mine-fig i{flex:none;width:9px;height:9px;border-radius:50%;background:#c9d4e4}
.sp-mine-fig i.t-green{background:#4ab84f}
.sp-mine-fig i.t-blue{background:#2f7ff0}
.sp-mine-fig i.t-amber{background:#e8a33d}
.sp-mine-fig i.t-purple{background:#8b7ce8}
.sp-mine-fig i.t-cyan{background:#0ea5b7}
.sp-mine-fig span{flex:1;min-width:0;font-size:13px;color:#5b6b83}
.sp-mine-fig b{font-size:14.5px;font-weight:600;color:#16213a;font-variant-numeric:tabular-nums}
.sp-card{background:#fff;border:1px solid #e9eef6;border-radius:11px;box-shadow:0 1px 2px rgba(16,32,66,.04)}
.sp-card-pad{padding:18px 20px}
.sp-stat{padding:14px 15px}
.sp-stat-top{display:flex;align-items:flex-start;gap:11px}
.sp-stat-label{display:block;font-size:12.5px;color:#7a879c;white-space:nowrap}
.sp-stat-value{display:block;margin-top:3px;font-size:17px;font-weight:700;color:#16213a;letter-spacing:-.3px;white-space:nowrap}
.sp-stat-foot{display:flex;align-items:center;gap:7px;margin-top:11px;padding-top:10px;border-top:1px solid #f2f5fa}
.sp-up{font-size:12px;font-weight:700;color:#16a34a}
.sp-down{font-size:12px;font-weight:700;color:#dc2626}
.sp-flat{font-size:12px;font-weight:700;color:#98a4b8}
.sp-vs{font-size:11.5px;color:#98a4b8}
.sp-kpi{padding:18px;display:flex;align-items:center;gap:14px}
/* Thẻ đếm mang theo một bộ lọc thì nó là cái nút, không phải cái ô chữ: chỉnh
lại phần mặc định của cho nó trông y hệt thẻ thường, rồi thêm dấu
hiệu bấm được và dấu hiệu đang bật. Không có trạng thái bật thì màn hình lọc
mà không nói là đang lọc. */
.sp-kpi-go{width:100%;text-align:left;font:inherit;cursor:pointer;
border:1px solid #e6ecf5;transition:border-color .12s,box-shadow .12s,background .12s}
.sp-kpi-go:hover{border-color:#c9d6ea;background:#fbfdff}
.sp-kpi-go:focus-visible{outline:none;border-color:#a9caf7;box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.sp-kpi-go.is-on{border-color:#2563eb;background:#f5f9ff;box-shadow:0 0 0 1px #2563eb inset}
.sp-kpi-go.is-on .sp-kpi-label{color:#2563eb}
.sp-kpi-label{display:block;font-size:13px;color:#7a879c}
.sp-kpi-value{display:block;margin-top:4px;font-size:19px;font-weight:700;color:#16213a;letter-spacing:-.3px;white-space:nowrap}
.sp-tile{flex:0 0 auto;width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center}
.sp-tile .msr{font-size:20px}
.sp-tile-lg{width:42px;height:42px;border-radius:11px}
.sp-tile-lg .msr{font-size:22px}
.t-blue{background:#e8f0fe;color:#2563eb}
.t-green{background:#e7f7ee;color:#16a34a}
.t-amber{background:#fef3e2;color:#ea9310}
.t-purple{background:#f0ebfe;color:#7c5cf5}
.t-cyan{background:#e2f4f8;color:#0891b2}
.t-pink{background:#fdeaf0;color:#e11d63}
.t-gray{background:#eef1f6;color:#5a6b85}
.t-red{background:#fde8e8;color:#c02626}
.sp-card-head{display:flex;align-items:center;justify-content:space-between;gap:14px}
.sp-card-title{margin:0;font-size:15px;font-weight:700;color:#16213a}
.sp-link{font-size:12.5px;font-weight:600;cursor:pointer}
.sp-select{position:relative}
.sp-select select{appearance:none;-webkit-appearance:none;height:34px;padding:0 32px 0 12px;border:1px solid #e4eaf3;border-radius:8px;background:#fff;font-family:inherit;font-size:12.5px;color:#33405a;cursor:pointer;outline:none}
.sp-select .msr{font-size:18px;color:#8b9ab0;position:absolute;right:8px;top:8px;pointer-events:none}
/* ---------- charts ---------- */
.sp-legend{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px}
.sp-legend i{width:22px;height:3px;border-radius:2px;background:#2f7ff0}
.sp-legend span{font-size:12px;color:#5f6d84}
.sp-donut-wrap{display:flex;align-items:center;gap:26px;margin-top:22px}
.sp-donut{position:relative;flex:0 0 auto;width:196px;height:196px}
.sp-donut svg{display:block;width:100%;height:100%;transform:rotate(-90deg)}
.sp-donut-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.sp-donut-center b{font-size:12.5px;font-weight:700;color:#16213a;margin-top:2px}
.sp-donut-center i{font-size:11.5px;color:#8b9ab0;font-style:normal}
.sp-donut-legend{flex:1;min-width:0;display:flex;flex-direction:column;gap:14px}
.sp-dl{display:flex;align-items:center;gap:10px}
.sp-dl i{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.sp-dl span{flex:1;font-size:13px;color:#33405a}
.sp-dl b{font-size:13px;font-weight:600;color:#16213a}
.sp-bars{display:flex;align-items:flex-end;gap:14px;height:190px;margin-top:18px}
.sp-bars>div{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:8px}
.sp-bars .sp-bar-v{font-size:11px;font-weight:600;color:#6f7d92}
.sp-bars .sp-bar{width:100%;max-width:44px;border-radius:6px 6px 3px 3px;background:linear-gradient(180deg,#4a92f5,#2563eb)}
.sp-bars .sp-bar-l{font-size:11.5px;color:#8b9ab0}
/* ---------- tables ---------- */
.sp-card-clip{overflow:hidden}
.sp-table{width:100%;border-collapse:collapse}
.sp-table thead tr{background:#f8fafd}
.sp-table th{text-align:left;font-size:12.5px;font-weight:600;color:#6f7d92;padding:10px 9px;border-top:1px solid #eef2f8;border-bottom:1px solid #eef2f8;white-space:nowrap}
.sp-table th:first-child,.sp-table td:first-child{padding-left:16px}
.sp-table th:last-child,.sp-table td:last-child{padding-right:16px}
.sp-table td{padding:11px 9px;border-bottom:1px solid #f2f5fa;font-size:13px;color:#33405a;white-space:nowrap}
.sp-table tbody tr:last-child td{border-bottom:0}
.sp-table tbody tr:hover{background:#f9fbfe}
.td-strong{font-weight:600;color:#16213a}
.td-link{font-weight:600;color:#2563eb;cursor:pointer}
.td-muted{color:#8b9ab0}
.td-up{font-weight:600;color:#16a34a}
.sp-simcell{white-space:nowrap}
.sp-simno{display:inline-block;padding:3px 9px;margin-right:5px;border-radius:6px;background:#f2f6fd;
color:#1d4ed8;font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums}
.sp-simno:last-child{margin-right:0}
.sp-simmore{display:inline-block;padding:3px 8px;border-radius:6px;background:#eef1f6;color:#6b7a92;
font-size:12px;font-weight:600;cursor:default}
.sp-badge{display:inline-block;padding:4px 11px;border-radius:20px;font-size:11.5px;font-weight:600}
.b-amber{background:#fef4d8;color:#b06f0a}
.b-blue{background:#dceafd;color:#1d4ed8}
.b-cyan{background:#d5f3f7;color:#0e7490}
.b-green{background:#d9f5e2;color:#15803d}
.b-red{background:#fde8e8;color:#b91c1c}
.b-gray{background:#eef1f6;color:#5a6b85}
.b-purple{background:#f0ebfe;color:#6d4ce0}
.sp-who{display:flex;align-items:center;gap:10px}
.sp-avatar{flex:0 0 auto;width:28px;height:28px;border-radius:50%;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}
.a-blue{background:#e8f0fe;color:#2563eb}
.a-green{background:#e7f7ee;color:#16a34a}
.a-amber{background:#fdf0da;color:#b06f0a}
.a-purple{background:#f0ebfe;color:#6d4ce0}
.a-cyan{background:#d5f3f7;color:#0e7490}
.a-pink{background:#fdeaf0;color:#d81b60}
.a-gray{background:#eef1f6;color:#5a6b85}
.a-red{background:#fde8e8;color:#c02626}
.sp-tabs{display:flex;align-items:center;gap:6px;padding:14px 20px 0;border-bottom:1px solid #eef2f8;overflow-x:auto}
.sp-tab{height:36px;padding:0 14px;border:0;border-bottom:2px solid transparent;background:transparent;font-family:inherit;font-size:13px;font-weight:500;color:#7a879c;cursor:pointer;white-space:nowrap;margin-bottom:-1px}
.sp-tab:hover{color:#33405a}
.sp-tab.is-active{color:#2563eb;font-weight:600;border-bottom-color:#2563eb}
.sp-toolbar{display:flex;align-items:center;gap:10px;padding:15px 20px}
.sp-toolbar .sp-search{flex:1;max-width:320px;width:auto}
.sp-toolbar .sp-search input{padding:0 14px 0 36px}
.sp-toolbar .sp-search .msr{left:11px;right:auto;top:9px}
.sp-toolbar .sp-select select{height:36px}
.sp-toolbar .sp-select .msr{top:9px}
.sp-filter{display:flex;align-items:center;gap:7px;height:36px;padding:0 13px;border:1px solid #e4eaf3;border-radius:8px;background:#fff;color:#5a6b83;font-family:inherit;font-size:12.5px;font-weight:500;cursor:pointer}
.sp-filter:hover{border-color:#a9caf7;color:#1a2334}
.sp-filter .msr{font-size:17px}
.sp-pager{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 20px;border-top:1px solid #eef2f8}
.sp-pager-info{font-size:12.5px;color:#8b9ab0}
.sp-pager-btns{display:flex;align-items:center;gap:6px}
.sp-pg{min-width:32px;height:32px;padding:0 9px;border:1px solid #e4eaf3;border-radius:7px;background:#fff;color:#33405a;font-family:inherit;font-size:12.5px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.sp-pg:hover{border-color:#a9caf7}
.sp-pg.is-active{border-color:#2563eb;background:#2563eb;color:#fff;font-weight:600}
.sp-pg .msr{font-size:17px}
.sp-pg-dots{font-size:12.5px;color:#b3bdcc;padding:0 2px}
/* ---------- quick actions ---------- */
.sp-qa{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.sp-qa button{display:flex;align-items:center;justify-content:center;gap:10px;height:52px;border-radius:9px;font-family:inherit;font-size:13.5px;font-weight:600;cursor:pointer;border:1px solid transparent}
.sp-qa .msr{font-size:20px}
.sp-qa-1{border-color:#2563eb;background:#2563eb;color:#fff;box-shadow:0 4px 12px rgba(37,99,235,.25)}
.sp-qa-1:hover{background:#1d4ed8}
.sp-qa-1 i{width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center}
.sp-qa-2{border-color:#d8efe1;background:#f4fbf6;color:#16a34a}
.sp-qa-2:hover{background:#e9f7ee}
.sp-qa-3{border-color:#e3dcfb;background:#f7f5ff;color:#6d4ce0}
.sp-qa-3:hover{background:#f0ebfe}
.sp-qa-4{border-color:#f6e4c3;background:#fffbf2;color:#b06f0a}
.sp-qa-4:hover{background:#fdf6e7}
.sp-qa-5{border-color:#fadbe5;background:#fff5f8;color:#d81b60}
.sp-qa-5:hover{background:#fdebf1}
.sp-qa-6{border-color:#cfeaf0;background:#f2fbfd;color:#0e7490}
.sp-qa-6:hover{background:#e6f6fa}
/* ---------- settings ---------- */
.sp-set-head{display:flex;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid #eef2f8;background:#fbfcfe}
.sp-set-head span.sp-tile{width:32px;height:32px;border-radius:9px}
.sp-set-head span.sp-tile .msr{font-size:18px}
.sp-set-head h2{margin:0;font-size:14.5px;font-weight:700;color:#16213a}
.sp-set-row{display:flex;align-items:center;gap:20px;padding:15px 20px;border-bottom:1px solid #f4f7fb}
.sp-set-row:last-child{border-bottom:0}
.sp-set-txt{flex:1;min-width:0}
.sp-set-l{display:block;font-size:13.5px;font-weight:500;color:#26314a}
.sp-set-h{display:block;margin-top:3px;font-size:12px;color:#8b9ab0}
.sp-set-row input[type=text]{width:280px;height:36px;padding:0 12px;border:1px solid #e4eaf3;border-radius:8px;background:#fff;font-family:inherit;font-size:13px;color:#1a2334;outline:none}
.sp-set-row input[type=text]:focus{border-color:#a9caf7}
.sp-set-row .sp-select select{width:200px;height:36px;font-size:13px}
.sp-set-row .sp-select .msr{top:9px}
.sp-toggle{flex:0 0 auto;position:relative;display:block;width:42px;height:24px;border-radius:12px;cursor:pointer;background:#dbe2ec;transition:background .18s;border:0;padding:0}
.sp-toggle i{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(16,32,66,.25);transition:left .18s}
.sp-toggle.is-on{background:#2563eb}
.sp-toggle.is-on i{left:21px}
/* ---------- messages ---------- */
.sp-msg{display:grid;grid-template-columns:330px 1fr;min-height:560px;overflow:hidden}
.sp-msg-list{border-right:1px solid #eef2f8;display:flex;flex-direction:column}
.sp-msg-search{padding:14px 16px;border-bottom:1px solid #eef2f8}
.sp-msg-search .sp-search{width:100%}
.sp-msg-search .sp-search input{padding:0 14px 0 36px}
.sp-msg-search .sp-search .msr{left:11px;right:auto}
.sp-thread{display:flex;align-items:center;gap:11px;padding:13px 16px;border-bottom:1px solid #f4f7fb;border-left:3px solid transparent;cursor:pointer;background:none;width:100%;text-align:left;font-family:inherit}
.sp-thread:hover{background:#fafcff}
.sp-thread.is-active{background:#f2f7fe;border-left-color:#2563eb}
.sp-thread .sp-avatar{width:36px;height:36px;font-size:12px}
.sp-thread-body{flex:1;min-width:0}
.sp-thread-top{display:flex;align-items:baseline;gap:8px}
.sp-thread-n{font-size:13px;font-weight:500;color:#16213a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp-thread.has-unread .sp-thread-n{font-weight:700}
.sp-thread-t{margin-left:auto;font-size:11px;color:#a3aebf;white-space:nowrap}
.sp-thread-p{display:block;margin-top:3px;font-size:12.5px;color:#8b9ab0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp-thread-u{flex:0 0 auto;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#2563eb;color:#fff;font-size:10.5px;font-weight:700;display:flex;align-items:center;justify-content:center}
.sp-msg-pane{display:none;flex-direction:column;min-width:0}
.sp-msg-pane.is-active{display:flex}
.sp-msg-head{display:flex;align-items:center;gap:12px;padding:14px 20px;border-bottom:1px solid #eef2f8}
.sp-msg-head .sp-avatar{width:38px;height:38px;font-size:13px}
.sp-msg-head-n{display:block;font-size:14px;font-weight:600;color:#16213a}
.sp-msg-head-r{display:block;margin-top:2px;font-size:12px;color:#8b9ab0}
.sp-ico-btn{width:34px;height:34px;border:1px solid #e4eaf3;border-radius:8px;background:#fff;color:#5a6b83;cursor:pointer;display:flex;align-items:center;justify-content:center}
.sp-ico-btn:hover{border-color:#a9caf7}
.sp-ico-btn .msr{font-size:18px}
.sp-msg-body{flex:1;padding:20px;display:flex;flex-direction:column;gap:12px;background:#fbfcfe}
.sp-row-in{display:flex;justify-content:flex-start}
.sp-row-out{display:flex;justify-content:flex-end}
.sp-bubble{max-width:62%;padding:10px 14px;font-size:13px;line-height:1.5}
.sp-bubble-in{border-radius:14px 14px 14px 4px;background:#fff;border:1px solid #e9eef6;color:#26314a}
.sp-bubble-out{border-radius:14px 14px 4px 14px;background:#2563eb;color:#fff}
.sp-msg-foot{display:flex;align-items:center;gap:10px;padding:14px 20px;border-top:1px solid #eef2f8}
.sp-msg-foot input{flex:1;height:38px;padding:0 14px;border:1px solid #e4eaf3;border-radius:8px;background:#f8fafd;font-family:inherit;font-size:13px;color:#1a2334;outline:none}
.sp-msg-foot input:focus{border-color:#a9caf7;background:#fff}
.sp-msg-foot .sp-ico-btn{width:36px;height:36px}
/* ---------- a11y ---------- */
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal!important}
.screen-reader-text:focus{background-color:#fff;clip:auto!important;clip-path:none;color:#16213a;display:block;font-size:13px;height:auto;left:5px;line-height:normal;padding:12px 20px;text-decoration:none;top:5px;width:auto;z-index:100000}
/* ---------- login / register ---------- */
body.simplus-guest{background:#eef2f9}
.sp-login{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:48px 24px;background:#eef2f9}
.sp-login-wrap{width:100%;max-width:404px}
/* The register form is six fields deep; paired two-up it fits a screen without
scrolling, so the card widens only while that tab is the one showing. */
.sp-login-wrap:has(.sp-login-card[data-auth-tab="register"]){max-width:620px}
.sp-login-brand{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:22px}
.sp-login-brand .sp-brand-mark{width:32px;height:32px;box-shadow:0 3px 10px rgba(31,111,224,.35)}
.sp-login-brand .sp-brand-mark .msr{font-size:19px}
.sp-login-name{font-size:19px;font-weight:800;letter-spacing:.3px;color:#16213a}
.sp-login-name em{color:#2563eb;font-style:normal}
.sp-login-card{background:#fff;border:1px solid #e4eaf3;border-radius:14px;padding:30px 32px 28px;box-shadow:0 12px 32px rgba(15,28,52,.08)}
.sp-auth-tabs{display:flex;gap:4px;padding:4px;border-radius:10px;background:#f1f5fb;margin-bottom:24px}
.sp-auth-tab{flex:1;height:36px;border:0;border-radius:8px;background:transparent;font-family:inherit;font-size:13.5px;font-weight:500;color:#7a879c;cursor:pointer}
.sp-auth-tab:hover{color:#33405a}
.sp-auth-tab.is-active{background:#fff;color:#16213a;font-weight:600;box-shadow:0 1px 3px rgba(16,32,66,.12)}
.sp-auth-pane{display:none}
.sp-auth-pane.is-active{display:block}
.sp-auth-pane h1{margin:0;font-size:22px;font-weight:700;letter-spacing:-.2px;color:#16213a}
.sp-login-lead{margin:7px 0 0;font-size:13.5px;color:#7a879c}
.sp-login-label{display:block;margin-top:18px;font-size:12.5px;font-weight:600;color:#3d4a63}
.sp-auth-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px}
.sp-auth-pair{min-width:0}
@media (max-width:560px){.sp-auth-grid{grid-template-columns:minmax(0,1fr)}}
.sp-login-field{position:relative;margin-top:7px}
.sp-login-field input{width:100%;height:42px;padding:0 44px 0 40px;border:1px solid #e0e7f1;border-radius:9px;background:#f8fafd;font-family:inherit;font-size:13.5px;color:#1a2334;outline:none}
.sp-login-field input:focus{border-color:#a9caf7;background:#fff}
.sp-login-field>.msr{font-size:19px;color:#8b9ab0;position:absolute;left:12px;top:11px;pointer-events:none}
.sp-login-eye{position:absolute;right:6px;top:6px;width:30px;height:30px;border:0;border-radius:7px;background:transparent;color:#8b9ab0;cursor:pointer;display:flex;align-items:center;justify-content:center}
.sp-login-eye:hover{background:#eef2f8;color:#5a6b83}
.sp-login-eye .msr{font-size:19px}
.sp-login-row{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:16px}
.sp-login-check{display:flex;align-items:flex-start;gap:8px;font-size:13px;line-height:1.5;color:#3d4a63;cursor:pointer}
.sp-login-check input{width:16px;height:16px;margin:2px 0 0;accent-color:#2563eb;cursor:pointer}
.sp-login-terms{margin-top:16px}
.sp-login-row a{font-size:13px;font-weight:500;white-space:nowrap}
.sp-login-submit{width:100%;height:44px;margin-top:22px;border:1px solid #2563eb;border-radius:9px;background:#2563eb;color:#fff;font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:9px;box-shadow:0 6px 16px rgba(37,99,235,.28)}
.sp-login-submit:hover{background:#1d4ed8;border-color:#1d4ed8}
.sp-login-submit .msr{font-size:19px}
.sp-login-note{margin:16px 0 0;font-size:12.5px;line-height:1.6;color:#8b9ab0;text-align:center}
.sp-login-error,.sp-login-ok{display:flex;align-items:center;gap:9px;margin-bottom:18px;padding:11px 13px;border-radius:9px;font-size:12.5px;line-height:1.5}
.sp-login-error{background:#fdecec;border:1px solid #f7cfcf;color:#b91c1c}
.sp-login-ok{background:#eaf8ef;border:1px solid #c9ebd5;color:#15803d}
.sp-login-error .msr,.sp-login-ok .msr{font-size:18px;flex:0 0 auto}
/* ---------- logout button ---------- */
.sp-logout{width:34px;height:34px;border:1px solid #e6ecf5;border-radius:9px;background:#fff;color:#8b9ab0;cursor:pointer;display:flex;align-items:center;justify-content:center;text-decoration:none}
.sp-logout:hover{border-color:#f2c9c9;color:#c02626;background:#fff7f7}
.sp-logout .msr{font-size:19px}
/* ── Sim module: advanced filters, actions, modal, toasts ─────────────── */
.sp-adv{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;padding:0 20px 15px;border-bottom:1px solid #eef2f8}
.sp-form{display:flex;flex-direction:column;gap:14px;margin-top:16px}
.sp-form-foot{display:flex;justify-content:flex-end;gap:10px;margin-top:4px}
.sp-field{display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:#6f7d92;min-width:150px}
.sp-field[hidden]{display:none}
.sp-field>span{font-weight:600}
.sp-field>span em{color:#c02626;font-style:normal}
.sp-field input,.sp-field textarea{height:34px;padding:0 12px;border:1px solid #e4eaf3;border-radius:8px;background:#fff;color:#1a2334;font:inherit;font-size:13px;width:100%;box-sizing:border-box}
.sp-field textarea{height:auto;padding:9px 12px;resize:vertical}
/* Ô ngày trên Safari của iPhone không chịu nằm cùng hàng với mấy ô bên cạnh:
WebKit cho input[type=date] một bề rộng nội tại theo nội dung, nên width:100%
không kéo nó hẹp lại được -- ô tràn rộng hơn ô khác và cả khối form bị đẩy
qua trái phải khi cuộn. Nó còn canh giữa cái ngày bên trong, trong khi mọi ô
khác canh trái, nên nhìn vào là thấy lệch ngay cả khi bề rộng đã đúng.
appearance:none bỏ cách WebKit tự dựng ô ấy đi (khung viền vẫn do theme vẽ,
nên không mất gì), min-width:0 gỡ bề rộng nội tại, còn
::-webkit-date-and-time-value là chỗ duy nhất canh được chữ bên trong.
Chromium không dựng ô ngày theo kiểu ấy, nên trên máy chạy bộ thử không tái
hiện được -- luật này viết theo đúng hành vi đã biết của WebKit. */
.sp-field input[type=date]{
-webkit-appearance:none;appearance:none;
min-width:0;max-width:100%;text-align:left}
.sp-field input[type=date]::-webkit-date-and-time-value{text-align:left;margin:0}
/* Nút lịch của WebKit tự chiếm chỗ ở cuối ô; giữ nó ở đúng lề phải như mũi tên
của mấy ô chọn bên cạnh. */
.sp-field input[type=date]::-webkit-calendar-picker-indicator{margin:0;padding:0}
.sp-field input:focus,.sp-field textarea:focus,.sp-select select:focus{outline:none;border-color:#a9caf7;box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.sp-field .sp-select select{width:100%}
/* Ô chỉ đọc: cao bằng ô nhập bên cạnh nên hàng không bị so le, nhưng không có
viền và không bắt được con trỏ -- nhìn là biết đây là số hệ thống tính. */
.sp-field-read{display:flex;align-items:center;height:34px;margin:0;font-size:13px;font-weight:600;color:#1a2334}
.sp-field-row{display:flex;gap:12px}
.sp-field-row .sp-field{flex:1}
.sp-filter.is-on{border-color:#a9caf7;color:#2563eb;background:#f5f9ff}
.sp-col-act{width:1%;white-space:nowrap;text-align:right}
.sp-col-act .sp-ico-btn{display:inline-flex;vertical-align:middle;margin-left:6px}
.sp-ico-danger:hover{border-color:#f2c9c9;color:#c02626;background:#fff7f7}
.sp-empty-row td{text-align:center;color:#8b9ab0;padding:34px 12px!important;font-size:13px}
/* ---------- số thứ tự, ô chọn dòng, thanh thao tác hàng loạt ----------
Hai cột này do assets/js/bulk.js chèn vào, không phải PHP dựng ra -- xem đầu
tệp ấy để biết vì sao. */
.sp-col-pick{width:1%;white-space:nowrap;padding-right:0!important}
.sp-col-pick input[type=checkbox]{
width:16px;height:16px;margin:0;display:block;accent-color:#2563eb;cursor:pointer}
/* Số thứ tự là số phụ: đọc được khi cần, không tranh chỗ với dữ liệu. Canh phải
và tabular-nums để cột số thẳng hàng khi sang trang ba chữ số. */
.sp-col-no{width:1%;white-space:nowrap;text-align:right;color:#8b9ab0;font-size:12px;
font-variant-numeric:tabular-nums;padding-right:14px!important}
th.sp-col-no{color:#8b9ab0;font-weight:600}
.sp-table tbody tr.is-picked{background:#f5f9ff}
.sp-table tbody tr.is-picked td{border-color:#dce9fb}
.sp-kpi-scope{margin:-6px 0 12px;font-size:13px;color:#5c6b85}
.sp-kpi-scope::before{content:'info';font-family:'Material Symbols Rounded';font-size:15px;
vertical-align:-3px;margin-right:5px;color:#8b9ab0}
.sp-bulkbar{margin:0 0 12px;border:1px solid #a9caf7;border-radius:10px;background:#f5f9ff}
.sp-bulk-line{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 14px}
.sp-bulk-count{font-size:13px;font-weight:600;color:#1d4ed8;white-space:nowrap}
.sp-bulk-acts{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-left:auto}
.sp-bulk-pair{display:flex;align-items:center;gap:8px}
.sp-bulk-select select{height:38px;padding:0 30px 0 12px;font-size:13px}
.sp-bulkbar .sp-btn{height:34px;background:#fff}
.sp-btn-danger{border-color:#f2c9c9;color:#c02626}
.sp-btn-danger:hover{border-color:#e08b8b;background:#fff7f7}
.sp-btn-danger .msr{color:#c02626}
.sp-bulk-clear{border:0;background:none;padding:0 2px;color:#5c6b85;font-family:inherit;
font-size:13px;cursor:pointer;text-decoration:underline}
.sp-bulk-clear:hover{color:#1a2334}
/* Danh sách dòng không chạy được ở lại trên màn cho tới lượt sau, không nằm
trong một cái toast tự tắt. */
.sp-bulk-failed{border-top:1px solid #d8e4f6;padding:10px 14px 12px;font-size:13px;color:#8a3a1d}
.sp-bulk-failed-head{display:block;font-weight:600;margin-bottom:6px}
.sp-bulk-failed ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px}
.sp-bulk-failed b{color:#1a2334}
@media (max-width:720px){
.sp-bulk-acts{margin-left:0;width:100%}
.sp-bulk-pair,.sp-bulk-pair .sp-btn{flex:1}
}
.sp-table-wrap{position:relative;overflow-x:auto}
.sp-table-busy{position:absolute;inset:0;background:rgba(255,255,255,.6);display:flex;align-items:center;justify-content:center}
.sp-spin{width:26px;height:26px;border:3px solid #dbe6f7;border-top-color:#2563eb;border-radius:50%;animation:sp-spin .7s linear infinite}
@keyframes sp-spin{to{transform:rotate(360deg)}}
.sp-table th[data-sim-sort]{cursor:pointer;user-select:none}
.sp-table th[data-sim-sort]:hover{color:#2563eb}
.sp-table th.is-sort-asc::after{content:" ↑";color:#2563eb}
.sp-table th.is-sort-desc::after{content:" ↓";color:#2563eb}
.sp-pg[disabled]{opacity:.45;cursor:not-allowed}
body.sp-modal-open{overflow:hidden}
.sp-modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:20px}
.sp-modal[hidden]{display:none}
.sp-modal-back{position:absolute;inset:0;background:rgba(15,28,52,.55)}
.sp-modal-card{position:relative;width:100%;max-width:560px;max-height:90vh;overflow:auto;background:#fff;border-radius:13px;box-shadow:0 18px 50px rgba(16,32,66,.28)}
.sp-modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;border-bottom:1px solid #eef2f8}
.sp-modal-head h2{margin:0;font-size:16px;font-weight:600;color:#16213a}
.sp-modal-body{display:flex;flex-direction:column;gap:14px;padding:18px 20px}
.sp-bank-note{padding:13px 15px;border:1px solid #dbe6f7;border-radius:10px;background:#f5f9ff}
.sp-bank-note[hidden]{display:none}
.sp-bank-note h4{display:flex;align-items:center;gap:7px;margin:0 0 9px;font-size:13px;font-weight:650;color:#1d4ed8}
.sp-bank-note h4.is-warn{color:#b06f0a}
.sp-bank-note h4 .msr{font-size:18px}
.sp-bank-note dl{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;margin:0}
.sp-bank-note dt{font-size:12.5px;color:#6f7d92}
.sp-bank-note dd{margin:0;font-size:13px;color:#16213a}
.sp-bank-note dd b{font-weight:650;font-variant-numeric:tabular-nums;letter-spacing:.2px}
.sp-bank-note small{display:block;margin-top:9px;font-size:12px;color:#6f7d92;line-height:1.5}
.sp-modal-foot{display:flex;justify-content:flex-end;gap:10px;padding-top:4px}
.sp-form-error{margin:0;padding:9px 12px;border-radius:8px;background:#fff5f5;border:1px solid #f6d4d4;color:#c02626;font-size:12.5px}
.sp-form-error[hidden]{display:none}
.sp-toasts{position:fixed;right:18px;bottom:18px;z-index:300;display:flex;flex-direction:column;gap:9px}
.sp-toast{padding:11px 16px;border-radius:9px;background:#16213a;color:#fff;font-size:13px;box-shadow:0 8px 22px rgba(16,32,66,.25);transition:opacity .35s,transform .35s}
.sp-toast.is-ok{background:#137a45}
.sp-toast.is-error{background:#c02626}
.sp-toast.is-warn{background:#a8590d}
.sp-toast.is-out{opacity:0;transform:translateY(8px)}
/* `hidden` must win over the display rules above. */
.sp-adv[hidden],.sp-table-busy[hidden],.sp-empty-row[hidden]{display:none}
/* ═══ Responsive ═══════════════════════════════════════════════════════
Desktop rules above are untouched; everything here only applies below
the design's natural 1360px width. */
/* The layout was pinned to min-width:1360px, so a phone got a 1360px page
it had to pan around. Below that width it becomes fluid instead. */
@media (max-width:1360px){
.sp-app{min-width:0}
.sp-search{width:auto;flex:1;min-width:120px}
}
@media (max-width:1100px){
.sp-grid-4,.sp-grid-5{grid-template-columns:repeat(2,minmax(0,1fr))}
/* Tổng quan: 6 stat cards in a row is what forced the page wider than the
viewport, and the chart pair never collapsed. minmax(0,...) matters —
a plain 1fr keeps a min-content floor, and the nowrap figures inside
then push each track wider than the grid itself. */
.sp-grid-6{grid-template-columns:repeat(3,minmax(0,1fr))}
.sp-grid-2{grid-template-columns:minmax(0,1fr)}
.sp-qa{grid-template-columns:repeat(3,minmax(0,1fr))}
.sp-content{padding:18px 16px 26px}
.sp-card-clip{overflow-x:auto}
}
/* Sidebar becomes an off-canvas drawer driven by the hamburger. */
@media (max-width:900px){
.sp-side{position:fixed;left:0;top:0;bottom:0;height:100dvh;z-index:160;
transform:translateX(-100%);transition:transform .24s ease;box-shadow:0 0 40px rgba(15,28,52,.4)}
.sp-side.is-open{transform:none}
.sp-side-back{position:fixed;inset:0;z-index:155;background:rgba(15,28,52,.5);border:0;padding:0}
.sp-side-back[hidden]{display:none}
body.sp-nav-open{overflow:hidden}
.sp-head{flex-direction:column;align-items:stretch;gap:12px}
.sp-head-actions{justify-content:flex-start;flex-wrap:wrap}
.sp-toolbar{flex-wrap:wrap;gap:9px;padding:13px 14px}
.sp-toolbar .sp-search{flex:1 1 100%;order:-1}
/* Only the toolbar's spacer; the topbar needs its one to keep the icon
group pinned right. */
.sp-toolbar .sp-spacer{display:none}
.sp-adv{padding:0 14px 13px}
.sp-adv .sp-field{flex:1 1 140px;min-width:0}
.sp-pager{flex-wrap:wrap;gap:10px;padding:13px 14px}
.sp-donut-wrap{flex-direction:column;align-items:center;gap:16px;margin-top:16px}
.sp-card-head{flex-wrap:wrap;gap:10px}
.sp-daterange{width:100%;justify-content:space-between}
.sp-legend,.sp-donut-legend{width:100%}
}
/* Topbar has to give up its non-essentials before it starts wrapping. */
@media (max-width:760px){
.sp-top{gap:10px;padding:0 12px}
.sp-top .sp-search{display:none}
.sp-user>span:not(.sp-user-av){display:none}
.sp-user .msr{display:none}
.sp-div{display:none}
/* Trên điện thoại cái chuông không nằm sát mép phải, nên một hộp 302px canh
phải theo nó thò hẳn ra ngoài mép trái màn hình. Ghim theo khung nhìn
thay vì theo cái chuông: rộng bao nhiêu cũng vừa, và không bao giờ lọt
ra ngoài hai bên. */
.sp-note-pop{position:fixed;top:52px;left:12px;right:12px;width:auto;max-width:none}
.sp-note-list{max-height:calc(100vh - 120px)}
}
@media (max-width:600px){
/* Stat cards sit 2 across on a phone rather than one long column. */
.sp-grid-4,.sp-grid-5,.sp-grid-6{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.sp-qa{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
/* Tile left, text right. In a half-width card that leaves little room, so
the tile and the figure both come down a size to keep a long amount like
2,458,780,000 đ on one line. min-width:0 lets the text column actually
shrink inside the flex row. */
.sp-stat-top{align-items:center;gap:8px}
.sp-stat-top>span:last-child,.sp-kpi>span:last-child{min-width:0;flex:1}
.sp-tile{width:28px;height:28px;border-radius:8px}
.sp-tile-lg{width:30px;height:30px;border-radius:9px}
.sp-tile .msr{font-size:16px}
.sp-kpi{padding:12px;gap:8px}
.sp-stat{padding:11px}
/* Wrapping is allowed so the đ can drop to a second line on the narrowest
phones; commas give no break opportunity, so the number itself never
splits. */
.sp-stat-value,.sp-kpi-value{font-size:13px;letter-spacing:-.4px;white-space:normal}
.sp-stat-label,.sp-kpi-label{font-size:11.5px;white-space:normal}
.sp-stat-foot,.sp-vs{white-space:normal}
.sp-donut{width:158px;height:158px}
.sp-content{padding:14px 12px 22px}
.sp-h1{font-size:19px}
.sp-kpi{padding:14px}
.sp-head-actions .sp-btn{flex:1;justify-content:center}
.sp-modal{padding:0;align-items:flex-end}
.sp-modal-card{max-width:none;max-height:92dvh;border-radius:14px 14px 0 0}
.sp-field-row{flex-direction:column;gap:14px}
.sp-toasts{right:10px;left:10px;bottom:10px}
.sp-pg-dots,.sp-pager-info{font-size:12px}
}
/* Touch targets: 34px controls are too small to hit reliably on a phone. */
@media (hover:none) and (pointer:coarse){
.sp-ico-btn,.sp-pg{min-width:38px;min-height:38px}
.sp-nav a{padding-top:11px;padding-bottom:11px}
.sp-table th[data-sim-sort]{padding-top:13px;padding-bottom:13px}
}
/* ── Screens not yet backed by data ───────────────────────────────────── */
.sp-demo-note{display:flex;align-items:center;gap:9px;margin:0;padding:11px 15px;border-radius:10px;
background:#fff8e8;border:1px solid #f3e2bd;color:#8a6416;font-size:12.5px;line-height:1.45}
.sp-demo-note .msr{font-size:18px;flex:0 0 auto}
.sp-demo-note .sp-link{color:#8a6416;text-decoration:underline}
.sp-demo-note.is-ok{background:#eefaf0;border-color:#c6e9cd;color:#1f6b31}
.sp-demo-note+.sp-demo-note{margin-top:10px}
.sp-empty-note{margin:26px 0;text-align:center;color:#8b9ab0;font-size:13px}
/* Wallet movements read at a glance: money in is green, money out is red. */
.sp-amt.is-in{color:#16a34a}
.sp-amt.is-out{color:#dc2626}
/* The remaining days sit under the deadline, so a row reads as one fact. */
.sp-hold-left{display:block;margin-top:2px;font-size:11px;color:#98a4b8}
/* ---------- line chart (Báo cáo) ----------
Named sp-chart*, not sp-bars*: the mock screens already own .sp-bars and
.sp-bar above, and those rules are more specific than these, so reusing the
names left this chart drawing with the mock's geometry.
The plot keeps a fixed 200px height and the labels sit in their own row, so
every point is measured against the same axis. */
.sp-chart{display:flex;gap:10px}
.sp-chart-axis{display:flex;flex-direction:column;justify-content:space-between;
flex:0 0 auto;height:200px;font-size:10.5px;color:#9aa6b8;text-align:right;min-width:38px}
.sp-chart-main{flex:1;min-width:0}
.sp-chart-plot{position:relative;height:200px}
/* Labels are pinned to their point's x, not spread across equal flex slots:
points sit at i/(n-1) of the width, which is not the centre of a slot, and
equal slots drifted the labels away from the dots they name. */
.sp-chart-labels{position:relative;height:15px;margin-top:8px}
.sp-chart-labels span{position:absolute;top:0;transform:translateX(-50%);font-size:10.5px;
color:#9aa6b8;white-space:nowrap}
.sp-chart-labels span:first-child{transform:none}
.sp-chart-labels span:last-child{transform:translateX(-100%)}
.sp-chart-empty{display:flex;align-items:center;justify-content:center;height:200px;
color:#8b9ab0;font-size:13px}
.sp-chart-legend{display:flex;align-items:center;justify-content:center;gap:9px;
margin:0 0 14px;font-size:12.5px;color:#5b6a83}
.sp-legend-key{display:block;width:26px;height:3px;border-radius:2px;background:#3b6bf0}
/* One 0-100 coordinate space stretched to any box. The stroke keeps its real
width via vector-effect, and the dots live in an HTML layer above so they
stay circles instead of stretching with the viewBox. */
.sp-line-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;display:block}
.sp-line-area{fill:url(#sp-line-fill);stroke:none}
.sp-line-path{fill:none;stroke:#3b6bf0;stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
/* Gridlines are drawn by the container, not the SVG: the plot box is stretched
to fit, and an SVG line stretched with it would come out uneven. Five 1px
layers, dashed along their own length, pinned to the five axis ticks. */
.sp-chart-plot::before{content:"";position:absolute;inset:0;pointer-events:none;
background-image:
repeating-linear-gradient(to right,#e1e8f2 0 3px,transparent 3px 8px),
repeating-linear-gradient(to right,#e1e8f2 0 3px,transparent 3px 8px),
repeating-linear-gradient(to right,#e1e8f2 0 3px,transparent 3px 8px),
repeating-linear-gradient(to right,#e1e8f2 0 3px,transparent 3px 8px),
repeating-linear-gradient(to right,#e1e8f2 0 3px,transparent 3px 8px);
background-size:100% 1px;background-repeat:no-repeat;
background-position:0 0,0 25%,0 50%,0 75%,0 100%}
.sp-line-dots{position:absolute;inset:0;pointer-events:none}
.sp-line-dot{position:absolute;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;
background:#fff;border:2.2px solid #3b6bf0;box-sizing:border-box;transition:transform .12s}
.sp-line-dot.is-on{transform:scale(1.5)}
.sp-line-hit{position:absolute;inset:0;cursor:crosshair;outline:none}
.sp-line-hit:focus-visible{outline:2px solid #a9caf7;outline-offset:2px;border-radius:6px}
.sp-line-cursor{position:absolute;top:0;bottom:0;width:1px;margin-left:-.5px;
background:#c7d5ea;pointer-events:none}
.sp-line-cursor[hidden]{display:none}
.sp-line-tip{position:absolute;z-index:5;transform:translate(-50%,-100%);margin-top:-14px;
padding:7px 11px;border-radius:8px;background:#16213a;color:#fff;font-size:12px;
white-space:nowrap;pointer-events:none;box-shadow:0 6px 18px rgba(16,32,66,.28)}
.sp-line-tip[hidden]{display:none}
.sp-line-tip b{display:block;font-weight:600;font-size:13px;margin-top:2px}
.sp-line-tip::after{content:"";position:absolute;left:50%;top:100%;margin-left:-5px;
border:5px solid transparent;border-top-color:#16213a}
.sp-btn[disabled],.sp-filter[disabled],.sp-tab[disabled],.sp-ico-btn[disabled],.sp-toggle[disabled]{
opacity:.5;cursor:not-allowed;pointer-events:none}
.sp-btn-primary[disabled]{background:#93b4ef;border-color:#93b4ef}
.sp-select select[disabled],.sp-search input[disabled],.sp-set-row input[disabled],
.sp-msg-compose input[disabled]{opacity:.6;cursor:not-allowed;background:#f7f9fc}
/* The date range on Tổng quan is a label, not a control yet. */
.sp-daterange.is-static{cursor:default;opacity:.75}
/* A required field left empty, while the save button is held. */
.sp-field.is-missing input,.sp-field.is-missing select,.sp-field.is-missing textarea{border-color:#f0c9c9;background:#fffafa}
.sp-field.is-missing>span{color:#c02626}
/* Chủ đề: sáu lựa chọn, chọn bằng một cái nhìn chứ không phải hai lần bấm. */
.sp-topics{display:flex;flex-wrap:wrap;gap:8px}
.sp-topic{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border:1px solid #e4eaf3;border-radius:20px;background:#fff;color:#5a6b83;font-family:inherit;font-size:12.5px;font-weight:500;cursor:pointer;transition:border-color .12s,background .12s,color .12s}
.sp-topic .msr{font-size:16px}
.sp-topic:hover{border-color:#c9d6ea;background:#f7f9fc}
.sp-topic.is-on{border-color:#2563eb;background:#eff4ff;color:#1d4ed8;font-weight:600}
.sp-field.is-missing .sp-topic{border-color:#f0c9c9}
/* ── Searchable picker ─────────────────────────────────────────────────── */
.sp-picker{position:relative}
.sp-picker>input[type=text]{width:100%;height:34px;padding:0 32px 0 12px;border:1px solid #e4eaf3;border-radius:8px;
background:#fff;color:#1a2334;font:inherit;font-size:13px;box-sizing:border-box}
.sp-picker>input[type=text]:focus{outline:none;border-color:#a9caf7;box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.sp-picker>.msr{position:absolute;right:9px;top:8px;font-size:18px;color:#8b9ab0;pointer-events:none}
.sp-picker-list{position:absolute;z-index:20;left:0;right:0;top:calc(100% + 4px);max-height:240px;overflow-y:auto;
background:#fff;border:1px solid #e4eaf3;border-radius:10px;box-shadow:0 10px 26px rgba(16,32,66,.14);padding:5px}
.sp-picker-list[hidden]{display:none}
.sp-picker-item{display:block;width:100%;text-align:left;padding:8px 10px;border:0;border-radius:7px;background:transparent;
color:#33405a;font:inherit;font-size:13px;cursor:pointer}
.sp-picker-item:hover,.sp-picker-item.is-cursor{background:#f2f7fe;color:#1a2334}
.sp-picker-empty{padding:12px 10px;color:#8b9ab0;font-size:12.5px;text-align:center}
/* ── Phân quyền: the capability matrix ─────────────────────────────────── */
.sp-matrix td:first-child,.sp-matrix th:first-child{white-space:normal;min-width:210px}
.sp-col-cap{width:1%;text-align:center;white-space:nowrap}
.sp-matrix tbody tr[hidden]{display:none}
/* A checkbox drawn as a switch. The input keeps the semantics -- it is still
focusable and still reachable by keyboard -- and the span is the picture. */
.sp-switch{display:inline-block;position:relative;width:42px;height:24px;cursor:pointer;vertical-align:middle}
.sp-switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:inherit}
.sp-switch-ui{position:absolute;inset:0;border-radius:12px;background:#dbe2ec;transition:background .18s;pointer-events:none}
.sp-switch-ui::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;
background:#fff;box-shadow:0 1px 3px rgba(16,32,66,.25);transition:left .18s}
.sp-switch input:checked+.sp-switch-ui{background:#2563eb}
.sp-switch input:checked+.sp-switch-ui::after{left:21px}
.sp-switch input:focus-visible+.sp-switch-ui{box-shadow:0 0 0 3px rgba(37,99,235,.28)}
.sp-switch input[disabled]{cursor:not-allowed}
.sp-switch input[disabled]+.sp-switch-ui{opacity:.55}
/* Locked cells read as settled, not as broken: full opacity, no pointer. */
.sp-switch.is-locked{cursor:default}
.sp-switch.is-locked input[disabled]+.sp-switch-ui{opacity:1;background:#93b4ef}
.sp-switch.is-locked input[disabled]:checked+.sp-switch-ui{background:#93b4ef}
/* An inline role picker sitting inside a table cell. */
.sp-select-sm select{height:30px;font-size:12px;padding:0 28px 0 10px}
.sp-select-sm .msr{font-size:16px;top:7px;right:7px}
/* Sortable headers on every module, not just sims: the click target should
look like one wherever a screen offers sorting. */
.sp-table th[data-ord-sort],.sp-table th[data-cus-sort],.sp-table th[data-ctv-sort],
.sp-table th[data-com-sort],.sp-table th[data-wal-sort],.sp-table th[data-stk-sort],
.sp-table th[data-log-sort]{cursor:pointer;user-select:none}
.sp-table th[data-ord-sort]:hover,.sp-table th[data-cus-sort]:hover,.sp-table th[data-ctv-sort]:hover,
.sp-table th[data-com-sort]:hover,.sp-table th[data-wal-sort]:hover,.sp-table th[data-stk-sort]:hover,
.sp-table th[data-log-sort]:hover{color:#2563eb}
/* ── Cấu hình / Cài đặt hệ thống ───────────────────────────────────────── */
.sp-cfg-card{margin-bottom:14px;padding-bottom:4px}
.sp-cfg-head{display:flex;align-items:center;gap:11px;padding:15px 20px;border-bottom:1px solid #eef2f8}
.sp-cfg-jump{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 12px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.sp-cfg-jump::-webkit-scrollbar{display:none}
.sp-cfg-jump button{display:inline-flex;align-items:center;gap:6px;flex:none;height:34px;padding:0 14px;border:1px solid #e4eaf3;
border-radius:20px;background:#fff;color:#5b6b83;font:inherit;font-size:13px;font-weight:500;cursor:pointer;white-space:nowrap}
.sp-cfg-jump button:hover{border-color:#c8d8f2;color:#2563eb}
.sp-cfg-jump button.is-active{border-color:#a9caf7;background:#f2f7fe;color:#1d4ed8}
.sp-cfg-jump button .msr{font-size:17px}
.sp-cfg-title{margin:0;font-size:14.5px;font-weight:600;color:#16213a}
.sp-cfg-row{display:flex;align-items:flex-start;gap:20px;padding:15px 20px;border-bottom:1px solid #f2f5fa}
.sp-cfg-row:last-child{border-bottom:0}
.sp-cfg-label{flex:1 1 46%;min-width:0;display:flex;flex-direction:column;gap:3px}
.sp-cfg-label strong{font-size:13.5px;font-weight:600;color:#26314a}
.sp-cfg-label small{font-size:12px;color:#8b9ab0;line-height:1.5}
.sp-cfg-moved{align-self:flex-start;margin-top:3px;padding:1px 7px;border-radius:20px;background:#fff6e6;
color:#a86b12;font-size:11px;font-style:normal;font-weight:600}
.sp-cfg-control{flex:1 1 54%;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.sp-cfg-number{display:inline-flex;align-items:center;gap:7px}
.sp-cfg-number input{width:150px;height:34px;padding:0 12px;border:1px solid #e4eaf3;border-radius:8px;
background:#fff;color:#1a2334;font:inherit;font-size:13px;box-sizing:border-box}
.sp-cfg-number input:focus{outline:none;border-color:#a9caf7;box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.sp-cfg-range{width:100%;font-size:11.5px;color:#98a4b8}
.sp-cfg-row.is-bad .sp-cfg-number input,.sp-cfg-row.is-bad .sp-chips{border-color:#f0c9c9}
.sp-cfg-row.is-bad .sp-cfg-label strong{color:#c02626}
/* A value in a list setting. The count is how many rows still point at it --
the reason the × may be refused. */
.sp-chips{display:flex;flex-wrap:wrap;gap:7px;width:100%}
.sp-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 4px 4px 11px;border:1px solid #e4eaf3;
border-radius:20px;background:#f8fafd;font-size:12.5px;color:#33405a}
.sp-chip.is-used{border-color:#cfe0fb;background:#f2f7fe}
.sp-chip b{padding:1px 6px;border-radius:20px;background:#dce9fd;color:#1d4ed8;font-size:11px;font-weight:600}
.sp-chip button{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;
border:0;border-radius:50%;background:transparent;color:#98a4b8;cursor:pointer}
.sp-chip button:hover{background:#fdeaea;color:#c02626}
.sp-chip button .msr{font-size:15px}
.sp-chip-add{display:flex;gap:7px;width:100%;margin-top:3px}
.sp-chip-add input{flex:1;height:32px;padding:0 12px;border:1px solid #e4eaf3;border-radius:8px;background:#fff;
color:#1a2334;font:inherit;font-size:12.5px;box-sizing:border-box}
.sp-chip-add input:focus{outline:none;border-color:#a9caf7;box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.sp-tiers{display:flex;flex-direction:column;gap:7px;width:100%}
.sp-tier-row{display:flex;align-items:center;gap:7px}
.sp-tier-row input{height:32px;padding:0 11px;border:1px solid #e4eaf3;border-radius:8px;background:#fff;
color:#1a2334;font:inherit;font-size:12.5px;box-sizing:border-box}
.sp-tier-row input:focus{outline:none;border-color:#a9caf7;box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.sp-tier-row [data-cfg-tier-name]{flex:0 0 128px}
.sp-tier-row [data-cfg-tier-floor]{flex:1;min-width:0;text-align:right}
.sp-tier-unit{flex:0 0 auto;font-size:12.5px;color:#8b9ab0}
.sp-sys-cols{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.sp-sys-table td{white-space:normal}
.sp-sys-table tr:last-child td{border-bottom:0}
.sp-btn-danger{border-color:#f2c9c9;color:#c02626;background:#fff}
.sp-btn-danger:hover{background:#fff7f7;border-color:#e8b4b4}
body.simplus-body a.sp-btn-danger{color:#c02626}
.sp-btn-danger .msr{color:#c02626}
@media (max-width:1100px){
.sp-sys-cols{grid-template-columns:1fr}
}
@media (max-width:820px){
.sp-cfg-row{flex-direction:column;gap:10px}
.sp-cfg-label,.sp-cfg-control{flex:1 1 auto;width:100%}
.sp-cfg-number input{width:100%}
.sp-tier-row [data-cfg-tier-name]{flex:1 1 40%}
}
/* ── Tin nhắn: the live inbox ──────────────────────────────────────────── */
/* Ba ô lọc trên một cột hẹp: cho xuống dòng, và giữ đủ rộng để đọc được chữ.
Ép cả ba vào một hàng thì cả ba cùng cụt thành "Mọi", tức là không ô nào
còn nói được nó lọc theo cái gì. */
.sp-msg-filters{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.sp-msg-filters .sp-select{flex:1 1 116px;min-width:116px}
.sp-msg-filters .sp-select select{width:100%}
.sp-filter-sm{height:30px;padding:0 9px;font-size:11.5px;gap:5px;white-space:nowrap}
.sp-filter-sm .msr{font-size:15px}
.sp-msg-threads{flex:1;min-height:0;overflow-y:auto}
.sp-msg-none{padding:34px 20px;text-align:center;color:#8b9ab0;font-size:13px;line-height:1.6}
.sp-thread{align-items:flex-start}
.sp-thread .sp-avatar{margin-top:2px}
.sp-thread-tags{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin-top:6px}
.sp-thread-tags .sp-badge{font-size:10px;padding:1px 7px}
.sp-thread-ref{font-size:10.5px;color:#8b9ab0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp-msg-pane{position:relative}
.sp-msg-blank{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:#a3aebf}
.sp-msg-blank .msr{font-size:44px}
.sp-msg-blank p{margin:0;font-size:13px}
.sp-msg-body{overflow-y:auto;max-height:520px}
/* The bubble carries its own author and time, so a run of replies from two
people stays readable without a separator between every message.
Not pre-wrap: both render paths already turn newlines into