/* FFV Quản trị vận hành — navy #10285B + magenta #E0376F (chuẩn thương hiệu hệ sinh thái) */
:root {
  --navy: #10285B; --navy-2: #1b3a7a; --magenta: #E0376F;
  --bg: #f4f6fb; --card: #ffffff; --line: #e3e8f2; --text: #1c2434; --muted: #64748b;
  --ok: #16a34a; --warn: #d97706; --bad: #dc2626;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--text); font-size: 15px; }
a { color: var(--navy-2); }

/* (Sếp chốt 15/08) THANH DỌC bên trái thay thanh ngang. Vẫn tên .topbar vì mọi bản in đang
   ẩn theo tên đó. Màn hẹp (<920px) thì thanh xếp lên trên như khối thường, không che nội dung. */
.topbar { background: var(--navy); color: #fff; display: flex; flex-direction: column;
  position: fixed; inset: 0 auto 0 0; width: 232px; z-index: 80; overflow-y: auto; padding: 14px 10px; gap: 10px; }
.topbar .logo { font-weight: 800; letter-spacing: .5px; font-size: 18px; color: #fff; text-decoration: none; padding: 2px 8px; }
.topbar .logo span { color: var(--magenta); }
.topbar nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.topbar nav a { color: #cdd6ea; text-decoration: none; padding: 7px 10px; border-radius: 8px; font-size: 13.5px; display: flex; align-items: center; }
.topbar nav a:hover { background: var(--navy-2); color: #fff; }
.topbar nav a.active { background: var(--magenta); color: #fff; font-weight: 600; }
.topbar .who { font-size: 12.5px; color: #cdd6ea; line-height: 1.4; }
.topbar .who a { color: #fff; }
.sb-cuoi { display: flex; flex-direction: column; gap: 8px; padding: 10px 8px 2px; border-top: 1px solid rgba(255,255,255,.12); }
/* nội dung chừa chỗ cho thanh dọc — chỉ khi đã đăng nhập (body.co-sidebar) */
body.co-sidebar .wrap { margin-left: 232px; max-width: none; padding: 0 26px; }
@media (max-width: 920px) {
  .topbar { position: static; width: auto; }
  body.co-sidebar .wrap { margin-left: 0; padding: 0 16px; }
}
.lang-switch { display: flex; border: 1px solid #3a5390; border-radius: 8px; overflow: hidden; flex-shrink: 0; }
.lang-switch a { color: #cdd6ea; text-decoration: none; padding: 4px 9px; font-size: 12.5px; }
.lang-switch a.on { background: var(--magenta); color: #fff; font-weight: 700; }
.login-lang { text-align: center; margin-top: 12px; }

/* Bản in / PDF: giấu menu, form, nút — chỉ còn số liệu */
@media print {
  .topbar, .no-print, form, button, .btn { display: none !important; }
  body { background: #fff; }
  .wrap, body.co-sidebar .wrap { margin: 0; max-width: 100%; padding: 0; }
  .panel, .card { border-color: #aaa; break-inside: avoid; }
  a { color: inherit; text-decoration: none; }
}
.login-lang a { font-size: 13px; margin: 0 6px; }
.login-lang a.on { font-weight: 800; color: var(--magenta); }
.topbar .who a { color: #fff; }
.badge-canh-bao { background: var(--magenta); color: #fff; border-radius: 99px; font-size: 11px; padding: 1px 7px; margin-left: 4px; font-weight: 700; }

/* Menu nhóm 2 tầng: lớp cha trên thanh, việc con thả xuống (hover hoặc bàn phím) */
.menu-group { display: flex; flex-direction: column; }
/* Mũi tên ▾ nay là NÚT mở danh sách con (bấm tên nhóm thì vào thẳng màn hình) —
   nới vùng bấm cho ngón tay/chuột trúng, kẻo bấm trượt lại thành chuyển trang ngoài ý muốn */
.menu-group .caret { font-size: 10px; opacity: .6; padding: 8px 8px; margin: -8px -6px -8px 0; cursor: pointer; transition: transform .12s; }
.menu-group .caret:hover { opacity: 1; }
.menu-group.mo > .group-btn .caret { transform: rotate(180deg); }
.menu-drop { display: none; padding: 2px 0 6px 14px; border-left: 2px solid rgba(255,255,255,.12); margin-left: 14px; }
.menu-group.mo .menu-drop { display: block; }
.menu-drop a { display: flex; color: #b9c5e2; padding: 5px 9px; border-radius: 7px; font-size: 12.8px; }
.menu-drop a:hover { background: var(--navy-2); color: #fff; }
.menu-drop a.active { background: var(--magenta); color: #fff; font-weight: 600; }
.group-btn { justify-content: flex-start; }
.group-btn .gb-ten { flex: 1; }

.wrap { max-width: 1120px; margin: 24px auto; padding: 0 16px; }
h1 { font-size: 22px; color: var(--navy); margin: 0 0 16px; }
h2 { font-size: 16px; color: var(--navy); margin: 22px 0 10px; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 20px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.card .num { font-size: 24px; font-weight: 800; color: var(--navy); }
.card .num.magenta { color: var(--magenta); }
.card .lbl { font-size: 13px; color: var(--muted); margin-top: 2px; }

.panel { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; margin-bottom: 18px; }
table { width: 100%; border-collapse: collapse; background: var(--card); }
th { text-align: left; font-size: 12.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); border-bottom: 2px solid var(--line); padding: 8px 10px; }
td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

.tag { display: inline-block; padding: 2px 9px; border-radius: 99px; font-size: 12px; font-weight: 600; }
.tag.ok { background: #e8f7ee; color: var(--ok); }
.tag.warn { background: #fef3e2; color: var(--warn); }
.tag.bad { background: #fdeaea; color: var(--bad); }
.tag.navy { background: #e8edf8; color: var(--navy); }
.tag.min { background: var(--magenta); color: #fff; }

form.inline { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
label { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 3px; }
input, select, textarea { padding: 8px 10px; border: 1px solid #c8d2e4; border-radius: 8px; font-size: 14px; font-family: inherit; background: #fff; }
input:focus, select:focus { outline: 2px solid var(--navy-2); border-color: var(--navy-2); }
button, .btn { background: var(--navy); color: #fff; border: 0; padding: 9px 16px; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; display: inline-block; }
button:hover, .btn:hover { background: var(--navy-2); }
button.magenta { background: var(--magenta); }
button.ghost { background: #fff; color: var(--navy); border: 1px solid #c8d2e4; }
button.small { padding: 5px 10px; font-size: 13px; }

.alert { border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; border: 1px solid; }
.alert.bad { background: #fdeaea; border-color: #f5c2c2; color: #7f1d1d; }
.alert.warn { background: #fef3e2; border-color: #f3d9a4; color: #7c2d12; }
.alert.info { background: #e8edf8; border-color: #c8d2e4; color: var(--navy); }
.muted { color: var(--muted); font-size: 13px; }
.right { text-align: right; }

.login-box { max-width: 380px; margin: 80px auto; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 28px; }
.login-box h1 { text-align: center; }
.login-box .field { margin-bottom: 14px; }
.login-box input { width: 100%; }
.login-box button { width: 100%; margin-top: 6px; background: var(--magenta); }
.login-hint { font-size: 12.5px; color: var(--muted); margin-top: 14px; line-height: 1.6; }

/* ── Bong bóng hỏi đáp góc phải (mọi trang đã đăng nhập) ───────────────── */
.hd-goc-nut { position: fixed; right: 18px; bottom: 18px; z-index: 900; width: 52px; height: 52px;
  border-radius: 50%; border: none; background: var(--navy); color: #fff; font-size: 24px;
  cursor: pointer; box-shadow: 0 4px 14px rgba(16,40,91,.35); }
.hd-goc-nut:hover { background: var(--magenta); }
.hd-goc-panel { position: fixed; right: 18px; bottom: 80px; z-index: 900; width: 400px; max-width: calc(100vw - 36px);
  max-height: 70vh; display: flex; flex-direction: column; background: #fff; border: 1px solid #dbe3f0;
  border-radius: 14px; box-shadow: 0 10px 34px rgba(16,40,91,.25); padding: 12px 14px; }
.hd-goc-dau { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.hd-goc-dau span { display: flex; align-items: center; gap: 8px; }
.hd-goc-dong { border: none; background: none; cursor: pointer; font-size: 15px; color: var(--muted); }
.hd-goc-form { display: flex; gap: 6px; }
.hd-goc-form input { flex: 1; }
.hd-goc-kq { overflow-y: auto; margin-top: 10px; font-size: 13.5px; }
.hd-goc-the { border: 1px solid #dbe3f0; border-radius: 10px; padding: 8px 10px; margin-top: 8px; }
.hd-goc-the ul { margin: 6px 0 0 16px; padding: 0; }
.hd-goc-the li { margin-bottom: 3px; }
.hd-goc-the a { font-size: 12.5px; }
.hd-goc-nguon { color: var(--muted); font-size: 11.5px; margin: 8px 0 0; }
@media print { .hd-goc-nut, .hd-goc-panel { display: none !important; } }
/* Nút ✕ / bấm lại 💬 phải thắng: thuộc tính hidden bị display:flex ở trên đè — ép ẩn hẳn */
.hd-goc-panel[hidden] { display: none !important; }