/* =============================================================================
   HOÀ GIẢI — gỡ đúng những chỗ reboot của Bootstrap lấn sang phần KHÔNG phải
   control của Portal.

   Nạp SAU CÙNG trong bố cục chung (sau site.css và control-chung.css).

   LUẬT CỦA TỆP NÀY:
     · Càng ít quy tắc càng tốt. Mỗi quy tắc phải ghi rõ ĐÈ CÁI GÌ, VÌ SAO, và ĐO RA
       BẰNG GÌ — nếu không thì ba tháng nữa không ai dám xoá.
     · CHỈ gỡ ở phần khung và nội dung của Portal. TUYỆT ĐỐI không đụng hình thức
       control (.form-control, .ts-wrapper, .tabulator, .btn…) — đó là thứ ta cố tình
       lấy từ His_Site; sửa ở đây là quay lại đúng cái sai đã bị bác ba lần.
     · Mỗi đợt chuyển đổi phải rà lại: quy tắc nào không còn cần thì xoá.

   CÁCH ĐO RA DANH SÁCH NÀY. Dựng hai bản Portal từ cùng một cây mã — một bản có nạp
   thư viện, một bản không — rồi cho Chrome mở 10 trang ở 1440px và so `getComputedStyle`
   của TỪNG phần tử đang hiển thị. Kết quả trước khi có tệp này: 2.869 phần tử hiển thị,
   **9 phần tử lệch kích thước**, **5 kiểu lệch thuộc tính**, tất cả đều do reboot của
   Bootstrap và đều nằm ở chrome của Portal. Ba quy tắc dưới đây gỡ đủ cả 5.
   ========================================================================== */

/* ── 1. Độ đậm của tiêu đề ───────────────────────────────────────────────────
   Đè cái gì: `h1,h2,h3,h4,h5,h6 { margin-bottom:.5rem; font-weight:500; line-height:1.2 }`
              của bootstrap.min.css.
   Vì sao: site.css đặt cỡ chữ, khoảng cách và line-height cho tiêu đề nhưng KHÔNG đặt
   font-weight — Portal vẫn dựa vào mặc định `bold` của trình duyệt. Bootstrap hạ xuống
   500 nên mọi tiêu đề trang nhạt đi.
   Đo ra: `fontWeight | H1  700 -> 500` (10 lượt, đúng một lần mỗi trang) và
          `fontWeight | H3  700 -> 500` (1 lượt).
   Xoá được khi: site.css đặt font-weight tường minh cho h1..h6. */
h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
}

/* ── 2. Lề của đoạn văn ──────────────────────────────────────────────────────
   Đè cái gì: `p { margin-top: 0; margin-bottom: 1rem }` của bootstrap.min.css.
   Vì sao: Portal dựa vào mặc định `margin-block: 1em` của trình duyệt — LỀ THEO CỠ CHỮ
   CỦA CHÍNH ĐOẠN. Bootstrap bỏ lề trên và ép lề dưới thành 1rem CỐ ĐỊNH 16px, nên chữ
   nhỏ (.rat-nho cỡ 11px) bị thừa khoảng trống dưới và mất khoảng thở trên.
   Đo ra: `marginTop | P  16px -> 0px` (2 lượt), `marginTop | P.rat-nho  11px -> 0px`,
          `marginBottom | P.rat-nho  11px -> 16px`.
   Dùng `em` chứ KHÔNG dùng `rem`: phải trả đúng hành vi theo cỡ chữ của mặc định
   trình duyệt, `rem` là chính cái làm hỏng.
   Xoá được khi: site.css đặt margin tường minh cho mọi đoạn văn. */
p {
    margin-block: 1em;
}

/* ── 3. Lề dưới của nhãn ─────────────────────────────────────────────────────
   Đè cái gì: `label { display: inline-block; margin-bottom: .5rem }` của bootstrap.min.css.
   Vì sao: Portal dựa vào mặc định `margin: 0` của trình duyệt cho <label>. Bootstrap thêm
   8px lề dưới, làm mọi nhãn ô tích đội thẻ chứa nó cao lên.
   Đo ra: `marginBottom | LABEL.o-tick  0px -> 8px`; kéo theo `.the` ở trang Nhận diện hệ
   thống cao 191px -> 195px (7 phần tử) và ở trang Khoá API 171px -> 179px (6 phần tử).
   CHỈ trả lề, KHÔNG trả `display`: `display: inline-block` của Bootstrap không gây lệch
   nào trong phép đo (nhãn của Portal đều có lớp riêng đặt display), và `.o-tick` dùng
   `inline-flex` của control-chung.css vốn đã thắng vì độ đặc hiệu cao hơn.
   Xoá được khi: site.css đặt margin tường minh cho <label>. */
