:root {
  --gf-green-900: #14532d;
  --gf-green-700: #15803d;
  --gf-green-600: #16a34a;
  --gf-green-50:  #f0fdf4;
  --gf-ink: #1f2a24;
  --gf-muted: #6b7a72;
  --gf-line: #e1e6e3;
  --gf-bg: #f5f7f6;
  --bs-primary: #15803d;
  --bs-primary-rgb: 21,128,61;
  --bs-link-color: #15803d;
  --bs-link-color-rgb: 21,128,61;
  --bs-link-hover-color: #14532d;
  --bs-body-font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}
body { background: var(--gf-bg); color: var(--gf-ink); font-size: .95rem; }
a { text-decoration: none; }
.btn-primary { --bs-btn-bg: var(--gf-green-700); --bs-btn-border-color: var(--gf-green-700); --bs-btn-hover-bg: var(--gf-green-900); --bs-btn-hover-border-color: var(--gf-green-900); --bs-btn-active-bg: var(--gf-green-900); --bs-btn-disabled-bg: var(--gf-green-700); --bs-btn-disabled-border-color: var(--gf-green-700); }
.btn-outline-primary { --bs-btn-color: var(--gf-green-700); --bs-btn-border-color: var(--gf-green-700); --bs-btn-hover-bg: var(--gf-green-700); --bs-btn-hover-border-color: var(--gf-green-700); --bs-btn-active-bg: var(--gf-green-900); }
.form-control:focus, .form-select:focus { border-color: #86d29f; box-shadow: 0 0 0 .2rem rgba(21,128,61,.15); }
.form-check-input:checked { background-color: var(--gf-green-700); border-color: var(--gf-green-700); }
.text-primary { color: var(--gf-green-700) !important; }

/* ---- Thanh điều hướng ---- */
.gf-nav { background: var(--gf-green-900); }
.gf-nav .navbar-brand { font-weight: 700; letter-spacing: .2px; color: #fff; }
.gf-nav .navbar-brand .bi { color: #86efac; }
.gf-nav .nav-link { color: rgba(255,255,255,.82); border-radius: 6px; padding: .45rem .65rem !important; white-space: nowrap; }
.gf-nav .nav-link:hover, .gf-nav .nav-link.active { color: #fff; background: rgba(255,255,255,.1); }
.gf-nav .badge { font-size: .7rem; }
.gf-nav .dropdown-menu { border-radius: 8px; border-color: var(--gf-line); }

.announcement { background: #fffbeb; border-bottom: 1px solid #fde68a; color: #92400e; font-size: .9rem; }

/* ---- Khung ---- */
.page-title { font-size: 1.35rem; font-weight: 650; margin: 0; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.card { border-color: var(--gf-line); border-radius: 10px; }
.card-header { background: #fff; border-bottom-color: var(--gf-line); font-weight: 600; }
.muted { color: var(--gf-muted); }
.small-muted { color: var(--gf-muted); font-size: .82rem; }
.table > :not(caption) > * > * { padding: .6rem .7rem; }
.table thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .3px; color: var(--gf-muted); font-weight: 600; background: #fafbfa; white-space: nowrap; }
.table-hover tbody tr { cursor: pointer; }
footer.gf-footer { color: var(--gf-muted); font-size: .8rem; }

/* ---- Trang chủ ---- */
.hero { background: linear-gradient(135deg, var(--gf-green-900), var(--gf-green-700)); color: #fff; border-radius: 14px; padding: 2.2rem 2rem; }
.hero h1 { font-size: 1.6rem; font-weight: 700; }
.hero .search-box { max-width: 640px; }
.hero .search-box .form-control { border: 0; padding: .8rem 1rem; font-size: 1rem; }
.hero .search-box .btn { padding-left: 1.2rem; padding-right: 1.2rem; }
.quick-card { display: block; background: #fff; border: 1px solid var(--gf-line); border-radius: 12px; padding: 1.1rem; color: var(--gf-ink); height: 100%; transition: .15s; }
.quick-card:hover { border-color: #86d29f; box-shadow: 0 4px 14px rgba(20,83,45,.08); transform: translateY(-1px); color: var(--gf-ink); }
.quick-card .ico { width: 42px; height: 42px; border-radius: 10px; background: var(--gf-green-50); color: var(--gf-green-700); display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; margin-bottom: .6rem; }
.quick-card .title { font-weight: 600; }

/* ---- Trạng thái / ưu tiên ---- */
.badge-st { display: inline-block; padding: .28rem .55rem; border-radius: 999px; font-size: .75rem; font-weight: 600; white-space: nowrap; }
.st-new { background: #dbeafe; color: #1e40af; }
.st-progress { background: #fef3c7; color: #92400e; }
.st-waiting { background: #ede9fe; color: #5b21b6; }
.st-resolved { background: #dcfce7; color: #166534; }
.st-closed { background: #e5e7eb; color: #374151; }
.st-cancelled { background: #fee2e2; color: #991b1b; }
.pr { font-size: .78rem; font-weight: 600; white-space: nowrap; }
.pr::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; vertical-align: 1px; }
.pr-low::before { background: #9ca3af; }
.pr-normal::before { background: #3b82f6; }
.pr-high::before { background: #f59e0b; }
.pr-urgent::before { background: #dc2626; }
.pr-urgent { color: #b91c1c; }
.overdue { color: #b91c1c; font-weight: 600; }
.code { font-family: Consolas, "SFMono-Regular", monospace; font-weight: 600; color: var(--gf-green-900); }

/* ---- Bộ đếm ---- */
.stat { background: #fff; border: 1px solid var(--gf-line); border-radius: 12px; padding: .9rem 1rem; display: block; color: var(--gf-ink); }
.stat:hover { border-color: #86d29f; color: var(--gf-ink); }
.stat .v { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.stat .l { font-size: .8rem; color: var(--gf-muted); }
.stat.active { border-color: var(--gf-green-700); box-shadow: inset 0 0 0 1px var(--gf-green-700); }
.stat.danger .v { color: #b91c1c; }

/* ---- Chi tiết ticket ---- */
.timeline { list-style: none; padding: 0; margin: 0; }
.msg { border: 1px solid var(--gf-line); border-radius: 10px; background: #fff; margin-bottom: .9rem; }
.msg .msg-h { padding: .55rem .9rem; border-bottom: 1px solid var(--gf-line); display: flex; justify-content: space-between; gap: .5rem; font-size: .85rem; background: #fafbfa; border-radius: 10px 10px 0 0; }
.msg .msg-b { padding: .8rem .9rem; white-space: pre-wrap; word-break: break-word; }
.msg.staff { border-left: 3px solid var(--gf-green-700); }
.msg.internal { background: #fffbeb; border-color: #fde68a; }
.msg.internal .msg-h { background: #fef3c7; }
.avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--gf-green-50); color: var(--gf-green-900); font-size: .75rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; margin-right: .4rem; }
dl.meta { display: grid; grid-template-columns: 120px 1fr; gap: .45rem .75rem; margin: 0; font-size: .9rem; }
dl.meta dt { color: var(--gf-muted); font-weight: 500; }
dl.meta dd { margin: 0; word-break: break-word; }
dl.extra-meta { grid-template-columns: 170px 1fr; background: var(--gf-green-50); border: 1px solid #d1fae5; border-radius: 8px; padding: .6rem .8rem; }
.history { font-size: .82rem; }
.history li { padding: .35rem 0; border-bottom: 1px dashed var(--gf-line); }
.history li:last-child { border-bottom: 0; }
.att { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid var(--gf-line); border-radius: 8px; padding: .3rem .6rem; margin: 0 .4rem .4rem 0; background: #fff; font-size: .85rem; color: var(--gf-ink); }
.att:hover { border-color: #86d29f; }
.rating input { display: none; }
.rating label { font-size: 1.7rem; color: #d1d5db; cursor: pointer; padding: 0 2px; }
.rating label:hover, .rating label:hover ~ label, .rating input:checked ~ label { color: #f59e0b; }
.rating { display: inline-flex; flex-direction: row-reverse; }
.stars { color: #f59e0b; letter-spacing: 1px; }

/* ---- Thiết kế form ---- */
.field-row { cursor: default; }
.field-row .drag-handle { cursor: grab; font-size: 1.1rem; }
.field-row.dragging { opacity: .5; background: var(--gf-green-50); }
.field-ico { width: 34px; height: 34px; border-radius: 8px; background: var(--gf-green-50); color: var(--gf-green-700); display: inline-flex; align-items: center; justify-content: center; }
.preview-card .card-body { background: #fbfcfb; }

/* ---- Wiki ---- */
.kb-cat { display: flex; gap: .8rem; align-items: flex-start; }
.kb-cat .ico { flex: 0 0 auto; }
.kb-list a.item { display: block; padding: .75rem .9rem; border-bottom: 1px solid var(--gf-line); color: var(--gf-ink); }
.kb-list a.item:last-child { border-bottom: 0; }
.kb-list a.item:hover { background: var(--gf-green-50); }
.kb-list .item .t { font-weight: 600; }
.kb-content { font-size: 1rem; line-height: 1.7; }
.kb-content h1, .kb-content h2, .kb-content h3 { font-weight: 650; margin-top: 1.4rem; }
.kb-content h2 { font-size: 1.25rem; }
.kb-content h3 { font-size: 1.08rem; }
.kb-content img { max-width: 100%; height: auto; border: 1px solid var(--gf-line); border-radius: 8px; margin: .5rem 0; }
.kb-content pre, .kb-content code { background: #f3f4f6; border-radius: 6px; }
.kb-content pre { padding: .8rem; }
.kb-content blockquote { border-left: 3px solid var(--gf-green-700); padding: .3rem .9rem; color: #374151; background: var(--gf-green-50); }
.ql-container { min-height: 360px; font-size: 1rem; }
.ql-toolbar.ql-snow, .ql-container.ql-snow { border-color: var(--gf-line); }
.ql-toolbar.ql-snow { border-radius: 8px 8px 0 0; background: #fafbfa; }
.ql-container.ql-snow { border-radius: 0 0 8px 8px; background: #fff; }
.suggest-box { border: 1px solid #bbf7d0; background: var(--gf-green-50); border-radius: 10px; }

/* ---- Đăng nhập ---- */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, var(--gf-green-900) 0%, var(--gf-green-700) 55%, #e8f5ec 55.1%); padding: 1rem; }
.login-card { width: 100%; max-width: 410px; border-radius: 14px; box-shadow: 0 18px 40px rgba(20,83,45,.18); }
.login-card .logo { width: 54px; height: 54px; border-radius: 14px; background: var(--gf-green-50); color: var(--gf-green-700); display: inline-flex; align-items: center; justify-content: center; font-size: 1.6rem; }

@media (max-width: 768px) {
  dl.meta { grid-template-columns: 105px 1fr; }
  .hero { padding: 1.5rem 1.2rem; }
}
@media print {
  .gf-nav, .no-print, footer { display: none !important; }
  body { background: #fff; }
}