/* HQ-71 đợt 2 — TRANG BẢN GHI KIỂU ODOO (form_view.js, bản mẫu ui-concepts C-record): breadcrumb + pager dính đầu, hàng nút trái + statusbar
   mũi tên phải, tờ "sheet" (smart button · tiêu đề · lưới trường 2 cột · tab cũ), chatter cột phải 400 px (< 1200 px xếp dưới).
   Chỉ dùng token màu của app.css (sáng / tối); không gradient / glow / blur. Cam (--accent) chỉ cho việc "hôm nay". */

/* ---- Hàng breadcrumb + pager (cùng kiểu control panel đợt 1) ---- */
.main > .fv-cp { position: sticky; top: -16px; z-index: 20; margin: -16px -16px 0; padding: 0 16px; height: 49px; background: var(--surface);
  border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 12px; }
.fv-bc { display: flex; align-items: baseline; gap: 8px; min-width: 0; font-size: 18px; line-height: 24px; }
.fv-bc a { color: var(--brand); text-decoration: none; font-weight: 500; flex: none; }
.fv-bc a:hover { text-decoration: underline; }
.fv-bc-sep { color: var(--muted); flex: none; }
.fv-bc-cur { font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.fv-pager { margin-left: auto; display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 14px; flex: none; font-variant-numeric: tabular-nums; }
.fv-pager[hidden] { display: none; }
.fv-pager .pager-arr { min-height: 28px; width: 28px; padding: 0; display: inline-grid; place-items: center; color: var(--ink); }

/* ---- Lưới trang: trái (hàng nút + sheet) · phải (chatter) ---- */
.fv { display: grid; grid-template-columns: minmax(0, 1fr) 400px; align-items: start; margin: 0 -16px -24px 0; }
.fv-main { min-width: 0; padding: 8px 16px 24px 0; }
.fv-chat { position: sticky; top: 33px; height: calc(100vh - var(--shell-top, 0px) - 49px); overflow-y: auto; background: var(--surface); border-left: 1px solid var(--line);
  overscroll-behavior: contain; }

/* ---- Hàng nút (trái) + statusbar (phải) ---- */
.fv-sbar { display: flex; align-items: center; gap: 8px 12px; margin: 0 0 8px; min-height: 34px; flex-wrap: wrap; }
.fv-acts.pj-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; justify-content: flex-start; flex: 0 1 auto; min-width: 0; }
.fv-acts .btn { min-height: 32px; padding: 4px 12px; }
.fv-acts .btn.pj-sec { background: var(--surface-2); border-color: var(--surface-2); color: var(--ink); font-weight: 500; }
.fv-acts .btn.pj-sec:hover { border-color: var(--btn-border); background: var(--hover); }
.fv-acts .btn.mint.pj-sec { background: var(--ok); border-color: var(--ok); color: var(--on-ok); }
.fv-acts .btn.pj-danger { color: var(--err); }
.fv-acts .btn[hidden] { display: none; }
.fv-more { position: relative; order: 99; }
.fv-more > summary { list-style: none; width: 32px; min-height: 32px; padding: 0; display: grid; place-items: center; background: var(--surface-2); border-color: var(--surface-2); }
.fv-more > summary::-webkit-details-marker { display: none; }
.fv-more-pop { position: absolute; left: 0; top: calc(100% + 4px); z-index: 30; min-width: 220px; display: flex; flex-direction: column; padding: 4px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-pop); }
.fv-more-pop .btn { justify-content: flex-start; text-align: left; border-color: transparent; background: none; min-height: 32px; font-weight: 400; color: var(--ink); text-decoration: none; }
.fv-more-pop .btn.pj-danger { color: var(--err); }
.fv-more-pop .btn:hover { background: var(--hover); }
.fv-more-pop .btn[hidden] { display: none; }

.fv-stb { margin-left: auto; display: flex; height: 32px; border: 1px solid var(--line); border-radius: var(--radius-btn); overflow: hidden; background: var(--surface);
  flex: none; max-width: 100%; }
