/* RyuProxy — chỉnh nhỏ trên nền template (assets/css/style.css + app.css). Không sửa tệp template, sửa ở đây. */

:root { --ryu-do: #e5483b; }

/* Màu chính = đỏ của trang landing (thay xanh của template). */
:root, [data-color], [data-bs-theme] {
    --primary: #e5483b; --primary-hover: #c93a2e; --primary-rgb: 229, 72, 59;
    --primary-transparent: #fdecea;
    --bs-primary: #e5483b; --bs-primary-rgb: 229, 72, 59;
    --bs-link-color: #e5483b; --bs-link-hover-color: #c93a2e; --bs-link-color-rgb: 229, 72, 59;
}
[data-bs-theme=dark] { --primary-transparent: #3a1d1b; }
a { color: var(--primary); }
a:hover { color: var(--primary-hover); }


/* Không bao giờ cuộn ngang cả trang trên điện thoại: bảng tự cuộn trong khung của nó. */
html, body { overflow-x: hidden; }
body { background-color: var(--body-bg, #f5f6f8); }

/* ---------- logo chữ ---------- */
.ryu-logo { font-weight: 800; font-size: 22px; letter-spacing: -.3px; color: var(--heading-color, #111827) !important; text-decoration: none; line-height: 1; }
.ryu-logo b { color: var(--ryu-do); font-weight: 800; }
.sidebar .sidebar-logo .ryu-logo { line-height: var(--topbar-height, 57px); vertical-align: middle; }
.sidebar .sidebar-logo .ryu-logo-nho { line-height: 34px; margin-top: calc((var(--topbar-height, 57px) - 34px) / 2); }
.sidebar .sidebar-logo .ryu-logo-nho {
    width: 34px; height: 34px; border-radius: 8px; background: var(--ryu-do); color: #fff !important;
    text-align: center; line-height: 34px; font-size: 18px;
}
[data-bs-theme=dark] .ryu-logo { color: #fff !important; }
.ryu-logo-modal { font-size: 26px; }

/* ---------- ví trong sidebar ---------- */
.ryu-vi { padding: 16px 16px 4px; }
.ryu-vi-the {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    background: var(--light, #f3f4f6); border: 1px solid var(--border-color, #e5e7eb); border-radius: 10px; padding: 12px 14px;
}
.ryu-vi-nhan { font-size: 13px; color: var(--body-color, #374151); }
.ryu-vi-so { font-size: 22px; font-weight: 800; color: var(--ryu-do); line-height: 1.2; word-break: break-all; }
.ryu-vi-giam { font-size: 12px; color: #16a34a; font-weight: 600; }
.ryu-vi-icon {
    flex-shrink: 0; width: 42px; height: 42px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
    background: rgba(229, 72, 59, .12); color: var(--ryu-do); font-size: 22px;
}
.mini-sidebar:not(.expand-menu) .ryu-vi { display: none; }

/* ---------- thanh đầu trang ---------- */
.ryu-ten-top { max-width: 180px; font-size: 14px; font-weight: 600; }
.ryu-nut-tk { border: 1px solid var(--border-color, #e5e7eb); }

/* ---------- mua proxy ---------- */
.ryu-nhan-sp {
    height: 100%; min-height: 120px; border: 1px solid var(--border-color, #e5e7eb); border-left: 4px solid #ee0033; border-radius: 10px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 16px;
}
.ryu-nhan-sp-chu { font-size: 28px; font-weight: 800; letter-spacing: 2px; color: #ee0033; line-height: 1; }
.ryu-nhan-sp-phu { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--secondary, #64748b); }
.ryu-goi-y { font-size: 12px; margin-top: 4px; }
.ryu-thanh-gia {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    border-top: 1px dashed var(--border-color, #e5e7eb); padding-top: 12px;
}
.ryu-gia { font-size: 20px; font-weight: 800; color: var(--ryu-do); }
.ryu-gia s { font-size: 14px; font-weight: 500; }
.ryu-gia-dv { font-size: 13px; }
.ryu-diem { list-style: none; padding: 0; display: grid; gap: 8px; }
.ryu-diem li { display: flex; gap: 8px; align-items: flex-start; }
.ryu-diem li i { margin-top: 2px; }

/* ---------- bảng ---------- */
.ryu-bang { font-size: 13px; }
.ryu-bang code { font-size: 12px; }
.ryu-nho { font-size: 11px; }
.ryu-ghi-chu { min-width: 160px; }
.table-responsive { overflow-y: visible; }
.ryu-kv { border: 1px solid var(--border-color, #e5e7eb); border-radius: 10px; overflow: hidden; }
.ryu-kv-dong { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 14px; font-size: 14px; }
.ryu-kv-dong + .ryu-kv-dong { border-top: 1px solid var(--border-color, #e5e7eb); }
.ryu-kv-dong > span { color: var(--secondary, #64748b); }
.ryu-kv-dong > b { text-align: right; word-break: break-word; }
.ryu-noi-dung { background: #fff7e6; }
.ryu-noi-dung #nh-nd { color: var(--ryu-do); font-size: 17px; }
.ryu-qr { max-width: 100%; height: auto; border: 1px solid var(--border-color, #e5e7eb); border-radius: 10px; }

/* Dropdown "Thao tác" trong bảng cuộn ngang: không để bị cắt mất. */
.ryu-bang .dropdown-menu { font-size: 13px; }

/* ---------- hỗ trợ ---------- */
.ryu-ho-tro {
    display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 10px; color: inherit; text-decoration: none;
}
.ryu-ho-tro:hover { border-color: var(--primary); }
.ryu-ho-tro > i { font-size: 26px; color: var(--primary); }

/* ---------- điện thoại ---------- */
@media (max-width: 575.98px) {
    .ryu-thanh-gia .btn { width: 100%; }
    .navbar-header .page-title-wrap h5 { font-size: 16px !important; }
    #ryu-nut-dang-nhap-top { padding: .25rem .5rem; }
    #khoa-form-tao { width: 100%; }
    #khoa-form-tao input { flex: 1 1 auto; width: auto !important; min-width: 0; }
}
.ryu-noi-dung #nh-nd a { font-size: 14px; font-weight: 600; }