/* ===================================================================
   RMon Admin - Design System (phong cách MISA EMIS: sáng, mềm, cân đối)
   =================================================================== */
:root {
    --rmon-primary: #2BA3B0;          /* TEAL thương hiệu RMon (logo #4AB0BC, đậm hơn cho UI) */
    --rmon-primary-dark: #1C8C99;
    --rmon-brand: #4AB0BC;            /* màu nền logo gốc */
    --rmon-primary-soft: #E2F3F5;     /* nền nhạt cho mục active */
    --rmon-bg: #EEF1F5;
    --rmon-card: #FFFFFF;
    --rmon-text: #1B2733;             /* chữ đậm hơn → rõ nét */
    --rmon-muted: #677183;            /* muted đậm hơn cho dễ đọc */
    --rmon-border: #DDE2E9;           /* viền rõ hơn */
    --rmon-border-strong: #C7CEDA;    /* viền đậm (đường kẻ chính) */
    --rmon-radius: 14px;
    --rmon-radius-sm: 9px;
    --rmon-shadow: 0 1px 2px rgba(16,24,40,.05), 0 2px 6px rgba(16,24,40,.07);
    --rmon-shadow-hover: 0 8px 24px rgba(16,24,40,.13);

    /* Icon badge pastel */
    --ic-green-bg:#E2F3F5; --ic-green-fg:#1C8C99;   /* "green" = teal chủ đạo */
    --ic-blue-bg:#E8F1FE;  --ic-blue-fg:#3B82F6;
    --ic-orange-bg:#FFF2E2;--ic-orange-fg:#F59E0B;
    --ic-pink-bg:#FDE9EF;  --ic-pink-fg:#EC4899;
    --ic-red-bg:#FDECEC;   --ic-red-fg:#EF4444;
    --ic-purple-bg:#EFEAFE;--ic-purple-fg:#8B5CF6;
}

* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: "Be Vietnam Pro", "Segoe UI", system-ui, -apple-system, sans-serif;
    background: var(--rmon-bg);
    color: var(--rmon-text);
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; }

/* ===== Shell ===== */
.rmon-shell { display: flex; min-height: 100vh; }
.rmon-sidebar {
    width: 252px; background: var(--rmon-card); flex-shrink: 0;
    display: flex; flex-direction: column; border-right: 1px solid var(--rmon-border);
    position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.rmon-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }

/* ===== Brand ===== */
.rmon-brand { display: flex; align-items: center; gap: 11px; padding: 18px 20px; border-bottom: 1px solid var(--rmon-border); }
.rmon-logo {
    width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0; overflow: hidden;
    background: var(--rmon-brand);
    color: #fff; font-weight: 800; font-size: 20px; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 10px rgba(74,176,188,.35);
}
.rmon-logo img { width: 100%; height: 100%; object-fit: cover; }
.rmon-brand-name { font-weight: 800; font-size: 18px; letter-spacing: .2px; }
.rmon-brand-sub { font-size: 11px; color: var(--rmon-muted); margin-top: -2px; }

/* ===== Nav ===== */
.rmon-nav { padding: 8px 12px 24px; }
.rmon-nav a {
    position: relative; display: flex; align-items: center; gap: 11px; padding: 9px 12px 9px 14px; margin: 2px 0;
    color: #51606E; font-size: 14px; font-weight: 500; border-radius: var(--rmon-radius-sm); transition: all .12s;
}
.rmon-nav a .ic { width: 20px; text-align: center; font-size: 16px; opacity: .85; transition: transform .12s; }
.rmon-nav a:hover { background: var(--rmon-bg); color: var(--rmon-text); }
.rmon-nav a:hover .ic { transform: scale(1.12); opacity: 1; }
/* mục đang chọn: nền teal nhạt + thanh nhấn trái + chữ đậm */
.rmon-nav a.active {
    background: var(--rmon-primary-soft); color: var(--rmon-primary-dark); font-weight: 700;
    box-shadow: inset 0 0 0 1px rgba(43,163,176,.18);
}
.rmon-nav a.active::before {
    content: ""; position: absolute; left: -12px; top: 7px; bottom: 7px; width: 4px;
    border-radius: 0 4px 4px 0; background: var(--rmon-primary);
}
.rmon-nav a.active .ic { opacity: 1; }
.rmon-nav a.disabled { opacity: .45; pointer-events: none; }
.rmon-nav-group { padding: 16px 12px 6px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .7px; color: #9AA3B0; }

/* ===== Nav cấp 2 (accordion) ===== */
.rmon-nav a.solo { margin-top: 2px; }
.rmon-grp { margin: 1px 0; }
.rmon-grp-head {
    width: 100%; display: flex; align-items: center; gap: 11px; padding: 9px 12px 9px 14px;
    background: none; border: 0; cursor: pointer; border-radius: var(--rmon-radius-sm);
    color: #51606E; font-size: 14px; font-weight: 600; font-family: inherit; text-align: left; transition: all .12s;
}
.rmon-grp-head .ic { width: 20px; text-align: center; font-size: 16px; opacity: .85; }
.rmon-grp-head .gt { flex: 1; }
.rmon-grp-head .chev { font-size: 11px; color: #9AA3B0; transition: transform .18s; }
.rmon-grp-head:hover { background: var(--rmon-bg); color: var(--rmon-text); }
.rmon-grp.open > .rmon-grp-head { color: var(--rmon-text); }
.rmon-grp.open > .rmon-grp-head .chev { transform: rotate(90deg); color: var(--rmon-primary); }
/* thân nhóm: trượt mở */
.rmon-grp-body { max-height: 0; overflow: hidden; transition: max-height .22s ease; padding-left: 12px; }
.rmon-grp.open > .rmon-grp-body { max-height: 720px; }
.rmon-grp-body a { font-size: 13.5px; padding-top: 8px; padding-bottom: 8px; }
.rmon-grp-body a.active::before { display: none; }
/* gạch nối dọc nhẹ cho nhóm con */
.rmon-grp-body { border-left: 1px dashed var(--rmon-border); margin-left: 18px; }

/* ===== Cụm nút thao tác trong bảng (đồng đều, không xuống dòng) ===== */
.rmon-actions { display: flex; gap: 6px; align-items: center; flex-wrap: nowrap; }
.rmon-actions form { margin: 0; display: inline-flex; }
.rmon-actions .btn { height: 30px; display: inline-flex; align-items: center; justify-content: center; line-height: 1; white-space: nowrap; padding: 0 10px; }
.rmon-actions .btn-ico { width: 34px; padding: 0; font-size: 14px; }

/* ===== Sub-nav (tab trong trang) ===== */
.rmon-subnav { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 1px solid var(--rmon-border); }
.rmon-subnav a {
    padding: 8px 14px; font-size: 13.5px; font-weight: 600; color: #51606E; text-decoration: none;
    border-radius: var(--rmon-radius-sm) var(--rmon-radius-sm) 0 0; border: 1px solid transparent; border-bottom: 0; margin-bottom: -1px;
}
.rmon-subnav a:hover { background: var(--rmon-bg); color: var(--rmon-text); }
.rmon-subnav a.active { background: var(--rmon-card); color: var(--rmon-primary-dark); border-color: var(--rmon-border); border-bottom: 2px solid var(--rmon-primary); }

/* ===== Topbar ===== */
.rmon-topbar {
    min-height: 64px; background: var(--rmon-card); border-bottom: 1px solid var(--rmon-border);
    display: flex; align-items: center; justify-content: space-between; padding: 10px 28px; gap: 16px;
    position: sticky; top: 0; z-index: 10; overflow: hidden;
}
.rmon-topbar-deco { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); height: 56px; width: 340px; pointer-events: none; opacity: .85; }
.rmon-topbar > div, .rmon-topbar .rmon-user { position: relative; z-index: 1; }
@media (max-width: 920px) { .rmon-topbar-deco { display: none; } }
.rmon-greet-title { font-size: 17px; font-weight: 700; line-height: 1.2; }
.rmon-greet-sub { font-size: 12px; color: var(--rmon-muted); }
.rmon-user { display: flex; align-items: center; gap: 14px; }
.rmon-user-chip { display: flex; align-items: center; gap: 9px; }
.rmon-avatar {
    width: 36px; height: 36px; border-radius: 50%; background: var(--rmon-primary-soft); color: var(--rmon-primary-dark);
    display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px;
}
.rmon-user-name { font-weight: 600; font-size: 14px; }
.rmon-user-role { font-size: 12px; color: var(--rmon-muted); }

/* ===== Content ===== */
.rmon-content { padding: 24px 28px; }
.rmon-page-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; gap: 12px; flex-wrap: wrap; }
.rmon-page-head h1 { font-size: 20px; font-weight: 700; margin: 0; }
.rmon-page-head .sub { color: var(--rmon-muted); font-size: 13px; }

