/* utilities.css — DataNRO + Tính toán NRO — single source, prefix util-* */
.util-page{color:var(--text-primary)}
.util-hero{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}
.util-hero-left{display:flex;align-items:center;gap:14px;min-width:0}
.util-eyebrow{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin:0 0 4px}
.util-title{font-family:var(--font-display);font-size:26px;font-weight:800;line-height:1.2;color:var(--text-primary);margin:0}
.util-sub{color:var(--text-secondary);font-size:13px;margin:4px 0 0;max-width:62ch}
.util-hero-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.util-hero-actions .btn{border-radius:999px;font-weight:700}
.btn-back-circle{background:var(--bg-surface)!important;border:1px solid var(--border-default)!important;color:var(--text-primary)!important;width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;transition:all .2s ease;flex:0 0 42px}
.btn-back-circle:hover{background:var(--bg-surface2)!important;color:var(--accent)!important;border-color:var(--accent)!important;transform:scale(1.05)}

/* index feature cards */
.util-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media(max-width:991px){.util-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:767px){.util-grid{grid-template-columns:1fr}}
.util-card{position:relative;background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:16px;overflow:hidden;box-shadow:0 4px 18px rgba(15,23,42,.05);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;display:flex;flex-direction:column}
.util-card:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(15,23,42,.10);border-color:var(--border-default)}
.util-card__topbar{height:3px;width:100%;background:linear-gradient(90deg,var(--accent),#38bdf8)}
.util-card--amber .util-card__topbar{background:linear-gradient(90deg,#f59e0b,#fbbf24)}
.util-card__body{padding:18px 18px 16px;display:flex;flex-direction:column;gap:12px;flex:1}
.util-card__head{display:flex;align-items:center;gap:14px}
.util-icon{width:48px;height:48px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 48px;font-size:22px;border:1px solid var(--border-subtle)}
.util-icon--blue{background:var(--accent-dim);color:var(--accent);border-color:var(--accent-border)}
.util-icon--amber{background:var(--warning-dim);color:var(--warning);border-color:rgba(183,121,31,.22)}
.util-card__title{font-size:17px;font-weight:800;color:var(--text-primary);margin:0;line-height:1.25}
.util-card__desc{color:var(--text-secondary);font-size:13px;line-height:1.6;margin:0;min-height:44px}
.util-meta{display:flex;flex-wrap:wrap;gap:6px}
.util-pill{font-size:11px;font-weight:700;padding:4px 8px;border-radius:999px;border:1px solid var(--border-subtle);background:var(--bg-surface2);color:var(--text-secondary)}
.util-pill--live{background:rgba(31,157,85,.10);border-color:rgba(31,157,85,.18);color:var(--success)}
.util-card__cta{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:10px;border-top:1px dashed var(--border-subtle)}
.util-card__cta .btn{border-radius:999px;font-weight:800;padding:8px 16px}
.util-card--dashed{background:var(--bg-surface2);border-style:dashed;align-items:center;justify-content:center;text-align:center;min-height:220px}
.util-card--dashed .util-icon{width:56px;height:56px;border-radius:18px;background:var(--bg-surface);color:var(--text-muted)}
.util-cta-sub{font-size:12px;color:var(--text-muted)}

/* datanro — filter bar + stat */
.util-filter-bar{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:16px;padding:16px;box-shadow:0 4px 18px rgba(15,23,42,.04)}
.util-filter-bar .form-label{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);margin-bottom:6px}
.util-filter-bar .form-select,.util-filter-bar .form-control{min-height:42px;border-radius:10px;border-color:var(--border-default);background:var(--bg-surface);color:var(--text-primary)}
.util-filter-bar .form-select:focus,.util-filter-bar .form-control:focus{border-color:var(--accent-border);box-shadow:0 0 0 3px var(--accent-dim)}
.util-filter-bar .btn-primary{min-height:42px;border-radius:10px;font-weight:800}
.util-stat-row{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0;align-items:center}
.util-stat-row .util-pill strong{color:var(--text-primary)}
.util-search{position:relative}
.util-search .form-control{min-height:44px;border-radius:12px;padding-left:40px;background:var(--bg-surface);border-color:var(--border-default)}
.util-search .form-control::placeholder{color:var(--text-muted)}
.util-search__icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text-muted);pointer-events:none}
.util-search__clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:999px;border:0;background:var(--bg-surface2);color:var(--text-muted);display:inline-flex;align-items:center;justify-content:center}
.util-search__clear:hover{background:var(--border-subtle);color:var(--text-primary)}
.util-grid-wrap{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:16px;overflow:hidden;box-shadow:0 4px 18px rgba(15,23,42,.04)}
.util-grid-wrap .table{margin:0}
.util-grid-wrap .table thead th{background:var(--bg-surface2)!important;color:var(--text-muted)!important;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;border-bottom:1px solid var(--border-subtle)!important;padding:12px 16px;white-space:nowrap}
.util-grid-wrap .table tbody td{padding:12px 16px;vertical-align:middle;border-bottom:1px solid var(--border-subtle);color:var(--text-primary);font-size:13px}
.util-grid-wrap .table tbody tr:hover{--bs-table-hover-bg:var(--bg-surface2)}
.util-thumb{width:32px;height:32px;border-radius:8px;overflow:hidden;background:var(--bg-surface2);border:1px solid var(--border-subtle);display:inline-flex;align-items:center;justify-content:center;object-fit:contain}
.util-clamp2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13px;line-height:1.5;color:var(--text-secondary)}
.util-badge{font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:4px 8px;border-radius:999px;border:1px solid var(--border-subtle);background:var(--bg-surface2);color:var(--text-secondary)}
.util-skeleton{height:14px;border-radius:999px;background:linear-gradient(90deg,var(--bg-surface2),var(--border-subtle),var(--bg-surface2));background-size:200% 100%;animation:util-shimmer 1.2s infinite}
@keyframes util-shimmer{0%{background-position:0 0}100%{background-position:200% 0}}
.util-pagination{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:16px}
.util-pagination .btn{width:34px;height:34px;padding:0;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-weight:700;border:1px solid var(--border-subtle);background:var(--bg-surface);color:var(--text-primary)}
.util-pagination .btn.active,.util-pagination .btn.btn-primary{width:auto;min-width:34px;padding:0 10px;background:var(--accent);border-color:var(--accent);color:#fff}
.util-empty{padding:28px 16px;text-align:center;color:var(--text-secondary)}
.util-empty__icon{width:52px;height:52px;border-radius:14px;background:var(--accent-dim);color:var(--accent);display:inline-flex;align-items:center;justify-content:center;margin:0 auto 10px;font-size:22px}

/* calculator — segmented + form/result */
.util-segmented{display:inline-flex;gap:4px;background:var(--bg-surface2);border:1px solid var(--border-subtle);border-radius:999px;padding:4px}
.util-segmented .nav-link{border-radius:999px;padding:8px 14px;font-weight:800;font-size:13px;color:var(--text-secondary);border:1px solid transparent;background:transparent;transition:all .18s ease;white-space:nowrap}
.util-segmented .nav-link:hover{background:var(--bg-surface);color:var(--text-primary);border-color:var(--border-subtle)}
.util-segmented .nav-link.active{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 6px 16px var(--accent-dim)}
.util-form-card,.util-result-card{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:16px;box-shadow:0 4px 18px rgba(15,23,42,.04)}
.util-result-card{background:var(--bg-surface2)}
.util-chip{font-size:11px;font-weight:700;padding:6px 10px;border-radius:999px;border:1px solid var(--border-default);background:var(--bg-surface);color:var(--text-secondary);transition:all .16s ease}
.util-chip:hover{background:var(--accent-dim);border-color:var(--accent);color:var(--accent);transform:translateY(-1px)}
.util-kpi{font-size:28px;font-weight:800;letter-spacing:-.02em;color:var(--accent)}
.util-kpi--gold{color:#b7791f}
[data-theme="dark"] .util-kpi--gold{color:#fbbf24}
.util-result-box{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:12px;padding:14px}
.util-subcard{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:12px;padding:12px;text-align:center}
.util-bar-desc{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:12px;border:1px solid var(--border-subtle);background:var(--bg-surface);margin-top:10px}
.util-toast-anim{animation:util-pop .22s ease}
@keyframes util-pop{0%{transform:scale(.98)}100%{transform:scale(1)}}
.util-input .form-control,.util-input .form-select{min-height:44px;border-radius:10px}
.util-input .input-group-text{min-height:44px;border-radius:10px 0 0 10px;background:var(--bg-surface2);border-color:var(--border-default);color:var(--text-secondary);font-weight:700}
.status-gain{border:1px solid rgba(31,157,85,.28)!important;background:var(--success-dim)!important}
.status-loss{border:1px solid rgba(220,38,38,.22)!important;background:var(--danger-dim)!important}
.status-neutral{border:1px solid var(--border-subtle)!important;background:var(--bg-surface)!important}
.btn-premium-action{background:linear-gradient(135deg,var(--accent),var(--accent-hover));border:0;color:#fff;font-weight:800;border-radius:12px;box-shadow:0 8px 18px var(--accent-dim);transition:transform .16s ease,box-shadow .16s ease}
.btn-premium-action:hover{background:linear-gradient(135deg,var(--accent-hover),#4092ff);transform:translateY(-1px);box-shadow:0 10px 22px var(--accent-dim);color:#fff}
[data-theme="dark"] .btn-premium-action{color:#12263a}
[data-theme="dark"] .util-card--amber .util-card__topbar{background:linear-gradient(90deg,#d97706,#f59e0b)}
[data-theme="dark"] .util-filter-bar,[data-theme="dark"] .util-grid-wrap,[data-theme="dark"] .util-form-card{background:var(--bg-surface)!important}
[data-theme="dark"] .util-result-card{background:var(--bg-surface2)!important}
[data-theme="dark"] .util-card{background:var(--bg-surface)!important}
[data-theme="dark"] .util-card--dashed{background:var(--bg-surface2)!important;border-color:var(--border-subtle)!important}
@media(max-width:767px){.util-title{font-size:22px}.util-segmented{width:100%;overflow:auto;flex-wrap:nowrap}.util-segmented .nav-link{flex:1 0 auto}.util-result-card{position:static!important;top:auto!important}}