/* ================================================
   Tra Cứu Học Phí v3 – Dark Theme + Mobile Fix
   ================================================ */
:root {
    --bg-dark:    #0d1117;
    --bg-card:    #161b22;
    --bg-input:   #1c2431;
    --border:     #30363d;
    --accent:     #2f81f7;
    --accent-glow:#388bfd33;
    --text-main:  #e6edf3;
    --text-muted: #8b949e;
    --text-sub:   #58a6ff;
    --success:    #3fb950;
    --danger:     #f85149;
    --warning:    #d29922;
    --btn-bg:     #238636;
    --btn-hover:  #2ea043;
    --radius:     10px;
}

.hpxu-wrap {
    background:var(--bg-dark); border:1px solid var(--border);
    border-radius:14px; overflow:hidden;
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    color:var(--text-main); max-width:1160px; margin:0 auto;
}

/* HEADER */
.hpxu-header {
    background:var(--bg-card); border-bottom:1px solid var(--border);
    padding:18px 28px; display:flex; align-items:center;
    justify-content:space-between; flex-wrap:wrap; gap:12px;
}
.hpxu-logo { display:flex; align-items:center; gap:14px; }
.hpxu-logo-icon {
    font-size:32px; background:var(--bg-input); width:52px; height:52px;
    border-radius:12px; border:1px solid var(--border);
    display:flex; align-items:center; justify-content:center;
}
.hpxu-logo-sub   { font-size:10px; letter-spacing:2px; color:var(--text-sub); text-transform:uppercase; }
.hpxu-logo-title { font-size:20px; font-weight:700; letter-spacing:1px; }
.hpxu-status {
    font-size:13px; color:var(--text-muted); border:1px solid var(--border);
    border-radius:20px; padding:6px 16px; display:flex; align-items:center; gap:8px;
}
.hpxu-dot { width:8px; height:8px; background:var(--success); border-radius:50%; box-shadow:0 0 6px var(--success); }

/* BODY */
.hpxu-body { display:grid; grid-template-columns:1fr 285px; min-height:400px; }
.hpxu-main { padding:28px; border-right:1px solid var(--border); }
.hpxu-section-title { font-size:18px; font-weight:700; margin:0 0 4px; }
.hpxu-section-sub   { font-size:12px; color:var(--text-muted); text-transform:uppercase; letter-spacing:1px; margin:0 0 20px; }

/* SEARCH */
.hpxu-search-box { display:flex; gap:10px; margin-bottom:6px; }
.hpxu-search-box input {
    flex:1; background:var(--bg-input); border:1px solid var(--border);
    border-radius:var(--radius); color:var(--text-main); font-size:15px;
    padding:13px 18px; outline:none; transition:border-color .2s,box-shadow .2s;
}
.hpxu-search-box input:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-glow); }
.hpxu-search-box input::placeholder { color:var(--text-muted); }
.hpxu-search-box button {
    background:var(--btn-bg); color:#fff; border:none; border-radius:var(--radius);
    padding:13px 24px; font-size:15px; font-weight:600; cursor:pointer;
    transition:background .2s; white-space:nowrap;
}
.hpxu-search-box button:hover { background:var(--btn-hover); }

/* RESULT HEADER */
.hpxu-result-header {
    display:flex; align-items:center; justify-content:space-between;
    margin:22px 0 14px; font-size:13px; color:var(--text-muted);
}
.hpxu-btn-clear {
    background:none; border:1px solid var(--border); color:var(--text-muted);
    border-radius:6px; padding:4px 12px; font-size:12px; cursor:pointer;
}
.hpxu-btn-clear:hover { border-color:var(--danger); color:var(--danger); }

