/* Ngân hàng đề 360 — trang đăng nhập của nhân sự (index.html) và trang vào học của học sinh (vao-hoc.html). S14a3.
   Màu, phông theo khung chung: navy #12283f, vàng #e9b949, trắng; Be Vietnam Pro (phong.css).
   Điểm nhấn duy nhất: phiếu trả lời trắc nghiệm — mỗi bước làm bài kiểm tra là một dòng có bốn ô A B C D, một ô tô vàng như logo. */
:root {
  --dn-navy: #12283f; --dn-navy2: #1c3a5c; --dn-navy3: #24476d;
  --dn-vang: #e9b949; --dn-vang-chu: #946f12; --dn-vang-nhat: #fdf6e3;
  --dn-chu: #111827; --dn-chu2: #374151; --dn-mo: #5b6472; --dn-tren-navy: #c9d6e4; --dn-vach-navy: rgba(255, 255, 255, .16);
  --dn-nen: #f4f6f9; --dn-vien: #cbd2db; --dn-vach: #dde2e8;
}
body.dn { margin: 0; background: var(--dn-nen); color: var(--dn-chu); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
.dn-khung { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 32px; box-sizing: border-box; }

/* ---------- Đầu trang navy: thanh thương hiệu, giới thiệu, thẻ đăng nhập ---------- */
.dn-dau-thanh { background: var(--dn-navy); color: #fff; }
.dn-dau { background: var(--dn-navy); color: #fff; padding: 0 0 72px; }
.dn-thanh { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; }
.dn-hieu { display: flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; font-weight: 700; font-size: 18px; letter-spacing: .005em; min-width: 0; }
.dn-hieu img { width: 36px; height: 36px; display: block; flex: none; border-radius: 9px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .22); }
.dn-hieu span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dn-sang-hs { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 1.5px solid var(--dn-vang); border-radius: 999px;
  color: var(--dn-vang); text-decoration: none; font-weight: 600; font-size: 14.5px; white-space: nowrap; line-height: 1.2; }
.dn-sang-hs:hover { background: rgba(233, 185, 73, .12); }
.dn-sang-hs svg { width: 18px; height: 18px; flex: none; }

.dn-luoi { padding-top: 40px; display: grid; grid-template-columns: minmax(0, 7fr) minmax(360px, 5fr); grid-template-areas: "gioi the" "phieu the";
  column-gap: 72px; row-gap: 40px; align-items: start; }
.dn-gioi { grid-area: gioi; }
.dn-the { grid-area: the; }
.dn-phieu { grid-area: phieu; }

.dn-gioi h1 { margin: 0; color: #fff; font-size: 42px; line-height: 1.14; font-weight: 700; letter-spacing: -.015em; max-width: 16em; text-wrap: balance; }
.dn-dan { margin: 20px 0 0; color: var(--dn-tren-navy); font-size: 17px; line-height: 1.65; max-width: 38em; }

/* Phiếu trả lời: sáu bước, mỗi bước một dòng; cột vạch định vị ở mép trái như phiếu tô ô thật */
.dn-phieu { position: relative; border: 1px solid var(--dn-vach-navy); border-radius: 14px; padding: 20px 24px 6px 48px; background: rgba(255, 255, 255, .025); }
.dn-phieu::before { content: ""; position: absolute; left: 18px; top: 24px; bottom: 24px; width: 8px;
  background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, .34) 0 5px, transparent 5px 17px); border-radius: 1px; }
.dn-phieu-ten { margin: 0 0 4px; font-size: 14px; font-weight: 600; color: var(--dn-tren-navy); }
.dn-phieu ol { list-style: none; margin: 0; padding: 0; }
.dn-phieu li { display: grid; grid-template-columns: 26px auto minmax(0, 1fr); column-gap: 18px; align-items: start; padding: 15px 0; border-top: 1px dashed rgba(255, 255, 255, .15); }
.dn-phieu li:first-child { border-top: 0; }
.dn-so { font-size: 15px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; line-height: 22px; text-align: right; }
.dn-o { display: flex; gap: 6px; padding-top: 1px; }
.dn-o i { width: 20px; height: 20px; border-radius: 50%; box-sizing: border-box; border: 1.5px solid rgba(255, 255, 255, .5); color: rgba(255, 255, 255, .72);
  font-style: normal; font-size: 9.5px; font-weight: 700; line-height: 17px; text-align: center; }
.dn-o i.to { background: var(--dn-vang); border-color: var(--dn-vang); color: var(--dn-navy); }
.dn-viec { min-width: 0; }
.dn-viec b { display: block; color: #fff; font-size: 16px; font-weight: 600; line-height: 22px; }
.dn-viec span { display: block; margin-top: 3px; color: var(--dn-tren-navy); font-size: 14.5px; line-height: 1.55; }
.dn-mon { margin: 4px 0 0; padding: 14px 0 12px; border-top: 1px solid var(--dn-vach-navy); color: var(--dn-tren-navy); font-size: 14px; }
.dn-mon b { color: #fff; font-weight: 600; }

/* Ô được tô lần lượt khi trang mở — khoảnh khắc chuyển động duy nhất của trang */
@keyframes dn-to { from { background: transparent; border-color: rgba(255, 255, 255, .5); color: rgba(255, 255, 255, .72); transform: scale(.82); }
                   to { background: var(--dn-vang); border-color: var(--dn-vang); color: var(--dn-navy); transform: scale(1); } }
.dn-phieu li .dn-o i.to { animation: dn-to .32s cubic-bezier(.3, .7, .4, 1) both; animation-delay: calc(.35s + var(--thu, 0) * .14s); }
@media (prefers-reduced-motion: reduce) { .dn-phieu li .dn-o i.to { animation: none; } }

/* ---------- Thẻ đăng nhập (nền trắng) ---------- */
.dn-the { background: #fff; color: var(--dn-chu); border-radius: 16px; padding: 32px 32px 28px; }
.dn-the h2 { margin: 0; font-size: 24px; line-height: 1.25; font-weight: 700; color: var(--dn-navy); letter-spacing: -.005em; }
.dn-the .dn-cho { margin: 6px 0 22px; color: var(--dn-mo); font-size: 14.5px; }
.dn-o-nhap { display: block; margin: 0 0 16px; }
.dn-o-nhap > span { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 600; color: var(--dn-chu2); }
.dn input[type=email], .dn input[type=password], .dn input[type=text] {
  width: 100%; box-sizing: border-box; height: 48px; padding: 0 14px; border: 1px solid var(--dn-vien); border-radius: 10px; background: #fff;
  font: inherit; font-size: 16px; color: var(--dn-chu); transition: border-color .15s, box-shadow .15s; }
.dn input::placeholder { color: #9aa3ae; }
.dn input:focus { outline: none; border-color: var(--dn-navy); box-shadow: 0 0 0 3px rgba(233, 185, 73, .45); }
.dn-mk { position: relative; }
.dn-mk input { padding-right: 52px; }
.dn-hien { position: absolute; right: 4px; top: 4px; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 8px;
  background: transparent; color: var(--dn-mo); cursor: pointer; }
.dn-hien:hover { color: var(--dn-navy); background: var(--dn-nen); }
.dn-hien:focus-visible { outline: 2px solid var(--dn-navy); outline-offset: 0; }
.dn-hien svg { width: 20px; height: 20px; }
.dn-hien .tat { display: none; }
.dn-hien[aria-pressed="true"] .bat { display: none; }
.dn-hien[aria-pressed="true"] .tat { display: block; }
.dn-nut { width: 100%; height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 10px;
  background: var(--dn-navy); color: #fff; font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; transition: background .15s; }
.dn-nut:hover { background: var(--dn-navy3); }
.dn-nut:focus-visible { outline: 3px solid var(--dn-vang); outline-offset: 2px; }
.dn-nut:disabled { opacity: .6; cursor: progress; }
.dn-nut.vang { background: var(--dn-vang); color: var(--dn-navy); }
.dn-nut.vang:hover { background: #f0c662; }
.dn-nut.vang:focus-visible { outline-color: var(--dn-navy); }
.dn-phu { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 14px; font-size: 14.5px; }
.dn-lk { background: none; border: 0; padding: 0; font: inherit; color: var(--dn-navy); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 3px; cursor: pointer; }
.dn-lk:hover { color: var(--dn-vang-chu); }
.dn-lk:focus-visible, .dn a:focus-visible { outline: 2px solid var(--dn-vang); outline-offset: 2px; border-radius: 3px; }
.dn-loi { margin: 0 0 14px; padding: 10px 12px; border-radius: 10px; background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; font-size: 14.5px; }
.dn-tot { margin: 0 0 14px; padding: 10px 12px; border-radius: 10px; background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; font-size: 14.5px; }
.dn-the form > p.dn-ghi { margin: 0 0 18px; color: var(--dn-mo); font-size: 14.5px; }
.dn-dk { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--dn-vach); color: var(--dn-mo); font-size: 14.5px; }
.dn-dk a { color: var(--dn-navy); font-weight: 600; }
.dn-hs { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: start; margin-top: 18px; padding: 14px 16px; border-radius: 12px; background: var(--dn-nen); }
.dn-hs .bt { width: 40px; height: 40px; border-radius: 10px; background: var(--dn-navy); color: var(--dn-vang); display: grid; place-items: center; }
.dn-hs .bt svg { width: 22px; height: 22px; }
.dn-hs b { display: block; color: var(--dn-navy); font-size: 15px; }
.dn-hs p { margin: 2px 0 6px; color: var(--dn-mo); font-size: 14px; line-height: 1.5; }
.dn-hs a { color: var(--dn-navy); font-weight: 600; font-size: 14.5px; }

/* ---------- Mỗi người một việc ---------- */
.dn-vai { padding: 64px 0 56px; }
.dn-vai h2 { margin: 0 0 28px; font-size: 28px; line-height: 1.2; font-weight: 700; color: var(--dn-navy); letter-spacing: -.01em; }
.dn-vai-ds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.dn-vai-ds li { padding: 2px 24px 0; border-left: 1px solid var(--dn-vach); }
.dn-vai-ds li:first-child { padding-left: 0; border-left: 0; }
.dn-vai-ds svg { width: 26px; height: 26px; color: var(--dn-navy); display: block; margin-bottom: 14px; }
.dn-vai-ds h3 { margin: 0 0 6px; font-size: 17px; line-height: 1.35; font-weight: 600; color: var(--dn-navy); }
.dn-vai-ds p { margin: 0; color: var(--dn-chu2); font-size: 15px; line-height: 1.6; }
.dn-dia-chi { display: inline-block; margin-top: 10px; padding: 3px 9px; border-radius: 6px; background: var(--dn-vang-nhat); color: var(--dn-vang-chu);
  font-weight: 600; font-size: 14px; word-break: break-all; text-decoration: none; }
a.dn-dia-chi:hover { text-decoration: underline; }

.dn-chan { border-top: 1px solid var(--dn-vach); padding: 22px 0 28px; color: var(--dn-mo); font-size: 14px; }
.dn-chan .dn-khung { display: flex; flex-wrap: wrap; column-gap: 28px; row-gap: 6px; align-items: center; }
.dn-chan a { color: var(--dn-navy); font-weight: 600; }

/* ---------- Trang vào học của học sinh ---------- */
body.dn-trang-hs { background: var(--dn-navy); min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.dn-hs-khung { width: min(440px, 100% - 32px); margin: 0 auto; padding: 28px 0 24px; flex: 1; display: flex; flex-direction: column; }
.dn-hs-dau { display: flex; align-items: center; gap: 12px; color: #fff; font-weight: 700; font-size: 17px; text-decoration: none; }
.dn-hs-dau img { width: 40px; height: 40px; border-radius: 10px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .22); }
.dn-hs-khung h1 { margin: 32px 0 6px; color: #fff; font-size: 34px; line-height: 1.15; font-weight: 700; letter-spacing: -.015em; }
.dn-hs-khung .dn-dan { margin: 0 0 22px; font-size: 16px; }
.dn-trang-hs .dn-the { padding: 26px 24px 24px; }
.dn-ma input { text-transform: uppercase; letter-spacing: .12em; font-weight: 600; }
.dn-pin input { letter-spacing: .32em; font-weight: 700; font-size: 20px; }
.dn-pin input::placeholder { letter-spacing: .28em; font-weight: 400; }
.dn-goi-y { margin: -10px 0 14px; font-size: 14px; color: var(--dn-mo); }
.dn-goi-y.co { color: #166534; font-weight: 600; }
.dn-goi-y.khong { color: #9a3412; }
.dn-vao-phien { margin: 0 0 18px; padding: 10px 12px; border-radius: 10px; background: var(--dn-vang-nhat); border: 1px solid #f1d58a; color: #6b4f0c; font-size: 14.5px; }
.dn-vao-phien b { letter-spacing: .08em; }
.dn-hs-duoi { margin: 18px 4px 0; color: var(--dn-tren-navy); font-size: 14.5px; line-height: 1.6; }
.dn-hs-duoi a { color: #fff; font-weight: 600; }
.dn-hs-chan { margin-top: auto; padding-top: 28px; color: rgba(201, 214, 228, .8); font-size: 13px; }

/* ---------- Màn hình hẹp ---------- */
@media (max-width: 1080px) {
  .dn-luoi { grid-template-columns: minmax(0, 1fr); grid-template-areas: "gioi" "the" "phieu"; row-gap: 32px; }
  .dn-the { max-width: 520px; }
  .dn-vai-ds { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
  .dn-vai-ds li:nth-child(3) { padding-left: 0; border-left: 0; }
}
@media (max-width: 640px) {
  .dn-khung { padding: 0 16px; }
  .dn-dau { padding-bottom: 40px; }
  .dn-thanh { min-height: 60px; }
  .dn-hieu { font-size: 16px; gap: 10px; }
  .dn-hieu img { width: 32px; height: 32px; }
  .dn-sang-hs { padding: 8px 12px; font-size: 14px; }
  .dn-sang-hs svg { display: none; }
  .dn-luoi { padding-top: 20px; row-gap: 24px; }
  .dn-phieu li .dn-so { grid-row: 1 / span 2; }
  .dn-gioi h1 { font-size: 29px; line-height: 1.2; }
  .dn-dan { margin-top: 12px; font-size: 15.5px; line-height: 1.6; }
  .dn-the { padding: 24px 20px 22px; border-radius: 14px; }
  .dn-phieu { padding: 16px 16px 4px 38px; }
  .dn-phieu::before { left: 13px; }
  .dn-phieu li { grid-template-columns: 18px minmax(0, 1fr); row-gap: 8px; column-gap: 12px; }
  .dn-phieu li .dn-o { grid-column: 2; grid-row: 1; }
  .dn-phieu li .dn-viec { grid-column: 2; }
  .dn-vai { padding: 44px 0 36px; }
  .dn-vai h2 { font-size: 24px; margin-bottom: 20px; }
  .dn-vai-ds { grid-template-columns: minmax(0, 1fr); row-gap: 26px; }
  .dn-vai-ds li, .dn-vai-ds li:nth-child(3) { padding: 0 0 0 16px; border-left: 3px solid var(--dn-vach); }
  .dn-vai-ds li:first-child { padding-left: 16px; border-left: 3px solid var(--dn-vach); }
  .dn-hs-khung h1 { font-size: 30px; margin-top: 26px; }
}
@media print { .dn-sang-hs, .dn-the form { display: none; } }