label {
    margin-bottom: 0;
}

/* ── 4. Bề rộng của <legend> ─────────────────────────────────────────────────
   Đè cái gì: `legend { display:block; width:100%; max-width:100%; … }` của bootstrap.min.css.
   Vì sao: mặc định trình duyệt cho <legend> co vừa nội dung. Bootstrap ép rộng 100% khung,
   nên nhãn nhóm trong <fieldset> chiếm trọn dòng và kéo giãn bố cục quanh nó.
   Đo ra: `LEGEND.o-nhan` ở trang Khoá API rộng 48px -> 329px — gấp gần bảy lần.
   Chỉ trả bề rộng; `display:block` trùng với mặc định trình duyệt nên không phải trả.
   Xoá được khi: site.css đặt width tường minh cho <legend>. */
legend {
    width: auto;
    max-width: none;
}

/* ── 5. text-align của thân trang ────────────────────────────────────────────
   Đè cái gì: `body { … text-align: left }` của bootstrap.min.css, kế thừa xuống toàn bộ cây.
   Vì sao: KHÔNG đổi gì khi nhìn — với văn bản trái-sang-phải thì `start` và `left` cho
   cùng kết quả. Vẫn trả lại vì hai lẽ: `start` là giá trị theo hướng viết, đúng hơn về
   ngữ nghĩa; và nếu để nguyên thì MỌI lần so kiểu tính toán về sau đều mở đầu bằng
   ~600 khác biệt giả, làm chìm mất khác biệt thật.
   Đo ra: `textAlign  start -> left` trên gần như mọi phần tử.
   Xoá được khi: không bao giờ — trừ khi gỡ hẳn bootstrap.min.css. */
body {
    text-align: start;
}

/* ══ HAI CHỖ LỆCH CÓ THẬT MÀ CỐ Ý KHÔNG SỬA ═════════════════════════════════

   (a) `INPUT.o-tick-hop`: fontFamily Arial -> phông của trang, fontSize 13,33px -> 13px,
       lineHeight normal -> 20,15px, do `input { font-family: inherit; font-size: inherit;
       line-height: inherit }` của reboot.
       KHÔNG sửa vì KHÔNG nhìn thấy được: đó là ô tích, không vẽ chữ nào, và
       control-chung.css đã ghim `.o-tick-hop { width: 16px; height: 16px }` nên cỡ chữ
       không đổi được kích thước. Phép đo xác nhận ô tích không lệch một điểm ảnh nào.

   (b) `INPUT.o-tep` trên trang Nhận diện hệ thống: CAO 33px -> 36px, kéo thẻ chứa nó
       191px -> 195px. Nguyên nhân: reboot có
           ::-webkit-file-upload-button { font: inherit; -webkit-appearance: button }
       nên nút «Choose File» do trình duyệt vẽ bên trong ô đổi từ Arial 13,33px sang phông
       của trang 14px, và ô tệp vốn KHÔNG ghim được chiều cao (chiều cao chạy theo nút bên
       trong — xem ghi chú ở .o-tep trong control-chung.css).
       KHÔNG sửa, vì sửa thì phải ghim `font: 400 13.3333px Arial` — một con số của riêng
       một trình duyệt — vào CSS của dự án, để giữ lại 3px trên MỘT ô mà đợt 4 sẽ thay hẳn
       bằng `fileBoxStyle`. Và chữ trong ô tệp nay khớp phông toàn trang, tức là đẹp hơn
       chứ không xấu đi. Ghi ra đây để đó là lựa chọn có chủ đích, không phải chỗ sót. */

/* Hết. KHÔNG có quy tắc nào khác: phép đo không tìm thấy chỗ lấn nào nữa.
   Đặc biệt KHÔNG đụng tới:
     · .form-control, .ts-wrapper, .tabulator, .btn — hình thức control, cố tình lấy của His_Site;
     · <table> của Portal — Bootstrap 4 chỉ đặt hình thức cho .table, lớp Portal không dùng;
     · <dialog> của Portal (ADR-0016) — bootStrapCustom chỉ đặt cho .modal-*, không giao nhau;
     · bản in — _LayoutIn.cshtml là bố cục RIÊNG, không đi qua bố cục chung nên không nạp
       thư viện; mục 9 của control-chung.css giữ nguyên. */

