/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   🔐 BỘ ĐỒ HOẠ CỦA CÁC MÀN HÌNH MẬT KHẨU — nền động `.dn-nen` + thẻ kính `.dn-the`
   ═══════════════════════════════════════════════════════════════════════════════════════════════

   ⭐ ĐỢT 1569 (việc o876) — TÁCH RA TỪ KHỐI `<style>` NỘI TUYẾN CỦA `Layout/LayoutTrong.razor`.
   Anh Tiến 30/08/2026: *"tiếp tục đồ hoạ và phát triển trang đăng nhập, hộp đăng nhập, hộp đổi mật
   khẩu và trang chủ"*.

   🩸 VÌ SAO PHẢI TÁCH — ca thật, cùng họ với ca của đợt 1565c:
   Trang `/doi-mat-khau` là màn hình **nối tiếp** trang đăng nhập ở CẢ HAI đường vào của nó
     · người dùng mật khẩu mặc định bị `MainLayout` giữ lại đó ngay sau khi đăng nhập (đợt 390),
     · nút 🔑 trên chính màn hình đăng nhập dẫn thẳng sang (đợt 439).
   Nhưng nó ⛔ KHÔNG dùng `LayoutTrong` (nó đòi đăng nhập nên phải giữ thanh nav của app) ⇒ khối
   `<style>` khai `.dn-*` nằm trong layout kia **không với tới**, và trang ở lại thẻ `card` trần
   của Bootstrap. Người dùng đi hai bước liền nhau thì màn hình **đổi kiểu giữa chừng** — đúng thứ
   đợt 1565c vừa chữa cho `/quen-mat-khau`.

   🔑 CÁCH CHỮA — DỜI, ⛔ KHÔNG CHÉP. Chép bộ luật sang một tệp thứ hai là hai bản phải giữ khớp
   mãi mãi, mà ngày chúng lệch thì ⛔ không cơ chế nào kêu (bài học đợt 1565c). Nay bộ luật ở ĐÚNG
   MỘT CHỖ, nạp trong `App.razor` nên mọi trang dùng được.

   ⚠ VỊ TRÍ NẠP LÀ MỘT PHẦN CỦA LUẬT — `App.razor` nạp tệp này **SAU CÙNG**, sau `bo-mau/ap-dung.css`
   và `tu-cap-nhat.css`. Khối `<style>` nội tuyến đời cũ render trong `<body>`, tức sau MỌI thẻ
   `<link>`, nên nó thắng theo THỨ TỰ ở mọi cặp luật cùng độ đặc hiệu. Đưa tệp này lên trước là đổi
   cán cân ấy — và đổi **lặng lẽ**: build xanh, test xanh, chỉ vài thuộc tính trên thẻ đăng nhập
   đổi chủ. ⛔ Đừng xê dịch thẻ nạp.

   🔴 `.dn-nen` ⛔ KHÔNG CHỈ LÀ MỘT CÁI NỀN — NÓ LÀ **DẤU MIỄN TRỪ** CỦA CẢ HỆ CHỦ ĐỀ.
   `app.css` chừa thẻ đăng nhập khỏi bộ luật màu bằng `:not(.dn-nen *)` ở **hàng chục** luật (nút ·
   ô nhập · vòng focus · giao diện cổ điển). ⇒ Thẻ `.dn-the` chỉ giữ đúng diện mạo khi nó **nằm
   trong** một khối `.dn-nen`; đặt `.dn-the` trần ở giữa một trang bình thường là bộ màu đè lên và
   thẻ trông **gần giống** — lệch một cách khó chỉ tên. Đây là lý do `/doi-mat-khau` dùng biến thể
   `.dn-san` (khai ở cuối tệp) chứ ⛔ không bỏ lớp `.dn-nen` đi cho gọn.

   ⛔ Tệp này ⛔ KHÔNG phải chỗ để thêm luật cho màn hình khác. Nó chỉ phục vụ bốn màn hình đứng
   trên nền đăng nhập; luật dùng chung của cả app thì ở `app.css` (quy tắc #18).
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */

.dn-nen {
    min-height: 100vh;
    min-height: 100dvh;   /* ⭐ 1500 — dòng lui cho DI ĐỘNG, xem LuatDonViKhungNhin */
    display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden;
    background: linear-gradient(135deg, #001744, #002169 35%, #0a3d91 70%, #002169);
    background-size: 300% 300%;
    animation: dn-troi 18s ease infinite;
}
@keyframes dn-troi { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

/* Lớp ẢNH NỀN TỔNG KHO (đợt 373 — anh yêu cầu): thả ảnh vào wwwroot/hinh-nen-tong-kho.jpg là hiện
   mờ dưới gradient thương hiệu (chữ trên thẻ vẫn đọc rõ); CHƯA có file thì lớp trong suốt, nền
   gradient động giữ nguyên — an toàn với 404, không cần đổi mã khi anh thay ảnh khác. */
/* ⭐ ĐỢT 878 (việc o109) — MỘT ẢNH MỖI LƯỢT MỞ TRANG, thay cho vòng luân phiên ba lớp của đợt 677.
   Anh Tiến 19/08/2026: *"mỗi lần chỉ hiển thị 1 ảnh, và làm nó rõ hơn một tí"*.

   🔑 MỐC XOAY Ở ĐÂY KHÁC MỐC CỦA TRANG CHỦ — cố ý, và đây là chỗ dễ hiểu ngược nhất:
     · Trang chủ gieo theo PHIÊN ĐĂNG NHẬP (thẻ xác thực) nên ảnh đứng yên suốt phiên.
     · Màn hình này thì NGƯỜI TA CHƯA ĐĂNG NHẬP — chưa có phiên, chưa có tên, không có gì để gieo.
       Mốc gần "mỗi lần đăng nhập" nhất mà nó có được là LƯỢT MỞ TRANG (mỗi yêu cầu GET một ảnh).
   ⚠ Chỉ nhích ở lượt GET (xem khối mã cuối tệp): gõ sai mật khẩu là một lượt POST, đổi ảnh ngay lúc
     người ta đang đọc câu báo lỗi thì thành nhấp nháy vô cớ.

   ⛔ KHÔNG còn hoạt hoạ nào ở lớp này ⇒ khối `prefers-reduced-motion` của đợt 677 đã bỏ (nó chỉ
     dùng để tắt hoạt hoạ đổi ảnh). Nền gradient `dn-troi` vẫn chạy như cũ, không đụng tới.
   ⚠ Ảnh bản gốc 1600×900 (158–222 KB); `?v=` do App.razor lo cho tài nguyên tĩnh khác, riêng ảnh nền
     nằm trong thuộc tính style nội tuyến nên KHÔNG có dấu bản — chấp nhận được vì tên tệp cố định
     và ảnh không đổi theo bản phát hành.

   📏 Độ đục .34 → .50 (anh xin "rõ hơn một tí"). Chữ vẫn đọc rõ vì nó nằm trên THẺ ĐĂNG NHẬP đục
     94%, không nằm thẳng trên ảnh — nâng nền không hạ độ đọc của một dòng nào trên thẻ. */
.dn-anh { position: absolute; inset: 0; pointer-events: none; opacity: .50;
          background-position: center; background-size: cover; background-repeat: no-repeat; }

/* lưới mờ kiểu bản mạch */
.dn-nen::before {
    content: ""; position: absolute; inset: 0; opacity: .12; pointer-events: none;
    background-image: linear-gradient(rgba(255,255,255,.25) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255,255,255,.25) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}

/* các đốm sáng trôi lơ lửng */
.dn-dom { position: absolute; border-radius: 50%; filter: blur(2px); pointer-events: none;
          background: radial-gradient(circle, rgba(244,123,32,.85), transparent 70%);
          animation: dn-lo-lung 9s ease-in-out infinite; }
.dn-dom.xanh { background: radial-gradient(circle, rgba(120,180,255,.8), transparent 70%); }
@keyframes dn-lo-lung { 0%, 100% { transform: translateY(0) scale(1); opacity: .55; }
                         50% { transform: translateY(-46px) scale(1.25); opacity: .95; } }

/* thẻ đăng nhập kiểu kính mờ, hiện dần khi mở trang */
.dn-the { position: relative; z-index: 1;
          background: rgba(255,255,255,.94); backdrop-filter: blur(10px);
          border: 1px solid rgba(255,255,255,.5); border-radius: 18px;
          box-shadow: 0 24px 70px rgba(0,10,40,.55);
          animation: dn-hien .7s ease both; }
@keyframes dn-hien { from { opacity: 0; transform: translateY(26px) scale(.97); }
                      to { opacity: 1; transform: none; } }

.dn-the .form-control { border-radius: 10px; padding: .6rem .8rem; transition: box-shadow .2s, border-color .2s; }
.dn-the .form-control:focus { border-color: #0a3d91; box-shadow: 0 0 0 .2rem rgba(10,61,145,.18); }
.dn-the .btn-primary { border-radius: 10px; padding: .6rem;
                       background: linear-gradient(120deg, #0a3d91, #002169); border: 0;
                       font-weight: 600; letter-spacing: .4px; transition: transform .15s, box-shadow .15s; }
.dn-the .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0,23,68,.45); }

/* ⭐ ĐỢT 1562 (việc o854) — màu tiêu đề thẻ dời khỏi `style` nội tuyến của DangNhap.razor.
   🔑 Style nội tuyến THẮNG mọi luật CSS ⛔ không mang `!important` ⇒ nó ghim chữ ở đúng một mã màu
     và ⛔ không cách nào đổi từ bên ngoài. Dời vào lớp thì màu ở đây **y như trước**, mà ngày nào
     cần đổi cho một bối cảnh khác thì còn đường. ⓘ Đợt 1562 đã đo và chốt **giữ thẻ kính trắng**
     (xem khối 🔴 trong ManHinhTiepKhach.razor), nên hiện ⛔ KHÔNG có bản đè nào cho nền tối. */
.dn-tieu-de { color: #002169; letter-spacing: .5px; }

/* ═══ ⭐ ĐỢT 1577 (việc o882) — TÊN APP LÀ CHỮ ĐỒ HOẠ, KÈM GẠCH CHÂN THƯƠNG HIỆU ═══

   Anh Tiến 31/08/2026: *"anh cần thêm các hiệu ứng ấn tượng và hiện đại, chữ cũng cần đồ hoạ"*.
   `TKNB` là chữ đầu tiên người ta đọc ở đường vào phần mềm, và tới trước đợt này nó là một dòng chữ
   navy phẳng — chỗ đáng làm đồ hoạ nhất mà chưa ai đụng.

   🔴 DẢI MÀU ĐI TRỌN TRONG VÙNG ĐẬM, ⛔ TUYỆT ĐỐI ĐỪNG NHÉT CAM THƯƠNG HIỆU VÀO MẶT CHỮ. Đã đo bằng
     công thức WCAG (`LuatTuongPhan`) trên nền thẻ trắng:
       · `#002169` (navy) …… 15,3:1  ✅   · `#0a3d91` …… 10,7:1 ✅   · `#1b6fd0` (mốc SÁNG NHẤT) … 4,96:1 ✅
       · `#F47B20` (cam) …… **2,6:1** ⛔ — trượt cả ngưỡng 3:1 của chữ lớn.
     Mốc sáng nhất của dải cố ý dừng ở `#1b6fd0` để **cả dải đạt 4,5:1** — tức ngưỡng của chữ THƯỜNG,
     ⛔ không phải mượn ngưỡng nới cho chữ lớn. Sắc cam vẫn có mặt, nhưng ở **gạch chân** bên dưới —
     một hình đồ hoạ, ⛔ không phải chữ ai đó phải đọc.

   🔑 Bọc `@supports` để chiều fail là **chữ navy đặc y như trước đợt này**. ⛔ Đừng gỡ lớp bọc rồi
     khai `color: transparent` ở ngoài: trình duyệt ⛔ không hiểu luật cắt nền sẽ cho ra **tên app vô
     hình ngay giữa màn hình đăng nhập của 433 tài khoản**, mà build xanh và test xanh.
   ⚠ `text-shadow` ⛔ không được dùng ở mặt chữ trong suốt (bóng vẽ theo HÌNH chữ nên lộ qua lòng nét,
     bài học `.tk-gio` đợt 1562) — ở đây chữ nằm trên nền trắng nên vốn ⛔ không cần bóng.
   ⚠ Vệt sáng chạy 7 giây một vòng, ⛔ không nhanh hơn: đây là màn hình người ta dừng lại vài giây để
     gõ mật khẩu, một vệt loang loáng ngay cạnh ô nhập là thứ kéo mắt khỏi việc đang làm. */
@supports (background-clip: text) or (-webkit-background-clip: text) {
    .dn-tieu-de {
        background-image: linear-gradient(100deg,
            #002169 0%, #0a3d91 24%, #1b6fd0 42%, #0a3d91 60%, #002169 100%);
        background-size: 240% 100%;
        -webkit-background-clip: text; background-clip: text;
        -webkit-text-fill-color: transparent; color: transparent;
        animation: dn-chu-anh-kim 7s linear infinite;
    }
}

@keyframes dn-chu-anh-kim {
    from { background-position: 0% 50%; }
    to   { background-position: 240% 50%; }
}

/* GẠCH CHÂN — nơi sắc cam thương hiệu được phép xuất hiện.
   ⚠ Dùng `::after` của chính tiêu đề chứ ⛔ không thêm thẻ vào markup: `<h4>` này nằm trong bốn màn
     hình khác nhau (đăng nhập · hộp thoại tiếp khách · quên mật khẩu · đổi mật khẩu) — thêm thẻ là
     phải sửa cả bốn rồi giữ chúng khớp nhau mãi mãi.
   ⚠ `::after` của một phần tử có `background-clip: text` KHÔNG bị cắt theo chữ — luật cắt nền chỉ áp
     cho hộp của chính phần tử, ⛔ không lan xuống con. */
.dn-tieu-de::after {
    content: "";
    display: block;
    width: 46px; height: 3px;
    margin: .35rem auto 0;
    border-radius: 3px;
    background: linear-gradient(90deg, transparent, #F47B20 30%, #ffb26b 50%, #F47B20 70%, transparent);
}

/* Chip bọc logo — trên nền trắng thì chip trắng, tức vô hình và vô hại; nó chỉ hiện hình khi thẻ
   nằm trên nền tối của hộp thoại tiếp khách (xem `.tk-hop .dn-logo-chip`). */
.dn-logo-chip { display: inline-flex; align-items: center; justify-content: center; }

/* vệt cam thương hiệu chạy ngang đầu thẻ */
.dn-vet { height: 4px; border-radius: 18px 18px 0 0;
          background: linear-gradient(90deg, #F47B20, #ffb26b 45%, #F47B20);
          background-size: 200% 100%; animation: dn-troi 6s linear infinite; }

/* ═══ ⭐ ĐỢT 1569 (việc o876) — BIẾN THỂ `.dn-san`: NỀN ĐĂNG NHẬP **NHÚNG TRONG APP** ═══

   Dùng cho màn hình vẫn phải giữ thanh nav (`/doi-mat-khau`). Nó là **cùng một cái nền**, chỉ khác
   ở chỗ ⛔ không chiếm trọn khung nhìn.

   🔑 Vì sao phải mang theo lớp `.dn-nen` chứ ⛔ không khai một lớp mới độc lập: `app.css` chừa thẻ
   đăng nhập khỏi hệ chủ đề bằng `:not(.dn-nen *)`. Bỏ lớp ấy đi là bộ màu đè lên nút và ô nhập của
   thẻ ⇒ hai màn hình đi liền nhau lại khác nhau, đúng thứ đợt này đi chữa. Xem khối 🔴 ở đầu tệp.

   ⚠ `min-height` phải ghi đè ở **(0,2,0)** (`.dn-nen.dn-san`), ⛔ đừng viết `.dn-san` trần: một lớp
   đơn chỉ HOÀ với `.dn-nen`, thắng thua khi ấy do THỨ TỰ trong tệp — một lượt sắp xếp lại khối là
   khối nội dung cao vọt trọn khung nhìn mà ⛔ không câu lỗi nào.
   ⓘ `min-height: 0` ở đây ⛔ không dính luật `100vh`/`100dvh` (LuatDonViKhungNhin) — nó ⛔ không thêm
   đơn vị khung nhìn nào, nó GỠ đơn vị ấy đi. */
.dn-nen.dn-san {
    min-height: 0;
    border-radius: 20px;
    padding: 2.5rem 1rem;
    box-shadow: 0 18px 48px rgba(0, 10, 40, .28);
}

/* Bên trong sân nhúng thì bỏ bớt độ nảy của hiệu ứng mở thẻ: thẻ ở đây ⛔ không phải thứ đầu tiên
   người ta thấy khi mở trang (thanh nav và tiêu đề app đã đứng sẵn ở trên), nên một cú trôi 26px
   thành ra giật ở giữa trang. Giữ phần mờ dần — nó vẫn nói "khối này vừa hiện ra". */
.dn-san .dn-the { animation-name: dn-hien-nhe; }
@keyframes dn-hien-nhe { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