.fv-stb .path-step { position: relative; flex: none; display: flex; align-items: center; min-width: 0; margin: 0; padding: 0 16px 0 24px; border: 0; border-radius: 0; clip-path: none;
  background: var(--surface); color: var(--muted); font: inherit; font-size: 13px; font-weight: 500; white-space: nowrap; text-align: left; line-height: 30px; }
.fv-stb .path-step:first-child { padding-left: 14px; }
.fv-stb .path-step:last-child { padding-right: 14px; }
/* mũi tên: ô vuông xoay 45° cùng nền với bước, viền phải + trên */
.fv-stb .path-step::after { content: ""; position: absolute; right: -9px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%) rotate(45deg); background: inherit;
  border-top: 1px solid var(--line); border-right: 1px solid var(--line); z-index: 1; }
.fv-stb .path-step:last-child::after { display: none; }
.fv-stb .path-step.done { color: var(--ink); }
.fv-stb .path-step.current { background: var(--brand-soft); color: var(--brand-dark); font-weight: 700; }
.fv-stb .path-step.current.bad { background: var(--err-soft); color: var(--err); }
.fv-stb .path-step.can { cursor: pointer; }
.fv-stb .path-step.can:hover { background: var(--hover); color: var(--brand-dark); }
.fv-stb .path-step.blocked { cursor: not-allowed; opacity: 1; color: var(--soon); text-decoration: none; }

