/* ============================================================
   contract.css — AI Rà soát hợp đồng
   Chỉ nạp ở ra-soat-hop-dong.html. Dùng bảng màu "Mực & Đồng".
   ============================================================ */

/* ---------- Thẻ tóm tắt loại hợp đồng ---------- */
.doc-meta { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: baseline; }
.doc-meta > div { font-size: .88rem; }
.doc-meta .k {
  display: block; font-size: .64rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold);
}
.doc-meta .v { font-weight: 400; color: var(--ink); }

/* ---------- Bộ lọc phát hiện ---------- */
.filter-bar { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; padding: 12px 0 16px; }
.filter-bar .chip { font-size: .72rem; padding: 5px 13px; letter-spacing: .06em; }
.filter-bar .chip .n { opacity: .6; margin-left: 6px; font-variant-numeric: tabular-nums; }

/* ---------- Phát hiện ---------- */
.finding-clause {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: .74rem; font-weight: 500;
  background: transparent; border: 1px solid var(--line-2);
  color: var(--ink-2); border-radius: 2px; padding: 3px 11px;
  cursor: pointer; transition: all .3s var(--ease-out);
}
.finding-clause:hover { border-color: var(--gold); color: var(--gold); }
.finding-src {
  font-size: .62rem; text-transform: uppercase; letter-spacing: .14em;
  padding: 3px 9px; border-radius: 2px; font-weight: 500; border: 1px solid transparent;
}
.finding-src.is-rule { background: var(--info-soft); color: var(--info); border-color: rgba(140, 169, 190, .35); }
.finding-src.is-ai   { background: var(--brass-soft); color: var(--gold); border-color: var(--gold-soft); }
.finding-why { font-size: .9rem; margin: 12px 0 8px; color: var(--ink-2); }
.finding-cites { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }

/* ---------- Bản hợp đồng có đánh dấu ---------- */
.cv {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); min-height: 750px; max-height: 90dvh; overflow-y: auto;
}
.cv-head {
  padding: 14px 16px; border-bottom: 1px solid var(--line);
  background: var(--lacquer-3); position: sticky; top: 0; z-index: 2;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.cv-legend { display: flex; gap: 16px; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); flex-wrap: wrap; }
.cv-legend i { display: inline-block; width: 8px; height: 8px; margin-right: 6px; vertical-align: 0; }
.cv-legend .lg-cao   { background: var(--red); }
.cv-legend .lg-trung { background: var(--gold); }
.cv-legend .lg-thap  { background: var(--info); }

.cv-body { padding: 8px 4px 20px; }
.cv-block {
  padding: 11px 16px; margin: 2px 0;
  border-left: 2px solid transparent;
  white-space: pre-wrap; word-break: break-word;
  font-size: .89rem; line-height: 1.8; color: var(--ink-2);
  scroll-margin-top: calc(var(--header-h) + 12px);
}
.cv-block.is-header { color: var(--gold); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; }
.cv-block.sev-cao   { border-left-color: var(--red); background: var(--red-soft); color: var(--ink); }
.cv-block.sev-trung { border-left-color: var(--gold); background: var(--amber-soft); color: var(--ink); }
.cv-block.sev-thap  { border-left-color: var(--info); background: var(--info-soft); color: var(--ink); }
.cv-block.is-flash { animation: cv-flash 1.4s ease; }
@keyframes cv-flash {
  0%, 40% { box-shadow: inset 0 0 0 1px var(--gold); }
  100%    { box-shadow: inset 0 0 0 1px transparent; }
}

.cv-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 7px; }
.cv-tag {
  font-size: .64rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  border-radius: 2px; padding: 2px 10px; cursor: pointer; border: 1px solid transparent;
}
.cv-tag.sev-cao   { background: var(--red); color: var(--ivory); }
.cv-tag.sev-trung { background: var(--brass-2); color: var(--on-brass); }
.cv-tag.sev-thap  { background: var(--azure-deep); color: var(--ivory); }
.cv-tag:hover { filter: brightness(1.14); }

/* ---------- Lớp phân tích sâu ---------- */
.deep-steps { list-style: none; margin: 12px 0 0; padding: 0; font-size: .84rem; }
.deep-steps li { display: flex; gap: 10px; align-items: baseline; padding: 4px 0; color: var(--ink-3); }
.deep-steps li.is-done { color: var(--ink-2); }
.deep-steps li.is-active { color: var(--gold); font-weight: 500; }
.deep-steps .mark { width: 14px; display: inline-block; text-align: center; }