/* CARD */
.hpxu-cards-list { display:flex; flex-direction:column; gap:16px; }
.hpxu-result-card {
    background:var(--bg-card); border:1px solid var(--border);
    border-radius:12px; overflow:hidden; transition:border-color .2s;
}
.hpxu-result-card:hover { border-color:var(--accent); }
.hpxu-rc-header {
    background:var(--bg-input); padding:14px 20px;
    display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px;
    border-bottom:1px solid var(--border);
}
.hpxu-rc-name { font-size:17px; font-weight:700; }
.hpxu-rc-meta { font-size:12px; color:var(--text-muted); margin-top:3px; }
.hpxu-badge { font-size:12px; font-weight:600; padding:4px 14px; border-radius:20px; }
.hpxu-badge.paid   { background:#1a3a2a; color:var(--success); }
.hpxu-badge.unpaid { background:#3d1a1a; color:var(--danger);  }
.hpxu-rc-body { padding:18px 20px; }

/* DESKTOP: Bảng 7 cột */
.hpxu-detail-table {
    width:100%; border-collapse:collapse; font-size:12.5px; margin-bottom:16px;
    border:1px solid var(--border); border-radius:8px; overflow:hidden;
}
.hpxu-detail-table thead tr { background:var(--bg-input); }
.hpxu-detail-table th {
    padding:9px 12px; text-align:center; font-size:11px; font-weight:600;
    letter-spacing:.5px; color:var(--text-muted); border-bottom:1px solid var(--border);
    border-right:1px solid var(--border); white-space:nowrap;
}
.hpxu-detail-table th:last-child { border-right:none; }
.hpxu-detail-table td {
    padding:10px 12px; text-align:center; font-size:13px; font-weight:500;
    color:var(--text-main); border-right:1px solid var(--border);
}
.hpxu-detail-table td:last-child { border-right:none; }
.hpxu-detail-table tbody tr:hover td { background:rgba(47,129,247,.05); }

/* MOBILE: Grid thay bảng — mặc định ẩn */
.hpxu-detail-mobile { display:none; }

.val-green { color:var(--success) !important; }
.val-red   { color:var(--danger)  !important; }

/* BỘ 3 TỔNG */
.hpxu-money-row { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; margin-bottom:16px; }
.hpxu-money-box {
    background:var(--bg-dark); border:1px solid var(--border);
    border-radius:8px; padding:14px 16px; text-align:center;
}
.hpxu-info-label { font-size:10px; text-transform:uppercase; letter-spacing:1px; color:var(--text-muted); margin-bottom:6px; }
.hpxu-money-val  { font-size:15px; font-weight:700; }
.hpxu-money-box.total .hpxu-money-val { color:var(--text-sub); }
.hpxu-money-box.paid  .hpxu-money-val { color:var(--success);  }
.hpxu-money-box.left  .hpxu-money-val { color:var(--danger);   }

/* THANH TIẾN TRÌNH */
.hpxu-progress-label {
    display:flex; justify-content:space-between;
    font-size:11px; color:var(--text-muted); margin-bottom:6px;
}
.hpxu-progress-bar {
    background:var(--bg-dark); border-radius:4px; height:8px;
    border:1px solid var(--border); overflow:hidden;
}
.hpxu-progress-fill {
    height:100%; border-radius:4px; transition:width .6s ease;
    background:linear-gradient(90deg, var(--success), #2ea043);
}
.hpxu-progress-fill.danger { background:linear-gradient(90deg,#f85149,#da3633); }

/* EMPTY / LOADING */
.hpxu-empty, .hpxu-loading { text-align:center; padding:48px 20px; color:var(--text-muted); }
.hpxu-empty span { font-size:40px; display:block; margin-bottom:12px; }
.hpxu-empty p    { line-height:1.7; font-size:14px; }
.hpxu-spinner {
    display:inline-block; width:18px; height:18px;
    border:2px solid var(--border); border-top-color:var(--accent);
    border-radius:50%; animation:hpxu-spin .7s linear infinite;
    margin-right:8px; vertical-align:middle;
}
@keyframes hpxu-spin { to { transform:rotate(360deg); } }

/* SIDEBAR */
.hpxu-sidebar { padding:22px 18px; background:var(--bg-card); display:flex; flex-direction:column; gap:14px; }
.hpxu-sidebar-card { border:1px solid var(--border); border-radius:var(--radius); padding:16px; background:var(--bg-dark); }
.hpxu-sidebar-card.hpxu-note { border-color:#3d2b00; }
.hpxu-sidebar-card.hpxu-bank { border-color:#1f3a5f; }
.hpxu-sidebar-icon { font-size:20px; margin-bottom:8px; }
.hpxu-sidebar-card h3 { font-size:13px; font-weight:700; color:var(--text-main); margin:0 0 10px; }
.hpxu-sidebar-card ul { margin:0; padding:0 0 0 16px; color:var(--text-muted); font-size:13px; line-height:1.9; }
.hpxu-sidebar-card p  { color:var(--text-muted); font-size:13px; margin:0; line-height:1.7; }
.hpxu-sidebar-card kbd { background:var(--bg-input); border:1px solid var(--border); border-radius:4px; padding:1px 6px; font-size:11px; font-family:monospace; }
.hpxu-bank-info { display:flex; flex-direction:column; gap:8px; }
.hpxu-bank-row  { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.hpxu-bank-noidung { display:flex; flex-direction:column; gap:4px; padding-top:8px; border-top:1px solid var(--border); }
.hpxu-bank-label { font-size:10px; text-transform:uppercase; letter-spacing:.8px; color:var(--text-muted); flex-shrink:0; }
.hpxu-bank-val   { font-size:12px; font-weight:600; color:var(--text-main); text-align:right; }
.hpxu-stk        { font-size:16px; color:var(--text-sub); letter-spacing:1px; }
.hpxu-noidung    { font-size:11px; color:var(--text-muted); line-height:1.5; margin-top:2px; }

/* ══════════════════════════════════════════
   MOBILE – dưới 768px
   ══════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Layout */
    .hpxu-wrap   { border-radius:10px; }
    .hpxu-header { padding:14px 16px; }
    .hpxu-body   { grid-template-columns:1fr; }
    .hpxu-main   { padding:16px; border-right:none; border-bottom:1px solid var(--border); }
    .hpxu-sidebar{ padding:16px; }
    .hpxu-logo-title { font-size:15px; }
    .hpxu-logo-icon  { width:42px; height:42px; font-size:24px; }

    /* Search */
    .hpxu-search-box        { flex-direction:column; }
    .hpxu-search-box input  { font-size:16px; }
    .hpxu-search-box button { width:100%; padding:14px; font-size:15px; }

    /* Card */
    .hpxu-rc-header { padding:12px 14px; }
    .hpxu-rc-name   { font-size:15px; }
    .hpxu-rc-meta   { font-size:11px; }
    .hpxu-rc-body   { padding:14px; }

    /* ẨN bảng desktop */
    .hpxu-detail-table { display:none !important; }

    /* HIỆN grid mobile */
    .hpxu-detail-mobile {
        display:grid !important;
        grid-template-columns:1fr 1fr;
        gap:10px;
        margin-bottom:16px;
    }
    .hpxu-m-item { }
    .hpxu-m-label {
        font-size:10px; text-transform:uppercase; letter-spacing:.7px;
        color:var(--text-muted); margin-bottom:3px;
    }
    .hpxu-m-value { font-size:13px; font-weight:600; color:var(--text-main); }

    /* Bộ 3 tiền → dọc */
    .hpxu-money-row { grid-template-columns:1fr; gap:8px; }
    .hpxu-money-box { padding:12px 14px; display:flex; align-items:center; justify-content:space-between; text-align:left; }
    .hpxu-money-box .hpxu-info-label { margin-bottom:0; }
    .hpxu-money-val { font-size:14px; }
}