/* ---- Tờ sheet ---- */
.fv-sheet { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-btn); box-shadow: var(--shadow); min-width: 0; }
.fv-smarts { display: flex; justify-content: flex-end; flex-wrap: wrap; border-bottom: 1px solid var(--line); min-height: 53px; }
.fv-smarts[hidden] { display: none; }
.fv-smart { display: flex; align-items: center; gap: 10px; padding: 0 14px; height: 52px; min-width: 120px; border: 0; border-left: 1px solid var(--line); background: none;
  color: var(--muted); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.fv-smart:hover { background: var(--hover); }
.fv-smart svg.ic { width: 20px; height: 20px; color: var(--muted); }
.fv-smart-t { display: flex; flex-direction: column; min-width: 0; }
.fv-smart b { font-size: 14px; line-height: 18px; color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fv-smart-t > span { font-size: 12px; line-height: 16px; white-space: nowrap; }
.fv-smart.money b { color: var(--brand); }
.fv-smart-wait { color: var(--soon); font-weight: 500; }

.fv-title { padding: 16px 24px 0; }
.fv-ref { font-size: 13px; color: var(--muted); }
.fv-title h1 { margin: 2px 0 0; font-size: 22px; line-height: 30px; font-weight: 700; letter-spacing: -.01em; overflow-wrap: anywhere; }
.fv-rib { display: flex; flex-wrap: wrap; gap: 6px 8px; margin-top: 6px; align-items: center; }
.fv-rib .badge { margin: 0; }

.fv-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 32px; padding: 12px 24px 4px; }
.fv-col { min-width: 0; }
.fv-fld { display: grid; grid-template-columns: 136px minmax(0, 1fr); align-items: center; min-height: 28px; font-size: 14px; gap: 8px; }
.fv-k { font-weight: 600; font-size: 13px; color: var(--ink); }
.fv-v { color: var(--ink); min-width: 0; display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fv-v > span:not(.fv-av):not(.badge) { overflow: hidden; text-overflow: ellipsis; }
.fv-v a { color: var(--brand); text-decoration: none; }
.fv-v a:hover { text-decoration: underline; }
.fv-v .muted { color: var(--muted); }
.fv-v button.fv-assign { border: 0; background: none; padding: 0; color: var(--brand); font: inherit; cursor: pointer; text-align: left; display: inline-flex; align-items: center; gap: 6px; }
.fv-v button.fv-assign:hover { text-decoration: underline; }
.fv-av { flex: none; width: 22px; height: 22px; border-radius: 4px; display: inline-grid; place-items: center; background: var(--brand); color: var(--on-brand);
  font-size: 10px; font-weight: 700; letter-spacing: .02em; }
.fv-av.empty { background: var(--surface-2); color: var(--muted); border: 1px dashed var(--btn-border); }
.fv-av.sys { background: var(--muted); }

.fv-guide.path-guide { margin: 8px 24px 0; padding: 6px 10px; font-size: 12.5px; border: 0; border-left: 3px solid var(--line); border-radius: 0; background: var(--surface-2); }
.fv-block { padding: 8px 24px 0; }
.fv-block:empty { display: none; }
.fv-block > .pp-strip, .fv-block > .card, .fv-block > section { box-shadow: none; }
.fv-sheet > .msg { margin: 10px 24px 0; }

/* tab trong sheet (giữ nguyên nội dung cũ, chỉ đổi khung) */
.fv-sheet > nav.tabs { padding: 0 24px; margin: 14px 0 0; gap: 2px; border-bottom: 1px solid var(--line); }
.fv-sheet > nav.tabs a { padding: 8px 14px; border: 1px solid transparent; border-bottom: 0; border-radius: var(--radius-btn) var(--radius-btn) 0 0; margin-bottom: -1px;
  font-weight: 500; color: var(--muted); }
.fv-sheet > nav.tabs a.active { border-color: var(--line); background: var(--surface); color: var(--ink); font-weight: 700; box-shadow: none; }
.fv-sheet > nav.tabs a .tab-count { background: none; color: var(--muted); padding: 0; min-width: 0; margin-left: 4px; font-size: 12px; font-weight: 500; }
.fv-sheet > section[data-panel] { padding: 16px 24px 20px; }
.fv-sheet > section[data-panel] > .card:first-child { box-shadow: none; }

/* ---- Chatter cột phải ---- */
.fc-tb { display: flex; align-items: center; gap: 6px; padding: 10px 16px; border-bottom: 1px solid var(--line-2); position: sticky; top: 0; background: var(--surface); z-index: 2; flex-wrap: wrap; }
.fc-tb .btn { min-height: 30px; padding: 3px 10px; }
.fc-tb .btn:not(.primary) { background: var(--surface-2); border-color: var(--surface-2); }
.fc-tb .btn:not(.primary).on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-dark); }
.fc-tb .btn svg.ic { width: 14px; height: 14px; vertical-align: -2px; }
.fc-count { margin-left: auto; color: var(--muted); font-size: 12.5px; }
.fc-compose { padding: 10px 16px 4px; border-bottom: 1px solid var(--line-2); }
.fc-compose[hidden] { display: none; }
.fc-compose .chatter-composer { position: static; margin: 0; padding: 0; border: 0; box-shadow: none; background: none; }
.fc-compose .composer-foot .muted { font-size: 11.5px; }
.fc-sep { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; color: var(--muted); padding: 12px 16px 4px; }
.fc-sep::before, .fc-sep::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.fc-sec { padding: 4px 16px 4px; }
.fc-empty { margin: 4px 0 6px; color: var(--muted); font-size: 13px; }
.fc-link { border: 0; background: none; padding: 2px 0 6px; color: var(--brand); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.fc-link:hover { text-decoration: underline; }
.fc-pa { display: flex; gap: 10px; padding: 6px 0; font-size: 13px; line-height: 18px; }
.fc-dot { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; color: #fff; margin-top: -1px; }
.fc-dot svg.ic { width: 12px; height: 12px; stroke-width: 2.25; }
.fc-dot.late { background: var(--err); }
.fc-dot.today { background: var(--accent); }
.fc-dot.plan { background: var(--ok); }
.fc-due { font-weight: 700; }
.fc-due.late { color: var(--err); }
.fc-due.today { color: var(--accent-text); }
.fc-due.plan { color: var(--ok-text); }
.fc-meta { color: var(--muted); font-size: 12px; }
.fc-acts { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 3px; }
.fc-acts button { border: 0; background: none; padding: 0; color: var(--brand); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.fc-acts button:hover { text-decoration: underline; }
.fc-msg { display: flex; gap: 10px; padding: 8px 16px; font-size: 13px; line-height: 18px; }
.fc-mb { min-width: 0; flex: 1; }
.fc-h { display: flex; align-items: baseline; gap: 6px; }
.fc-who { font-weight: 700; }
.fc-when { color: var(--muted); font-size: 12px; }
.fc-trk { color: var(--muted); margin-top: 2px; overflow-wrap: anywhere; }
.fc-trk b { color: var(--ink); font-weight: 600; }
.fc-trk .badge { font-size: 11px; padding: 0 6px; }
.fc-arr { color: var(--soon); margin: 0 2px; }
.fc-field { color: var(--muted); }
.fc-text { margin-top: 2px; white-space: pre-wrap; overflow-wrap: anywhere; }
.fc-note { background: var(--accent-soft); border-radius: var(--radius-btn); padding: 6px 8px; margin-top: 4px; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); }
:root[data-theme="dark"] .fc-note { background: var(--surface-2); }
.fc-feed .tl-more { padding: 8px 16px 16px; }

/* ---- Khách hàng 360 trong sheet: thông tin nhanh lên lưới trường, cột "about" bỏ ---- */
.fv-sheet .c360-money { margin: 12px 24px 0; }
.fv-sheet .c360-grid { grid-template-columns: minmax(0, 1fr) 300px; grid-template-areas: "main side"; padding: 16px 24px 4px; margin: 0; }
.fv-sheet .c360-about { display: none; }
.fv-sheet .c360-legal { margin: 0 24px 20px; box-shadow: none; }
.fv-sheet .c360-pnl { margin: 0; }
.fv-sheet .ctm-wrap, .fv-sheet #ctTeams:not(:empty) { margin: 0; }
.fv-sheet #ctTeams:not(:empty) { padding: 12px 24px 0; }

/* ---- Màn hẹp: chatter xuống dưới sheet ---- */
@media (max-width: 1199px) {
  .fv { grid-template-columns: minmax(0, 1fr); margin: 0; }
  .fv-main { padding: 8px 0 16px; }
  .fv-chat { position: static; height: auto; max-height: none; overflow: visible; border: 1px solid var(--line); border-radius: var(--radius-btn); box-shadow: var(--shadow); }
  .fc-tb { position: static; }
}
@media (max-width: 900px) {
  .fv-sbar { flex-direction: column; align-items: stretch; }
  .fv-stb { margin-left: 0; overflow-x: auto; scrollbar-width: none; }
  .fv-stb::-webkit-scrollbar { display: none; }
  .fv-stb .path-step { flex: 1 0 auto; justify-content: center; }
  .fv-fields { grid-template-columns: minmax(0, 1fr); }
  .fv-sheet .c360-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "side"; }
}
@media (max-width: 760px) {
  .main > .fv-cp { margin: -12px -12px 0; padding: 0 12px; top: 0; height: 44px; }
  .fv-bc { font-size: 15px; }
  .fv-acts.pj-actions { width: auto; }
  .fv-acts.pj-actions .pj-sec { display: inline-flex; align-items: center; }   /* project_detail.css ẩn .pj-sec ≤ 760 px (menu cũ) — form view vẫn hiện, xuống dòng */
  .fv-title { padding: 12px 14px 0; }
  .fv-title h1 { font-size: 19px; line-height: 26px; }
  .fv-fields { padding: 10px 14px 4px; }
  .fv-fld { grid-template-columns: 112px minmax(0, 1fr); }
  .fv-v { white-space: normal; flex-wrap: wrap; padding: 3px 0; }
  .fv-guide.path-guide { margin: 8px 14px 0; }
  .fv-block { padding: 8px 14px 0; }
  .fv-sheet > .msg { margin: 10px 14px 0; }
  .fv-sheet > nav.tabs { padding: 0 8px; }
  .fv-sheet > nav.tabs a { padding: 8px 10px; }
  .fv-sheet > section[data-panel] { padding: 12px 12px 16px; }
  .fv-smarts { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .fv-smarts::-webkit-scrollbar { display: none; }
  .fv-smart { min-width: 0; flex: none; padding: 0 12px; }
  .fv-smart:first-child { border-left: 0; }
  .fv-sheet .c360-money { margin: 10px 14px 0; }
  .fv-sheet .c360-grid { padding: 12px 14px 4px; }
  .fv-sheet .c360-legal { margin: 0 14px 16px; }
  .fv-sheet #ctTeams:not(:empty) { padding: 10px 14px 0; }
}

/* ---- HQ-71 đợt 3: thân sheet cho trang chưa có lưới trường riêng (Báo giá, Phiếu thu, Đề xuất chi…) + bảng rộng + in ---- */
.fv-body { padding: 4px 24px 0; min-width: 0; }
.fv-body > .fv-fields { padding: 8px 0 4px; }
.fv-body > .msg, .fv-body > .card { margin: 10px 0 0; }
.fv-sheet .fv-body > .table-wrap { margin-top: 12px; }
.fv-sheet > .fv-guide.path-guide + .msg, .fv-sheet > .fv-guide.path-guide + .qt-linkbox { margin-top: 10px; }
.fv-sheet > .qt-linkbox { margin: 10px 24px 0; }
/* Bảng rộng trong sheet (hạng mục ở tab Phụ lục, dòng chi, phân bổ…): cuộn ngang TRONG khung bảng, chữ không vỡ từng ký tự */
.fv-sheet .table-wrap { overflow-x: auto; max-width: 100%; }
.fv-sheet .table-wrap > table.data { min-width: 100%; }
.fv-sheet table.data th, .fv-sheet table.data td.num { white-space: nowrap; }
.fv-sheet table.data td { overflow-wrap: normal; word-break: normal; }
@media print {
  .fv-cp, .fv-sbar, .fv-chat, .fv-smarts, .fv-guide { display: none !important; }
  .fv, .fv-main { display: block !important; margin: 0 !important; padding: 0 !important; }
  .fv-sheet { border: 0 !important; box-shadow: none !important; }
}
.fv-body > .fv-guide.path-guide { margin: 8px 0 0; }
/* Bảng hạng mục (tab Phụ lục & hạng mục) trong sheet hẹp hơn trang cũ: cột nút (↑ ↓ + Mục con · Sửa · Xoá) xuống hàng thứ hai của hạng mục
   thay vì ép cột tên / thành tiền vỡ dòng; tiêu đề cột một dòng. Chỉ khi màn rộng (> 900 px — màn hẹp đã có bố cục dọc riêng). */
.fv-sheet .pi-table { container-type: inline-size; }
@media (min-width: 901px) {
  @container (max-width: 1080px) {
    .pi-row, .no-money .pi-row { grid-template-columns: 26px minmax(160px, 2.4fr) 96px minmax(150px, 1.5fr) minmax(110px, 1fr) 118px 62px; }
    .pi-row > .c-period { white-space: nowrap; }
    .pi-headrow > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .pi-headrow > span:last-child { display: none; }
    .pi-row > .c-act { grid-column: 2 / -1; justify-content: flex-start; flex-wrap: nowrap; gap: 4px; margin-top: -2px; }
    .pi-row > .c-act:empty { display: none; }
  }
}
.fv-body .fv-v { white-space: normal; flex-wrap: wrap; }   /* lưới chuyển từ highlights cũ: giá trị nhiều dòng (VD "đã chi / còn lại" + lần chi gần nhất) không bị cắt */
.fv-body .fv-v > div { flex-basis: 100%; }