/* =============================================================================
   HỘP THOẠI ĐỔI CỠ CHUNG (N15, ADR-0051 mục 10) — phần hình thức của wwwroot/js/hop-thoai.js.
   Đọc ghi chú đầu tệp .js để biết NGUYÊN NHÂN lỗi «kéo cao mà không kéo rộng» và cơ chế mở khoá.
   ========================================================================== */
:root {
  --ht-day-tay-nam: 10px;     /* dải bắt trỏ chuột dọc theo cạnh — tay nắm GÓC to hơn (xem .ht-tay-nam-se) */
  --ht-mau-tay-nam: var(--vien, #cbd5e1);
  --ht-mau-tay-nam-diem: var(--xanh, #1d4ed8);
}

/* 1. SỬA GỐC lỗi «kéo cao mà không kéo rộng»: .modal-dialog-centered (dialogDiv, thư viện His) là flex
   container HÀNG; .modal-content là flex-item theo trục chính (ngang) nên flex-shrink mặc định (1) tự co
   width về đúng khổ .modal-dialog mỗi lần vẽ lại — dù resize:both hay JS đã đặt width khác. Trục phụ
   (chiều cao) không bị co theo cách đó nên vẫn kéo được — đúng triệu chứng người dùng thấy. Một dòng dưới
   đây sửa cho MỌI hộp thoại Bootstrap của site, kể cả hộp chi tiết bảng điều khiển (khu trang-tong-quan,
   n7 giữ) — không cần sửa file của khu đó. */
.modal-dialog-centered > .modal-content { flex-shrink: 0; min-width: 0; }

/* 1b. Mọi hộp module đã gắn tay nắm riêng (data-ht-gan, đặt bởi hop-thoai.js) tắt hẳn tay cầm resize GỐC
   của trình duyệt — tránh HAI cơ chế đổi cỡ chồng lên nhau ở cùng một góc. Áp cho cả hộp chi tiết bảng
   điều khiển (.dash-modal-ct, tự khai `resize: both` ở bang-dieu-khien.css, khu trang-tong-quan) mà không
   cần sửa tệp đó. !important vì so đặc hiệu thuần tuý (một thuộc tính) sẽ THUA `.dash-modal-ct .modal-
   content` (hai lớp) — không thể chắc luôn thắng chỉ bằng thứ tự nạp CSS. */
[data-ht-gan] { resize: none !important; }

/* 2. Tay nắm — bốn hướng: góc dưới-phải (se), cạnh phải (e), cạnh dưới (s), cạnh trái (w). Không có cạnh
   trên: sát tiêu đề, nơi đó dành để KÉO DỜI (nếu trang tự làm), không phải đổi cỡ. Dải bắt trỏ đủ rộng để
   bấm trúng trên cảm ứng nhưng chỉ hiện viền mảnh — không che nội dung hộp. */
.ht-tay-nam {
  position: absolute;
  z-index: 3;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  background: transparent;
  outline: none;
}
/* Không dùng color-mix() (CssFirefoxEsrTests — Firefox ESR 102/115 bỏ qua lặng lẽ): nền nhấn nhẹ lấy thẳng
   biến --xanh-nhat có sẵn (site.css/che-do-mau.css), đã đúng cả hai chế độ sáng/tối. */
.ht-tay-nam:hover, .ht-tay-nam:focus-visible { background: var(--xanh-nhat); }
.ht-tay-nam:focus-visible { box-shadow: inset 0 0 0 2px var(--ht-mau-tay-nam-diem); }

/* «e» và «s» CHỪA HẲN góc dưới-phải (18px) cho «se» — ba dải cùng z-index:3, nếu chồng lên nhau thì phần tử
   SAU trong DOM (thứ tự chèn: se, e, s, w — xem ganTayNam trong hop-thoai.js) thắng phép bắt trỏ, tức «s»/«e»
   sẽ NUỐT MẤT góc «se» ở đúng vùng hay bấm nhất. Đo được thật: kéo góc để đổi cả hai chiều có lúc chỉ đổi
   được CHIỀU CAO — trúng đúng «s» chứ không phải «se» (Playwright elementFromPoint xác nhận). Chừa góc là
   cách hết ngay từ gốc, không phải chỉ dựa vào z-index cao hơn (vẫn đặt thêm — xem dưới — cho chắc). */
.ht-tay-nam-e { top: 0; right: -2px; bottom: 18px; width: var(--ht-day-tay-nam); cursor: ew-resize; }
.ht-tay-nam-w { top: 0; left: -2px; bottom: 0; width: var(--ht-day-tay-nam); cursor: ew-resize; }
.ht-tay-nam-s { left: 0; right: 18px; bottom: -2px; height: var(--ht-day-tay-nam); cursor: ns-resize; }
.ht-tay-nam-se {
  right: -2px; bottom: -2px; width: 18px; height: 18px; cursor: nwse-resize;
  border-radius: 3px 0 6px 0;
  z-index: 4;
}
.ht-tay-nam-se::after {
  content: ''; position: absolute; right: 3px; bottom: 3px; width: 8px; height: 8px;
  background:
    linear-gradient(135deg, transparent 0 45%, var(--ht-mau-tay-nam) 45% 55%, transparent 55% 100%),
    linear-gradient(135deg, transparent 0 65%, var(--ht-mau-tay-nam) 65% 75%, transparent 75% 100%);
  pointer-events: none;
}

/* Đang kéo (chuột/cảm ứng): khoá lựa chữ toàn trang và giữ đúng con trỏ, kể cả khi trỏ đã ra ngoài dải
   tay nắm mảnh (Pointer Capture vẫn gửi sự kiện move/up về đúng tay nắm, nhưng con trỏ hệ thống theo vị
   trí thật của chuột — nếu không ép cursor ở <body>, giữa lượt kéo trỏ sẽ đổi qua lại theo phần tử bên dưới). */
body.ht-dang-keo { cursor: nwse-resize; }
body.ht-dang-keo * { cursor: inherit !important; }

/* 3. Khung nhìn hẹp (điện thoại, ≤480px): hộp CHIẾM TRỌN màn hình, không cần kéo (yêu cầu N15). !important
   bắt buộc vì kích thước ĐÃ NHỚ trên máy tính (localStorage, xem hop-thoai.js) đặt qua style nội tuyến —
   style nội tuyến luôn thắng luật thường trong @media, chỉ !important mới đè được. data-ht-ngoai do JS gắn
   lên phần tử NGOÀI quyết định RỘNG/vị trí (chính <dialog>; .modal-dialog với hộp thoại Bootstrap) —
   dùng thuộc tính thay vì :has(.modal-content…) vì CSS dự án không được dùng :has() (CssFirefoxEsrTests).
   data-ht-mobile đặt trên phần tử TRONG (chính hộp với <dialog>, .modal-content với Bootstrap) phải ép CAO
   riêng: .modal-dialog-centered canh giữa bằng align-items:center (không stretch), nên chỉ ép .modal-dialog
   cao 100vh KHÔNG kéo .modal-content cao theo — đo được thật: hộp chi tiết dòng sơ đồ ở 430px chỉ cao
   448px dù .modal-dialog đã 100vh. CHỈ đặt trên hộp bo.rieng !== false (xem hop-thoai.js) — hộp chi tiết
   bảng điều khiển (.dash-modal-ct) có hành vi 430 riêng của nó, không ép chồng lên. */
@media (max-width: 480px) {
  [data-ht-ngoai], [data-ht-mobile] {
    position: fixed !important;
    inset: 0 !important;
    left: 0 !important; top: 0 !important; right: 0 !important; bottom: 0 !important;
    margin: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    max-height: none !important;
    border-radius: 0 !important;
    transform: none !important;
  }
  /* «không cần kéo» — ẩn hẳn tay nắm ở khung nhìn này thay vì để đó vô dụng. */
  .ht-tay-nam { display: none !important; }
}

@media (prefers-contrast: more) {
  .ht-tay-nam-se::after { background: var(--o-chu-mau); }
}

@media print {
  .ht-tay-nam { display: none !important; }
}