/* ---------- Trạng thái tải tệp ---------- */
.drop-hint { font-size: .78rem; color: var(--ink-3); }

/* ---------- Phản hồi đa màn hình (Responsive) ---------- */
@media (max-width: 900px) {
  .doc-meta { gap: 8px 16px; }
  .cv { min-height: 500px; max-height: 70dvh; }
  .cv-block { padding: 10px 12px; font-size: .86rem; line-height: 1.7; }
}

@media (max-width: 720px) {
  .cv { max-height: 60dvh; min-height: 380px; }
  .cv-head { position: static; flex-direction: column; align-items: flex-start; gap: 8px; }
  .cv-legend { gap: 10px; font-size: .62rem; }
  .filter-bar { gap: 6px; }
  .filter-bar .chip { font-size: .68rem; padding: 4px 10px; }
  .finding-clause { font-size: .7rem; padding: 2px 8px; }
}

@media (max-width: 480px) {
  .doc-meta > div { font-size: .8rem; }
  .doc-meta .k { font-size: .6rem; }
  .cv { max-height: 50dvh; min-height: 300px; border-radius: 0; }
  .cv-block { padding: 8px 10px; font-size: .84rem; }
  .finding-why { font-size: .85rem; }
}

/* ----- 430px (Khung hình 430 * 873: iPhone 14/15/16 Pro Max) ----- */
@media (max-width: 430px) {
  .cv-block { padding: 8px 10px; font-size: .84rem; }
  .filter-bar .chip { font-size: .68rem; padding: 4px 10px; }
}

/* ----- 412px (Khung hình 412 * 891: Samsung Galaxy S Plus / Pixel Pro) ----- */
@media (max-width: 412px) {
  .doc-meta { gap: 6px 12px; }
  .cv { max-height: 48dvh; }
}

/* ----- 390px (Khung hình 390 * 797: iPhone 12/13/14/15/16 Pro & Standard) ----- */
@media (max-width: 390px) {
  .cv-block { padding: 7px 9px; font-size: .82rem; }
  .finding-clause { font-size: .68rem; padding: 2px 7px; }
  .filter-bar .chip { font-size: .65rem; padding: 3px 8px; }
}

/* ----- 360px (Khung hình 360 * 776: Samsung Galaxy S / Android phổ thông) ----- */
@media (max-width: 360px) {
  .doc-meta > div { font-size: .76rem; }
  .cv { max-height: 45dvh; min-height: 260px; }
  .cv-block { padding: 6px 8px; font-size: .8rem; line-height: 1.6; }
  .finding-why { font-size: .8rem; }
}



/* ============================================================
   HIỆU CHỈNH KHUNG HÌNH THIẾT BỊ — TRANG RÀ SOÁT HỢP ĐỒNG
   ============================================================ */

/* Điện thoại xoay ngang: các bậc phía trên khoá bản hợp đồng ở 45-70%
   chiều cao màn, mà màn ngang chỉ còn khoảng 430px — còn lại chưa tới
   200px, không đọc nổi. Ở tư thế này lấy gần hết chiều cao. */
@media (orientation: landscape) and (max-height: 500px) {
  .cv { max-height: calc(100dvh - 110px); min-height: 220px; }
  .cv-head { position: sticky; top: 0; flex-direction: row; align-items: center; }
  .filter-bar { gap: 5px; }
}

/* Vùng chạm của chip lọc trên máy cảm ứng. */
@media (pointer: coarse) {
  .filter-bar .chip { min-height: 36px; display: inline-flex; align-items: center; }
}

/* Laptop màn thấp (1366x768): bản hợp đồng cao tối thiểu 750px đẩy phần
   phát hiện xuống quá xa dưới nếp gấp. */
@media (min-width: 1025px) and (max-height: 820px) {
  .cv { min-height: 0; height: calc(100dvh - var(--header-h) - 150px); max-height: none; }
}

/* Màn rộng MacBook Pro 16" / iMac: tận dụng chiều cao thật. */
@media (min-width: 1600px) and (min-height: 1000px) {
  .cv { min-height: 880px; }
}

/* Màn siêu hẹp (Galaxy Z Fold màn ngoài 344px). */
@media (max-width: 344px) {
  .cv { max-height: 44dvh; min-height: 240px; }
  .cv-block { padding: 6px 7px; font-size: .78rem; }
  .doc-meta > div { font-size: .74rem; }
  .filter-bar .chip { font-size: .62rem; padding: 3px 7px; }
}