/* ===== Card / Panel ===== */
.rmon-card {
    background: var(--rmon-card); border: 1px solid var(--rmon-border);
    border-radius: var(--rmon-radius); padding: 22px; margin-bottom: 18px; box-shadow: var(--rmon-shadow);
}
.rmon-card h2 { font-size: 15.5px; font-weight: 800; margin: 0 0 16px; letter-spacing: -.1px; }

/* Tiêu đề thẻ có icon + đường kẻ dưới (điểm nhấn rõ) */
.rmon-card-title { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 800; letter-spacing: -.1px;
    padding-bottom: 13px; margin: -2px 0 18px; border-bottom: 1px solid var(--rmon-border); }
.rmon-card-title .ic { font-size: 18px; }
.rmon-card-title .sub { font-weight: 500; font-size: 12.5px; color: var(--rmon-muted); margin-left: auto; }

/* Tiêu đề mục nhỏ trong thẻ (gọn, có thanh nhấn bên trái) */
.rmon-card h3 { font-size: 13.5px; font-weight: 700; color: var(--rmon-text); margin: 22px 0 12px;
    padding-left: 11px; border-left: 3px solid var(--rmon-primary); line-height: 1.15; }
.rmon-card h3:first-child { margin-top: 0; }
.rmon-panel { background: var(--rmon-card); border: 1px solid var(--rmon-border); border-radius: var(--rmon-radius); box-shadow: var(--rmon-shadow); margin-bottom: 20px; overflow: hidden; }
.rmon-panel-head { display: flex; align-items: center; gap: 9px; padding: 16px 18px; border-bottom: 1px solid var(--rmon-border); font-weight: 700; font-size: 15px; }
.rmon-panel-body { padding: 8px 18px 14px; }

/* ===== Icon badge ===== */
.rmon-ic { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,.04); }
.rmon-ic.sm { width: 40px; height: 40px; border-radius: 11px; font-size: 19px; }
.ic-green { background: var(--ic-green-bg); color: var(--ic-green-fg); }
.ic-blue { background: var(--ic-blue-bg); color: var(--ic-blue-fg); }
.ic-orange { background: var(--ic-orange-bg); color: var(--ic-orange-fg); }
.ic-pink { background: var(--ic-pink-bg); color: var(--ic-pink-fg); }
.ic-red { background: var(--ic-red-bg); color: var(--ic-red-fg); }
.ic-purple { background: var(--ic-purple-bg); color: var(--ic-purple-fg); }

/* ===== Stat cards ===== */
.rmon-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin-bottom: 20px; }
.rmon-stat {
    background: var(--rmon-card); border: 1px solid var(--rmon-border); border-radius: var(--rmon-radius);
    padding: 18px 20px; box-shadow: var(--rmon-shadow); display: flex; align-items: center; gap: 16px; transition: box-shadow .15s, transform .15s, border-color .15s;
}
.rmon-stat:hover { box-shadow: var(--rmon-shadow-hover); transform: translateY(-2px); border-color: #C7CEDA; }
.rmon-stat .num { font-size: 27px; font-weight: 800; line-height: 1.1; letter-spacing: -.5px; }
.rmon-stat .num small { font-size: 15px; font-weight: 600; color: var(--rmon-muted); }
.rmon-stat .lbl { font-size: 13px; color: var(--rmon-muted); margin-top: 2px; }

/* ===== Info row (list trong panel) ===== */
.rmon-info-row { display: flex; align-items: center; gap: 13px; padding: 11px 0; border-bottom: 1px solid var(--rmon-border); }
.rmon-info-row:last-child { border-bottom: none; }
.rmon-info-row .txt { flex: 1; min-width: 0; }
.rmon-info-row .t1 { font-weight: 600; font-size: 14px; }
.rmon-info-row .t2 { font-size: 12.5px; color: var(--rmon-muted); }
.rmon-go { width: 30px; height: 30px; border-radius: 9px; background: var(--rmon-primary-soft); color: var(--rmon-primary-dark);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all .12s; }
a.rmon-go:hover { background: var(--rmon-primary); color: #fff; }

/* ===== Grid helpers ===== */
.rmon-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.rmon-grid-3 { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 1100px) { .rmon-grid-2, .rmon-grid-3 { grid-template-columns: 1fr; } }

/* ===== Buttons ===== */
.btn-rmon { background: var(--rmon-primary); border: 1px solid var(--rmon-primary); color: #fff; font-weight: 700; border-radius: var(--rmon-radius-sm); padding: 9px 18px; transition: all .12s; box-shadow: 0 2px 6px rgba(43,163,176,.28); }
.btn-rmon:hover { background: var(--rmon-primary-dark); border-color: var(--rmon-primary-dark); color: #fff; box-shadow: 0 4px 12px rgba(43,163,176,.34); }
.btn-rmon-soft { background: var(--rmon-primary-soft); border: 1px solid #BCE6CE; color: var(--rmon-primary-dark); font-weight: 700; border-radius: var(--rmon-radius-sm); padding: 8px 16px; }
.btn-rmon-soft:hover { background: #d3f0e0; color: var(--rmon-primary-dark); }
.btn-outline-rmon { background: #fff; border: 1px solid var(--rmon-border-strong); color: var(--rmon-text); font-weight: 600; border-radius: var(--rmon-radius-sm); padding: 8px 16px; }
.btn-outline-rmon:hover { border-color: var(--rmon-primary); color: var(--rmon-primary-dark); background: var(--rmon-primary-soft); }

/* ===== Table ===== */
.rmon-table { width: 100%; background: var(--rmon-card); border: 1px solid var(--rmon-border); border-radius: var(--rmon-radius); overflow: hidden; border-collapse: separate; border-spacing: 0; box-shadow: var(--rmon-shadow); }
.rmon-table thead th { background: #EEF2F6; text-align: left; padding: 12px 18px; font-size: 12px; font-weight: 800; color: #4A5563; text-transform: uppercase; letter-spacing: .4px; border-bottom: 2px solid var(--rmon-border-strong); }
.rmon-table tbody td { padding: 12px 18px; border-bottom: 1px solid var(--rmon-border); font-size: 14px; vertical-align: middle; }
.rmon-table tbody tr:last-child td { border-bottom: none; }
.rmon-table tbody tr:hover { background: var(--rmon-primary-soft); }

/* ===== Badge ===== */
.rmon-badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 7px; font-size: 12px; font-weight: 700; border: 1px solid transparent; letter-spacing: .1px; }
.rmon-badge.on { background: var(--ic-green-bg); color: #0B7A45; border-color: #A7E0C2; }
.rmon-badge.off { background: var(--ic-red-bg); color: #C0392B; border-color: #F4C2BE; }
.rmon-badge.warn { background: var(--ic-orange-bg); color: #B5740A; border-color: #F6D79A; }
.rmon-badge.info { background: var(--ic-blue-bg); color: #2563EB; border-color: #BBD3F8; }
.rmon-badge.muted { background: #ECEFF3; color: var(--rmon-muted); border-color: #DDE2E9; }

/* ===== Forms ===== */
.form-label { font-weight: 600; font-size: 13px; margin-bottom: 5px; color: #3A4654; }
.form-control, .form-select { border: 1px solid var(--rmon-border-strong); border-radius: var(--rmon-radius-sm); padding: 9px 12px; font-size: 14px; color: var(--rmon-text); background-color: #fff; }
.form-control::placeholder { color: #9AA3B2; }
.form-control:hover, .form-select:hover { border-color: #AEB6C4; }
.form-control:focus, .form-select:focus { border-color: var(--rmon-primary); box-shadow: 0 0 0 3px rgba(43,163,176,.16); }
.form-check-input { border: 1.5px solid var(--rmon-border-strong); }
.form-check-input:checked { background-color: var(--rmon-primary); border-color: var(--rmon-primary); }
.form-check-input:focus { box-shadow: 0 0 0 3px rgba(43,163,176,.16); }
.form-control-sm { padding: 6px 10px; }

/* ===== Filter bar (chọn lớp/ngày...) ===== */
.rmon-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; background: var(--rmon-card); border: 1px solid var(--rmon-border); border-radius: var(--rmon-radius); padding: 12px 16px; box-shadow: var(--rmon-shadow); }
.rmon-toolbar .form-select, .rmon-toolbar .form-control { min-width: 180px; }
.rmon-spacer { flex: 1; }

/* ===== List header (đồng nhất chiều cao: search + nút) =====
   Mọi control & nút trong header/toolbar cùng cao 40px, căn giữa. */
.rmon-listhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.rmon-listhead .left, .rmon-listhead .right { display: flex; align-items: center; gap: 8px; }
.rmon-listhead form { display: flex; align-items: center; gap: 8px; margin: 0; }
.rmon-listhead .count { color: var(--rmon-muted); font-size: 13px; }
.rmon-listhead .search { width: 260px; }
.rmon-listhead .form-control,
.rmon-listhead .form-select,
.rmon-listhead .btn,
.rmon-toolbar .form-control,
.rmon-toolbar .form-select,
.rmon-toolbar .btn {
    height: 40px; line-height: 1; padding-top: 0; padding-bottom: 0;
    display: inline-flex; align-items: center;
}

/* ===== Alerts ===== */
.alert { border-radius: var(--rmon-radius-sm); border: 1px solid transparent; }
.alert-success { background: var(--ic-green-bg); border-color: #BFEAD5; color: var(--rmon-primary-dark); }
.alert-danger { background: var(--ic-red-bg); border-color: #F6C9C9; color: #B42318; }

/* ===== Login ===== */
.rmon-login-wrap { position: relative; overflow: hidden; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #4AB0BC 0%, #2BA3B0 55%, #1C8C99 100%); padding: 20px; }
.login-deco { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.login-bubble { position: absolute; border-radius: 50%; background: rgba(255,255,255,.12); animation: rmon-floaty 7s ease-in-out infinite; }
.login-doodle { position: absolute; opacity: .55; animation: rmon-floaty 8s ease-in-out infinite; }
.login-hills { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 200px; }
@keyframes rmon-floaty { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-13px) } }
.rmon-login-card { position: relative; z-index: 1; background: #fff; padding: 40px; border-radius: 20px; width: 400px; box-shadow: 0 30px 60px rgba(0,0,0,.25); }
.rmon-login-card .logo { width: 64px; height: 64px; border-radius: 16px; overflow: hidden; background: var(--rmon-brand); color: #fff; font-weight: 800; font-size: 32px; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; box-shadow: 0 8px 20px rgba(74,176,188,.45); }
.rmon-login-card .logo img { width: 100%; height: 100%; object-fit: cover; }
.rmon-login-card h1 { font-size: 22px; text-align: center; margin: 0 0 4px; font-weight: 800; }
.rmon-login-card .sub { text-align: center; color: var(--rmon-muted); font-size: 13px; margin-bottom: 24px; }
.btn-amon, .btn-rmon-block { background: var(--rmon-primary); border: none; color: #fff; width: 100%; padding: 11px; font-weight: 700; border-radius: var(--rmon-radius-sm); font-size: 15px; }
.btn-amon:hover, .btn-rmon-block:hover { background: var(--rmon-primary-dark); color: #fff; }

/* ===== Tabs (form chia nhóm kiểu Misa) ===== */
.rmon-tabs { border-bottom: 2px solid var(--rmon-border); gap: 4px; }
.rmon-tabs .nav-link { border: none; color: var(--rmon-muted); font-weight: 600; padding: 10px 18px; border-radius: 0; margin-bottom: -2px; border-bottom: 2px solid transparent; }
.rmon-tabs .nav-link:hover { color: var(--rmon-text); }
.rmon-tabs .nav-link.active { color: var(--rmon-primary-dark); background: transparent; border-bottom: 2px solid var(--rmon-primary); }
.rmon-form-section { font-size: 13px; font-weight: 700; color: var(--rmon-primary-dark); text-transform: uppercase; letter-spacing: .4px; padding-bottom: 8px; margin-bottom: 6px; border-bottom: 1px dashed var(--rmon-border); }
/* Tab dạng link (Hóa đơn / Dinh dưỡng) */
.rmon-tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--rmon-border); margin-bottom: 18px; flex-wrap: wrap; }
.rmon-tab { padding: 10px 18px; color: var(--rmon-muted); font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -2px; border-radius: 8px 8px 0 0; }
.rmon-tab:hover { color: var(--rmon-text); background: var(--rmon-bg); }
.rmon-tab.active { color: var(--rmon-primary-dark); border-bottom-color: var(--rmon-primary); font-weight: 700; }
.rmon-tab.disabled { color: #B6BEC9; pointer-events: none; }
.rmon-tab.disabled small { font-size: 10px; }

/* ===== Bảng tin / Nhật ký (feed) ===== */
.rmon-feed { display: flex; flex-direction: column; gap: 16px; max-width: 760px; }
.rmon-post { background: var(--rmon-card); border: 1px solid var(--rmon-border); border-radius: var(--rmon-radius); padding: 18px 20px; box-shadow: var(--rmon-shadow); }
.rmon-post-head { display: flex; align-items: flex-start; gap: 12px; }
.rmon-post-head .flex-1 { flex: 1; min-width: 0; }
.rmon-post-title { font-weight: 700; font-size: 15px; }
.rmon-post-meta { font-size: 12.5px; color: var(--rmon-muted); margin-top: 3px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rmon-post-body { margin-top: 12px; font-size: 14px; color: #3c4654; white-space: pre-wrap; line-height: 1.55; }
.rmon-post-imgs { margin-top: 12px; display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.rmon-post-imgs img { width: 100%; height: 110px; object-fit: cover; border-radius: 10px; border: 1px solid var(--rmon-border); background: var(--rmon-bg); }

/* ===== Nhắn tin (chat 2 cột) ===== */
.rmon-chat { display: grid; grid-template-columns: 300px 1fr; gap: 16px; height: calc(100vh - 200px); min-height: 480px; }
.rmon-chat-list { background: var(--rmon-card); border: 1px solid var(--rmon-border); border-radius: var(--rmon-radius); overflow-y: auto; box-shadow: var(--rmon-shadow); }
.rmon-chat-item { display: flex; align-items: center; gap: 11px; padding: 12px 14px; border-bottom: 1px solid var(--rmon-border); color: var(--rmon-text); }
.rmon-chat-item:hover { background: var(--rmon-bg); }
.rmon-chat-item.active { background: var(--rmon-primary-soft); }
.rmon-chat-item .t1 { font-weight: 600; font-size: 13.5px; }
.rmon-chat-item .t2 { font-size: 12px; color: var(--rmon-muted); }
.rmon-chat-main { background: var(--rmon-card); border: 1px solid var(--rmon-border); border-radius: var(--rmon-radius); display: flex; flex-direction: column; box-shadow: var(--rmon-shadow); overflow: hidden; }
.rmon-chat-empty { flex: 1; display: flex; align-items: center; justify-content: center; }
.rmon-chat-head { padding: 14px 18px; border-bottom: 1px solid var(--rmon-border); font-size: 15px; }
.rmon-chat-body { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 10px; background: var(--rmon-bg); }
.rmon-msg { display: flex; }
.rmon-msg.me { justify-content: flex-end; }
.rmon-msg .bubble { max-width: 70%; padding: 9px 13px; border-radius: 14px; font-size: 14px; line-height: 1.45; }
.rmon-msg.them .bubble { background: #fff; border: 1px solid var(--rmon-border); border-bottom-left-radius: 4px; }
.rmon-msg.me .bubble { background: var(--rmon-primary); color: #fff; border-bottom-right-radius: 4px; }
.rmon-msg .time { font-size: 10.5px; opacity: .7; margin-top: 4px; }
.rmon-chat-send { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--rmon-border); }
.rmon-chat-send .form-control { flex: 1; }
@media (max-width: 800px) { .rmon-chat { grid-template-columns: 1fr; height: auto; } }

/* ===== Ma trận kế hoạch thu / kỳ thu ===== */
.kh-wrap { overflow-x: auto; border: 1px solid var(--rmon-border); border-radius: var(--rmon-radius); box-shadow: var(--rmon-shadow); background: #fff; }
.kh-matrix { border: none; box-shadow: none; margin: 0; }
.kh-matrix thead th { position: sticky; top: 0; background: #F7F9FB; z-index: 2; vertical-align: top; }
.kh-matrix .kh-stick { position: sticky; left: 0; background: #fff; z-index: 1; }
.kh-matrix thead th.kh-stick { z-index: 3; background: #F7F9FB; }
.kh-matrix .kh-name { left: 60px; min-width: 220px; box-shadow: 2px 0 0 var(--rmon-border); }
.kh-matrix thead th.kh-name { left: 60px; }
.kh-matrix tbody tr:hover .kh-stick { background: #FAFBFC; }

/* ===== Offcanvas phiếu thu (xổ phải) ===== */
.rmon-offcanvas { width: 640px !important; max-width: 92vw; }
.rmon-offcanvas .offcanvas-header { border-bottom: 1px solid var(--rmon-border); }
.rmon-offcanvas .offcanvas-title { font-weight: 700; }
.pt-head { padding-bottom: 12px; border-bottom: 1px solid var(--rmon-border); margin-bottom: 14px; }
.pt-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 18px; }
.pt-stats > div { background: var(--rmon-bg); border-radius: 10px; padding: 10px 12px; }
.pt-stats .lbl { font-size: 11.5px; color: var(--rmon-muted); }
.pt-stats .v { font-size: 16px; font-weight: 700; }
.pt-section { font-size: 13px; font-weight: 700; color: var(--rmon-primary-dark); text-transform: uppercase; letter-spacing: .4px; margin: 16px 0 8px; }

/* ===== Quy trình thu (hub) ===== */
.qt-cat { display: flex; flex-wrap: wrap; gap: 14px; }
.qt-cat-item { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 150px; padding: 18px 12px;
    border: 1px solid var(--rmon-border); border-radius: var(--rmon-radius); color: var(--rmon-text); text-align: center; font-weight: 600; font-size: 13.5px; transition: all .12s; }
.qt-cat-item:hover { border-color: var(--rmon-primary); box-shadow: var(--rmon-shadow-hover); color: var(--rmon-primary-dark); }
.qt-cat-item.disabled { opacity: .6; }
.qt-flow-row { display: flex; align-items: center; gap: 14px; margin: 14px 0; flex-wrap: wrap; }
.qt-flow-label { font-weight: 700; color: var(--rmon-primary-dark); min-width: 140px; }
.qt-flow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.qt-step { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border: 1px solid var(--rmon-border); border-radius: 12px; background: #fff; color: var(--rmon-text); font-size: 13px; font-weight: 600; }
.qt-step:hover { border-color: var(--rmon-primary); color: var(--rmon-primary-dark); }
.qt-step.disabled { opacity: .55; }
.qt-arrow { color: var(--rmon-muted); font-weight: 700; }

/* ===== Progress (thu học phí kiểu Misa) ===== */
.rmon-prog-row { display: flex; align-items: center; gap: 12px; margin: 10px 0; font-size: 13px; }
.rmon-prog-row .name { width: 110px; color: #56616E; flex-shrink: 0; }
.rmon-prog { flex: 1; height: 8px; background: #EEF1F4; border-radius: 6px; overflow: hidden; }
.rmon-prog > span { display: block; height: 100%; background: var(--rmon-primary); border-radius: 6px; }
.rmon-prog-row .val { width: 60px; text-align: right; font-weight: 600; color: var(--rmon-primary-dark); }

/* ===== Hóa đơn - sơ đồ quy trình + khung kết nối ===== */
.hd-flow { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; padding: 26px 6px 12px; }
.hd-step { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; width: 132px; color: #46505F; font-size: 12.5px; font-weight: 600; }
.hd-step .ic { width: 60px; height: 60px; border-radius: 16px; background: var(--rmon-primary-soft); display: flex; align-items: center; justify-content: center; font-size: 26px; box-shadow: inset 0 0 0 1px rgba(43,163,176,.12); }
.hd-step.done .ic { background: var(--rmon-primary); color: #fff; box-shadow: 0 6px 14px rgba(43,163,176,.32); }
.hd-arrow { color: #B6C0CC; font-size: 20px; font-weight: 800; }

/* Khung kết nối nhà cung cấp HĐĐT - tách riêng, có điểm nhấn */
.hd-conn { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid var(--rmon-border-strong);
    border-radius: var(--rmon-radius); background: linear-gradient(180deg,#F7FBF9,#fff); margin-bottom: 16px; }
.hd-conn .logo { width: 46px; height: 46px; border-radius: 12px; background: #fff; border: 1px solid var(--rmon-border); display: flex; align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0; }
.hd-conn .t1 { font-weight: 800; font-size: 15px; }
.hd-conn .t2 { font-size: 12.5px; color: var(--rmon-muted); margin-top: 1px; }

/* ===== Chuẩn hóa cân đối (đè cỡ rem mặc định của Bootstrap) ===== */
.btn { font-size: 13.5px; font-weight: 600; padding: .42rem .85rem; border-radius: var(--rmon-radius-sm); line-height: 1.4; }
.btn-sm { font-size: 12px; padding: .26rem .62rem; }
.btn-lg { font-size: 15px; padding: .55rem 1.1rem; }
.form-control, .form-select { font-size: 13.5px; }
.form-control-sm, .form-select-sm { font-size: 12.5px; }
.form-label { font-size: 12.5px; font-weight: 600; margin-bottom: 4px; color: #44515F; }
.form-check-label { font-size: 13.5px; }
.modal-title, .offcanvas-title { font-size: 16px; font-weight: 700; }

/* Menu trái: rộng hơn, padding gọn → bớt xuống dòng */
.rmon-sidebar { width: 272px; }
.rmon-nav { padding: 8px 8px 24px; }
.rmon-nav a { padding: 8px 10px; gap: 9px; font-size: 13.5px; }
.rmon-nav a.active::before { left: -8px; }
.rmon-nav a .ic, .rmon-grp-head .ic { width: 18px; font-size: 15px; }
.rmon-grp-head { padding: 8px 10px; gap: 9px; font-size: 13.5px; }
.rmon-grp-body { margin-left: 13px; }
.rmon-grp-body a { font-size: 13px; padding-left: 12px; }
.rmon-nav-group { padding: 14px 10px 5px; }

/* Popup form: thoáng + canh lề đều */
.rmon-offcanvas .offcanvas-body { padding: 18px 20px; }
.rmon-offcanvas .form-label { margin-bottom: 5px; }

/* ===== Đồng bộ: mọi modal Thêm/Sửa trượt từ phải (trừ .modal-center) ===== */
.modal:not(.modal-center) .modal-dialog {
    margin: 0 0 0 auto; max-width: 600px !important; width: 100%; height: 100%; min-height: 100%;
}
.modal:not(.modal-center) .modal-content { min-height: 100vh; border-radius: 0; border: 0; box-shadow: -8px 0 28px rgba(0,0,0,.12); }
.modal:not(.modal-center).fade .modal-dialog { transform: translateX(40px); transition: transform .25s ease-out; }
.modal:not(.modal-center).show .modal-dialog { transform: none; }
.modal:not(.modal-center) .modal-body { overflow-y: auto; }
@media (max-width: 992px) {
    .modal:not(.modal-center) .modal-dialog { max-width: 100% !important; }
}

/* ===== Mobile: nút menu + backdrop (ẩn trên desktop) ===== */
.rmon-nav-toggle { display: none; background: none; border: 0; font-size: 24px; line-height: 1; color: var(--rmon-primary-dark); cursor: pointer; padding: 2px 6px; margin-right: 2px; }
.rmon-backdrop { display: none; }

/* ===== Responsive: tablet & điện thoại ===== */
@media (max-width: 992px) {
    .rmon-nav-toggle { display: inline-flex; align-items: center; }
    .rmon-sidebar {
        position: fixed; top: 0; left: 0; height: 100vh; width: 270px; z-index: 1050;
        transform: translateX(-100%); transition: transform .25s ease; box-shadow: 0 0 32px rgba(0,0,0,.2);
    }
    .rmon-shell.nav-open .rmon-sidebar { transform: translateX(0); }
    .rmon-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.42); z-index: 1040; opacity: 0; pointer-events: none; transition: opacity .25s; }
    .rmon-shell.nav-open .rmon-backdrop { display: block; opacity: 1; pointer-events: auto; }
    .rmon-main { width: 100%; min-width: 0; }
    .rmon-content { padding: 14px; overflow-x: auto; }           /* bảng rộng cuộn ngang, giữ canh cột */
    .rmon-topbar { padding: 8px 14px; gap: 10px; }
    .rmon-topbar > div:not(.rmon-user) { flex: 1; min-width: 0; overflow: hidden; }
    .rmon-greet-title { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .rmon-greet-sub { display: none; }
    .rmon-user { gap: 8px; }
    .rmon-user-chip > div { display: none; }                     /* ẩn tên/vai trò, giữ avatar */
    /* popup gần như full màn hình */
    .offcanvas.offcanvas-end { width: 100% !important; max-width: 100vw; }
    /* control trong toolbar/đầu danh sách giãn full hàng */
    .rmon-toolbar .form-select, .rmon-toolbar .form-control,
    .rmon-listhead .form-select, .rmon-listhead .form-control, .rmon-listhead .search { min-width: 0; }
    .rmon-listhead .search { width: 100%; }
}
@media (max-width: 560px) {
    .rmon-stats { grid-template-columns: 1fr 1fr; gap: 10px; }
    .rmon-content { padding: 10px; }
    .rmon-card { padding: 14px; }
    .rmon-listhead .left, .rmon-listhead .right { width: 100%; flex-wrap: wrap; }
    .rmon-listhead form, .rmon-toolbar form { flex-wrap: wrap; width: 100%; }
}

/* ============================================================
   Tinh chỉnh đợt 2: căn form, gọn toolbar, hiện đại hóa, màu menu
   ============================================================ */

/* (A) Nhãn trong form lưới canh đều → ô không lệch khi nhãn dài 2 dòng */
.row .form-label { min-height: 2.7em; line-height: 1.25; display: block; }

/* (B) Select/ô lọc trên toolbar gọn lại (không full chiều ngang) */
.rmon-toolbar .form-select, .rmon-toolbar .form-control {
    width: auto; flex: 0 1 auto; min-width: 150px; max-width: 260px;
}
.rmon-toolbar .search { max-width: 280px; }
@media (max-width: 992px) {
    .rmon-toolbar .form-select, .rmon-toolbar .form-control { max-width: none; width: 100%; }
}

/* (C) Hiện đại hóa thẻ thống kê: icon dạng chip bo tròn + bóng nhẹ phân lớp */
.rmon-stats { gap: 14px; }
.rmon-stat { border-radius: 16px; box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 2px 8px rgba(16,24,40,.05); }
.rmon-stat .rmon-ic { width: 46px; height: 46px; border-radius: 13px; font-size: 22px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rmon-ic.ic-blue   { background: linear-gradient(135deg,#E5F0FF,#D6E6FF); }
.rmon-ic.ic-green  { background: linear-gradient(135deg,#E4F7EC,#D2F0DE); }
.rmon-ic.ic-orange { background: linear-gradient(135deg,#FFF1DF,#FFE6C7); }
.rmon-ic.ic-red    { background: linear-gradient(135deg,#FDE8E8,#F9D6D6); }
.rmon-ic.ic-purple { background: linear-gradient(135deg,#EFE8FD,#E3D7FB); }

/* (C) Bảng hiện đại: đầu cột chữ nhỏ in hoa, hàng hover nhẹ */
.rmon-table thead th { text-transform: uppercase; font-size: 11.5px; letter-spacing: .4px; color: #8A94A6; font-weight: 700; background: #FAFBFC; }
.rmon-table tbody tr { transition: background .12s; }
.rmon-table tbody tr:hover { background: #F6FAFB; }

/* (D) Menu trái: thêm điểm nhấn màu, hiện đại hơn */
.rmon-sidebar { background: linear-gradient(180deg,#FCFEFE 0%, var(--rmon-card) 120px); }
.rmon-brand { background: linear-gradient(135deg, rgba(74,176,188,.12), rgba(74,176,188,0)); }
.rmon-nav-group { color: #98A2B3; letter-spacing: .8px; }
.rmon-nav a:hover, .rmon-grp-head:hover { background: var(--rmon-primary-soft); color: var(--rmon-primary-dark); }
.rmon-nav a.active {
    background: linear-gradient(90deg, var(--rmon-primary-soft), rgba(226,243,245,.35));
    color: var(--rmon-primary-dark); font-weight: 700;
    box-shadow: inset 0 0 0 1px rgba(43,163,176,.16);
}
.rmon-nav a.active::before { width: 4px; border-radius: 0 4px 4px 0; background: linear-gradient(180deg,#34C0CE,#1C8C99); }
.rmon-nav a .ic { transition: transform .12s; }
.rmon-nav a:hover .ic { transform: scale(1.12); }

/* (D) Card & nút mềm mại, hiện đại hơn (bóng phân lớp thay vì viền cứng) */
.rmon-card { box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 2px 10px rgba(16,24,40,.04); }
.rmon-toolbar { box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 2px 8px rgba(16,24,40,.04); border-radius: 14px; }
.btn-rmon { box-shadow: 0 2px 8px rgba(43,163,176,.26); }

/* ============================================================
   Icon line (Bootstrap Icons) + textbox/nút hiện đại kiểu Misa
   ============================================================ */
/* Icon trên nút ăn theo màu chữ → trắng trên nút xanh, teal trên nút outline */
.btn .bi { vertical-align: -.12em; margin-right: 5px; font-size: 1.02em; }
.btn .bi:only-child { margin-right: 0; }
.bi { line-height: 1; }
/* link/nút icon nhỏ trong bảng */
.btn-ico .bi, .lhd-btn .bi { margin-right: 0; }

/* Ô nhập bo tròn mềm + focus ring teal (trẻ trung, hiện đại) */
.form-control, .form-select { border-radius: 10px; border-color: #DCE3EA; }
.form-control::placeholder { color: #AEB7C2; }
.form-control:focus, .form-select:focus { border-color: var(--rmon-primary); box-shadow: 0 0 0 3px rgba(43,163,176,.15); }
.form-control-sm, .form-select-sm { border-radius: 8px; }
.input-group-text { border-radius: 10px; }

/* Nút bo tròn mềm hơn */
.btn { border-radius: 10px; }
.btn-sm { border-radius: 8px; }

/* Badge mềm */
.rmon-badge { border-radius: 20px; }

/* ============================================================
   Làm nhẹ border (mềm, hiện đại) - bỏ viền cứng, dùng bóng/nền nhẹ
   ============================================================ */
:root { --rmon-border: #ECEFF3; --rmon-border-strong: #E0E4EA; }

/* Khối lớn: bỏ viền, tách nhau bằng bóng nhẹ + nền trắng trên nền xám */
.rmon-card, .rmon-panel, .rmon-stat, .rmon-table, .rmon-toolbar {
    border: 0;
    box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 4px 12px rgba(16,24,40,.05);
}
.rmon-stat:hover { border: 0; box-shadow: 0 6px 18px rgba(16,24,40,.09); }

/* Đường phân cách trong khối: rất nhạt */
.rmon-card-title, .rmon-panel-head, .rmon-info-row { border-bottom-color: #F1F3F6; }
.rmon-grp-body { border-left-color: #EEF1F4; }

/* Bảng: không viền ngoài, đầu bảng nền nhẹ không kẻ đậm, kẻ hàng siêu nhạt */
.rmon-table thead th { background: #F7F9FB; border-bottom: 1px solid #EDF0F3; }
.rmon-table tbody td { border-bottom: 1px solid #F2F4F7; }

/* Viền khung (sidebar/topbar) nhạt */
.rmon-sidebar { border-right-color: #ECEFF3; }
.rmon-brand { border-bottom-color: #ECEFF3; }
.rmon-topbar { border-bottom-color: #ECEFF3; }
.rmon-subnav { border-bottom-color: #ECEFF3; }

/* Ô nhập: viền nhạt, focus mới rõ */
.form-control, .form-select { border-color: #E6EAEF; }
.btn-outline-rmon, .btn-outline-secondary { border-color: #E0E4EA; }

/* Icon chip: bỏ vòng viền mờ bên trong cho phẳng, hiện đại */
.rmon-ic { box-shadow: none; }

/* Một vài ô "khung phụ" → thay viền bằng nền nhẹ để tách mà không cứng */
.rmon-listhead .search, .input-group .form-control { background: #FBFCFD; }

/* ============================================================
   Chữ số thẳng cột (tabular-nums) - bảng, thẻ thống kê, số tiền
   Chỉ ảnh hưởng chữ số; tên/chữ thường giữ nguyên độ rộng tự nhiên.
   ============================================================ */
.rmon-table, .rmon-stat .num, .rmon-badge,
input[type="number"], input[type="date"],
.so-tien, .text-tien, td.text-end, .num {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* ============================================================
   Hiệu ứng loading hiện đại - spinner, skeleton, thanh tiến trình
   ============================================================ */
.rmon-spin { display:inline-block; width:26px; height:26px; border:3px solid var(--rmon-primary-soft);
    border-top-color:var(--rmon-primary); border-radius:50%; animation:rmonspin .7s linear infinite; }
.rmon-spin.sm { width:16px; height:16px; border-width:2px; }
.rmon-spin.lg { width:38px; height:38px; border-width:4px; }
@keyframes rmonspin { to { transform:rotate(360deg); } }

.rmon-loading { display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:12px; padding:46px 20px; color:var(--rmon-muted); font-size:13.5px; font-weight:500; }

/* Skeleton shimmer (khung xương khi chờ dữ liệu) */
.rmon-skel { background:linear-gradient(100deg,#EAEef3 30%,#F6F8FB 50%,#EAEef3 70%);
    background-size:200% 100%; animation:rmonshim 1.15s ease-in-out infinite; border-radius:8px; }
@keyframes rmonshim { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.rmon-skel-line { height:14px; margin:10px 0; }
.rmon-skel-line.w70{width:70%} .rmon-skel-line.w50{width:50%} .rmon-skel-line.w40{width:40%} .rmon-skel-line.w90{width:90%}
.rmon-skel-card { height:80px; margin:12px 0; border-radius:var(--rmon-radius); }

/* Thanh tiến trình trên đỉnh khi chuyển trang */
#rmonBar { position:fixed; top:0; left:0; height:3px; width:0; z-index:99999; opacity:0;
    background:linear-gradient(90deg,var(--rmon-primary),#6FD0C4);
    box-shadow:0 0 8px rgba(43,163,176,.55); transition:width .25s ease, opacity .2s ease; }
#rmonBar.on { opacity:1; }

/* Nút đang xử lý: chèn spinner nhỏ, mờ nội dung */
.btn.is-loading { position:relative; color:transparent !important; pointer-events:none; }
.btn.is-loading::after { content:""; position:absolute; top:50%; left:50%; width:15px; height:15px;
    margin:-8px 0 0 -8px; border:2px solid rgba(255,255,255,.5); border-top-color:#fff;
    border-radius:50%; animation:rmonspin .65s linear infinite; }
.btn-outline-rmon.is-loading::after, .btn-outline-secondary.is-loading::after { border-color:rgba(43,163,176,.35); border-top-color:var(--rmon-primary); }

/* ============================================================
   Nút: icon-text canh đều (chống dính), nút thao tác bảng dạng icon
   ============================================================ */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; }
.btn .bi { margin:0 !important; }

/* Nút thao tác trên bảng (Sửa/Xóa) - icon ghost hiện đại */
.rmon-act { width:34px; height:34px; padding:0; border:0; background:transparent;
    display:inline-flex; align-items:center; justify-content:center; border-radius:9px;
    color:var(--rmon-muted); font-size:15px; cursor:pointer; transition:all .13s; }
.rmon-act:hover { background:var(--rmon-primary-soft); color:var(--rmon-primary-dark); }
.rmon-act.danger:hover { background:#FDECEC; color:#D14343; }
.rmon-act + .rmon-act, .rmon-act + form, form + .rmon-act { margin-left:2px; }
td .d-inline { display:inline-flex; }

/* ============================================================
   Tom Select - dropdown đẹp, đồng bộ tông RMon
   ============================================================ */
.ts-wrapper { min-width:0; }
.ts-control { border:1px solid #E6EAEF !important; border-radius:var(--rmon-radius-sm) !important;
    min-height:38px; padding:5px 12px !important; font-size:13.5px; background:#fff !important;
    box-shadow:none !important; color:var(--rmon-text); transition:all .12s; }
.ts-control:hover { border-color:#C4CCD6 !important; }
.ts-wrapper.focus .ts-control { border-color:var(--rmon-primary) !important; box-shadow:0 0 0 3px rgba(43,163,176,.16) !important; }
.ts-wrapper.single .ts-control:after { border-color:#8A94A6 transparent transparent !important; } /* mũi tên */
.ts-dropdown { z-index:2000; border:1px solid var(--rmon-border) !important; border-radius:11px !important;
    box-shadow:0 10px 30px rgba(16,24,40,.14) !important; overflow:hidden; margin-top:6px !important; padding:5px !important; }
.ts-dropdown .option { padding:9px 12px; font-size:13.5px; border-radius:8px; color:var(--rmon-text); }
.ts-dropdown .option:hover, .ts-dropdown .option.active { background:var(--rmon-primary-soft) !important; color:var(--rmon-primary-dark) !important; }
.ts-dropdown .option.selected { font-weight:600; }
.ts-dropdown .no-results, .ts-dropdown .optgroup-header { padding:8px 12px; color:var(--rmon-muted); font-size:12.5px; }
.ts-dropdown .ts-dropdown-content { max-height:280px; }
/* ô tìm kiếm trong dropdown (khi danh sách dài) */
.ts-dropdown .dropdown-input-wrap { padding:4px; }
.ts-dropdown-input { border:1px solid #E6EAEF !important; border-radius:8px !important; padding:7px 10px !important; }
/* multi-select: thẻ chip */
.ts-control .item { background:var(--rmon-primary-soft) !important; color:var(--rmon-primary-dark) !important;
    border-radius:14px !important; padding:2px 9px !important; font-weight:600; }

/* ============================================================
   Sửa Tom Select: wrapper sao chép class form-select gây viền lồng / xuống dòng
   ============================================================ */
/* Bỏ mọi style Bootstrap .form-select trên LỚP BAO NGOÀI - chỉ .ts-control mới có viền */
.ts-wrapper.form-select, .ts-wrapper.form-control {
    border:0 !important; padding:0 !important; height:auto !important; min-height:0 !important;
    background:none !important; background-image:none !important; box-shadow:none !important;
    border-radius:0 !important; line-height:normal !important; -webkit-appearance:none; appearance:none; width:100%; }

/* Control: 1 dòng, không tràn, cao chuẩn như input khác */
.ts-wrapper.single .ts-control { white-space:nowrap; padding-right:30px !important; }
.ts-control { display:flex; align-items:center; flex-wrap:nowrap; }
.ts-control > .item, .ts-control > input {
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; line-height:1.4; }
.ts-wrapper.single .ts-control:after { right:14px !important; } /* mũi tên về sát phải */

/* Dropdown rộng tối thiểu bằng control, option không vỡ dòng */
.ts-dropdown .option { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* multi-select: cho phép xuống dòng các chip (đúng kỳ vọng) */
.ts-wrapper.multi .ts-control { flex-wrap:wrap; white-space:normal; }

/* Option trong dropdown: cho xuống dòng để đọc đủ tên dài (ô đang chọn vẫn 1 dòng) */
.ts-dropdown .option { white-space:normal !important; overflow:visible !important; text-overflow:clip !important; }
.ts-dropdown { min-width:160px; }

/* Dropdown: option tràn full sát viền ngoài (bỏ padding dropdown + bo góc option) */
.ts-dropdown { padding:0 !important; }
.ts-dropdown .option { border-radius:0 !important; padding:10px 14px !important; }
.ts-dropdown .ts-dropdown-content { padding:0 !important; }
.ts-dropdown .dropdown-input-wrap { padding:6px !important; border-bottom:1px solid var(--rmon-border); }

/* Single select: ô giá trị đang chọn tràn kín control (nền teal full sát viền) */
.ts-wrapper.single .ts-control { padding:0 !important; overflow:hidden; }
.ts-wrapper.single .ts-control > .item {
    background:var(--rmon-primary-soft) !important; color:var(--rmon-primary-dark) !important;
    border-radius:0 !important; margin:0 !important; width:100%;
    padding:8px 34px 8px 13px !important; font-weight:600; line-height:1.5; }
/* khi đang gõ tìm kiếm (select dài) thì input chiếm chỗ, nền trắng cho dễ đọc */
.ts-wrapper.single.input-active .ts-control { background:#fff !important; }
.ts-wrapper.single.input-active .ts-control > .item { background:transparent !important; }

/* Mũi tên chevron nhỏ cho select (rõ trên nền teal), xoay khi mở dropdown */
.ts-wrapper.single .ts-control:after {
    content:"" !important; border:0 !important; width:13px; height:13px; margin:0 !important;
    right:12px !important; top:50%; transform:translateY(-50%); transition:transform .18s ease;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23147a86' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") no-repeat center / contain; opacity:.85; }
.ts-wrapper.single.dropdown-active .ts-control:after { transform:translateY(-50%) rotate(180deg); }

/* CHỐT: ô select về nền trắng bình thường (bỏ teal), mũi tên căn giữa cân với chữ */
.ts-wrapper.single .ts-control { background:#fff !important; padding:5px 34px 5px 12px !important; overflow:hidden; }
.ts-wrapper.single .ts-control > .item {
    background:transparent !important; color:var(--rmon-text) !important;
    font-weight:500 !important; padding:0 !important; margin:0 !important; width:auto; line-height:1.6; }
.ts-wrapper.single .ts-control:after {
    top:50% !important; transform:translateY(-50%) !important; right:13px !important; }
.ts-wrapper.single.dropdown-active .ts-control:after { transform:translateY(-50%) rotate(180deg) !important; }

/* Mũi tên nằm hẳn mép phải: control không co theo chữ, chữ chiếm phần còn lại */
.rmon-toolbar .ts-wrapper, .rmon-listhead .ts-wrapper { min-width:180px; }
.ts-wrapper.single .ts-control { justify-content:flex-start; }
.ts-wrapper.single .ts-control > .item { flex:1 1 auto; }
.ts-wrapper.single .ts-control:after { position:absolute !important; right:13px !important; top:50% !important; transform:translateY(-50%) !important; }
@media (max-width:560px){ .rmon-toolbar .ts-wrapper, .rmon-listhead .ts-wrapper { min-width:0; } }

/* ============================================================
   Điểm nhấn trẻ trung cho menu trái: cảnh minh hoạ chân menu + vệt màu pastel ở logo
   ============================================================ */
.rmon-sidebar { position: sticky; }   /* giữ là positioned cho ::before */
.rmon-sidebar::before {
    content:""; position:absolute; top:0; left:0; right:0; height:150px; pointer-events:none; z-index:0;
    background:
      radial-gradient(circle at 16% 10%, rgba(246,165,192,.18), transparent 58%),
      radial-gradient(circle at 88% 6%, rgba(143,184,242,.16), transparent 52%),
      radial-gradient(circle at 62% 26%, rgba(255,209,92,.15), transparent 55%);
}
.rmon-sidebar > * { position:relative; z-index:1; }

/* Cảnh dễ thương đẩy xuống đáy menu, nằm dưới danh sách nav */
.rmon-sidebar-deco { margin-top:auto; pointer-events:none; opacity:.92; }
.rmon-sidebar-deco svg { display:block; width:100%; height:auto; }
/* mặt trời nhún nhẹ cho sinh động */
.rmon-sidebar-deco svg > circle:nth-of-type(1) { animation:rmonSun 4s ease-in-out infinite; transform-origin:208px 56px; }
@keyframes rmonSun { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-2px); } }
/* bóng bay trôi nhẹ */
.rmon-sidebar-deco svg > g:last-of-type { animation:rmonFloat 5s ease-in-out infinite; }
@keyframes rmonFloat { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-3px); } }
@media (prefers-reduced-motion: reduce){ .rmon-sidebar-deco svg *{ animation:none !important; } }

/* ============================================================
   Làm đẹp bảng danh sách: dòng gọn, avatar, icon giới tính
   ============================================================ */
/* Dòng gọn hơn + canh giữa */
.rmon-table tbody td { padding:6px 16px; vertical-align:middle; }
.rmon-table thead th { padding:9px 16px; white-space:nowrap; }
.rmon-table td:last-child { white-space:nowrap; }
.rmon-table tbody tr { transition:background .12s; }
.rmon-table tbody tr:hover { background:#F7FAFB; }

/* Ô "người" = avatar + tên + dòng phụ (mã/biệt danh) */
.rmon-person { display:flex; align-items:center; gap:11px; }
.rmon-avt { width:32px; height:32px; border-radius:50%; flex-shrink:0; overflow:hidden;
    display:inline-flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:13px;
    box-shadow:0 1px 2px rgba(16,24,40,.12); }
.rmon-avt img { width:100%; height:100%; object-fit:cover; }
.rmon-avt.sm { width:30px; height:30px; font-size:12.5px; }
.rmon-person .nm { font-weight:600; line-height:1.25; color:var(--rmon-text); }
.rmon-person .sub { font-size:11.5px; color:var(--rmon-muted); margin-top:1px; }

/* Icon giới tính theo màu (đặt tên rmon-gt để KHÔNG đụng .gt của tiêu đề nhóm menu) */
.rmon-gt { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:9px; font-size:15px; }
.rmon-gt-nam { background:#E8F1FE; color:#3B82F6; }
.rmon-gt-nu { background:#FDEAF3; color:#EC4899; }
.rmon-gt-khac { background:#EEF1F5; color:#8A94A6; }

/* Nhãn nhỏ (vd Giáo viên) */
.rmon-tag-gv { background:var(--rmon-primary-soft); color:var(--rmon-primary-dark); font-size:11px; font-weight:700; padding:3px 9px; border-radius:11px; }

/* ============================================================
   Màn hồ sơ chi tiết học sinh (slide panel)
   ============================================================ */
.pf-wrap { margin:-16px -16px -16px; }
.pf-banner { height:84px; background:linear-gradient(120deg,#2BA3B0,#54C7C0 55%,#7FD6A8); position:relative; overflow:hidden; }
.pf-banner svg { position:absolute; inset:0; width:100%; height:100%; opacity:.5; }
.pf-head { display:flex; align-items:flex-start; gap:16px; padding:0 20px 16px; margin-top:-40px; position:relative; }
.pf-avt { width:78px; height:78px; border-radius:20px; border:4px solid #fff; overflow:hidden; flex-shrink:0;
    display:flex; align-items:center; justify-content:center; font-size:27px; font-weight:800; color:#fff;
    box-shadow:0 4px 14px rgba(16,24,40,.16); }
.pf-avt img { width:100%; height:100%; object-fit:cover; }
.pf-id { flex:1; min-width:0; padding-top:46px; }
.pf-id .nm { font-size:18px; font-weight:800; line-height:1.25; }
.pf-id .meta { color:var(--rmon-muted); font-size:12.5px; margin-top:6px; display:flex; align-items:center; flex-wrap:wrap; gap:7px 14px; }
.pf-id .meta > span { display:inline-flex; align-items:center; gap:5px; }
.pf-head .pf-edit { flex-shrink:0; margin-top:46px; }
.pf-tabs { display:flex; gap:2px; padding:14px 16px 0; border-bottom:1px solid var(--rmon-border); flex-wrap:wrap; }
.pf-tab { padding:9px 14px; font-size:13.5px; font-weight:600; color:var(--rmon-muted); cursor:pointer;
    border:0; background:none; border-bottom:2px solid transparent; border-radius:8px 8px 0 0; }
.pf-tab:hover { color:var(--rmon-text); background:var(--rmon-bg); }
.pf-tab.active { color:var(--rmon-primary-dark); border-bottom-color:var(--rmon-primary); }
.pf-pane { padding:18px 20px; display:none; }
.pf-pane.active { display:block; }
.pf-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:15px 24px; }
.pf-grid.one { grid-template-columns:1fr; }
.pf-f .k { font-size:11px; color:var(--rmon-muted); text-transform:uppercase; letter-spacing:.4px; }
.pf-f .v { font-weight:600; margin-top:2px; word-break:break-word; }
.pf-f .v.muted { color:var(--rmon-muted); font-weight:500; }
.pf-sect { font-weight:700; font-size:13px; color:var(--rmon-primary-dark); text-transform:uppercase; letter-spacing:.5px; margin:20px 0 12px; }
.pf-sect:first-child { margin-top:0; }
.pf-parent { background:var(--rmon-bg); border-radius:13px; padding:15px 16px; }
.pf-parent .ph-top { display:flex; align-items:center; gap:11px; margin-bottom:10px; }
.pf-parent .ph-rel { font-size:11px; font-weight:700; padding:3px 9px; border-radius:10px; }
.pf-money { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.pf-money .b { border-radius:12px; padding:14px; text-align:center; }
.pf-money .b .v { font-size:18px; font-weight:800; }
.pf-money .b .l { font-size:11.5px; margin-top:3px; opacity:.85; }
@media (max-width:560px){ .pf-grid, .pf-money { grid-template-columns:1fr; } }

/* Tên người click mở hồ sơ */
.rmon-person .nm.lk { cursor:pointer; }
.rmon-person .nm.lk:hover { color:var(--rmon-primary-dark); text-decoration:underline; }

/* ============================================================
   Trang Học sinh: panel lớp bên trái + bulk bar
   ============================================================ */
.hs-layout { display:flex; gap:16px; align-items:flex-start; }
.hs-classpanel { width:212px; flex-shrink:0; background:var(--rmon-card); border-radius:var(--rmon-radius);
    box-shadow:0 1px 2px rgba(16,24,40,.04),0 4px 12px rgba(16,24,40,.05); padding:10px; position:sticky; top:74px; }
.hs-cp-title { font-size:12px; font-weight:800; text-transform:uppercase; color:var(--rmon-muted); padding:6px 10px 8px; letter-spacing:.5px; }
.hs-cp-item { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:9px 11px; margin:1px 0;
    border-radius:9px; color:var(--rmon-text); font-size:13.5px; font-weight:600; text-decoration:none; transition:background .12s; }
.hs-cp-item .ct { font-size:11.5px; color:var(--rmon-muted); font-weight:700; background:var(--rmon-bg); border-radius:10px; padding:1px 8px; }
.hs-cp-item:hover { background:var(--rmon-bg); }
.hs-cp-item.active { background:var(--rmon-primary-soft); color:var(--rmon-primary-dark); }
.hs-cp-item.active .ct { background:#fff; color:var(--rmon-primary-dark); }
.hs-cp-item.warn .ct { background:#FDECEC; color:#C0392B; }
.hs-cp-add { display:flex; align-items:center; gap:7px; padding:9px 11px; margin-top:6px; border-top:1px dashed var(--rmon-border);
    color:var(--rmon-primary-dark); font-size:13px; font-weight:600; cursor:pointer; }
.hs-main { flex:1; min-width:0; }
.hs-bulkbar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; background:var(--rmon-primary-soft);
    border-radius:11px; padding:9px 14px; margin-bottom:12px; }
.hs-pcol .ph { font-weight:600; font-size:13px; }
@media (max-width:992px){ .hs-layout{ flex-direction:column; } .hs-classpanel{ width:100%; position:static; } }

/* ============================================================
   Dropdown menu (Bootstrap) đồng bộ tông + chữ nhỏ gọn
   ============================================================ */
.dropdown-menu { font-size:13.5px; border:1px solid var(--rmon-border); border-radius:11px;
    box-shadow:0 10px 30px rgba(16,24,40,.13); padding:6px; min-width:210px; }
.dropdown-item { border-radius:8px; padding:8px 12px; font-size:13.5px; color:var(--rmon-text); display:flex; align-items:center; }
.dropdown-item:hover, .dropdown-item:focus { background:var(--rmon-primary-soft); color:var(--rmon-primary-dark); }
.dropdown-item .bi { margin-right:9px; font-size:15px; color:var(--rmon-muted); }
.dropdown-item:hover .bi, .dropdown-item:focus .bi { color:var(--rmon-primary-dark); }
.dropdown-divider { margin:5px 4px; border-color:var(--rmon-border); }

/* Bảng danh sách: chữ nhỏ gọn, mảnh hơn cho cân đối */
.rmon-table tbody td { font-size:13px; }
.rmon-person .nm { font-size:13.5px; }
.rmon-person .sub { font-size:11px; }
.rmon-avt { width:30px; height:30px; font-size:12px; }

/* ============================================================
   Lịch chọn ngày (flatpickr) - đồng bộ tông RMon
   ============================================================ */
.flatpickr-calendar { border-radius:13px; border:1px solid var(--rmon-border); font-family:inherit;
    box-shadow:0 12px 34px rgba(16,24,40,.16); padding:6px; }
.flatpickr-calendar.arrowTop:before, .flatpickr-calendar.arrowTop:after { border-bottom-color:#fff; }
.flatpickr-months { padding:4px 2px 6px; }
.flatpickr-months .flatpickr-month, .flatpickr-current-month, .flatpickr-current-month input.cur-year { color:var(--rmon-text); font-weight:700; }
.flatpickr-monthDropdown-months { font-weight:700; }
.flatpickr-weekday { color:var(--rmon-muted); font-weight:700; font-size:12px; }
.flatpickr-day { border-radius:9px; color:var(--rmon-text); height:38px; line-height:38px; }
.flatpickr-day:hover, .flatpickr-day.prevMonthDay:hover, .flatpickr-day.nextMonthDay:hover { background:var(--rmon-primary-soft); border-color:transparent; }
.flatpickr-day.today { border-color:var(--rmon-primary); }
.flatpickr-day.selected, .flatpickr-day.selected:hover { background:var(--rmon-primary) !important; border-color:var(--rmon-primary) !important; color:#fff; box-shadow:none; }
.flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg { fill:var(--rmon-primary); }
.flatpickr-day.flatpickr-disabled { color:#C4CCD6; }

/* ============================================================
   Phân trang danh sách
   ============================================================ */
.rmon-pager { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-top:14px; font-size:13px; }
.rmon-pager .pg { display:flex; align-items:center; gap:4px; }
.pg-btn { min-width:32px; height:32px; padding:0 9px; display:inline-flex; align-items:center; justify-content:center;
    border-radius:8px; background:#fff; border:1px solid var(--rmon-border); color:var(--rmon-text); font-weight:600; text-decoration:none; transition:all .12s; }
.pg-btn:hover { background:var(--rmon-primary-soft); color:var(--rmon-primary-dark); }
.pg-btn.active { background:var(--rmon-primary); border-color:var(--rmon-primary); color:#fff; }
.pg-btn.disabled { opacity:.45; pointer-events:none; }
.pg-dot { color:var(--rmon-muted); padding:0 2px; }