/* Màn khóa: màn ngoài gói, nền mờ hình khối, thẻ kính, nút gradient (docs/admin/MAN_KHOA.md mục 4
   tới 6; bản phác docs/giao_dien/ref/ban_phac_man_khoa.html). Dùng biến của he_thong.css và :root
   của index.html; không sửa he_thong.css. Lớp tiền tố mk- dùng lại được cho khóa từng khối trong
   màn (mốc A5, docs/admin/QUYEN_TINH_NANG.md mục 7.2): .mk-vung.mk-vung-nho bọc một khối.
   Chỉ animate opacity, transform, filter; giảm chuyển động thì tắt mọi animation, transition.
   Thời lượng theo bản phác viết dạng calc(ms * var(--nhip)), đường cong và fill-mode backwards
   theo bộ thông số docs/chuyen_dong (biến của chuyen_dong.css). */

/* ════ Vùng, nền, lớp phủ ════ */
.mk-vung {
  position: relative;
  overflow: hidden;
  min-height: calc(100vh - var(--strip, 66px));
  padding: 22px 24px;
}
.mk-vung::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 35%, rgba(210, 174, 92, .07) 50%, transparent 65%);
  transform: translateX(-120%);
  animation: mk-quet calc(4500ms * var(--nhip)) var(--e-giua) calc(1000ms * var(--nhip)) infinite;
}
.mk-vung-nho {
  min-height: 260px;
  padding: 14px;
  border-radius: var(--r-pn, 6px);
}
.mk-nen {
  min-height: 720px;
  opacity: .95;
  filter: blur(4.5px);
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  animation: mk-mo-nen calc(700ms * var(--nhip)) var(--e-ra) backwards;
}
.mk-nen-nho {
  min-height: 0;
}
.mk-che {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 80px 20px 40px;
  background: radial-gradient(42% 48% at 50% 40%, rgba(var(--toi-rgb, 6, 12, 22), .55), rgba(var(--toi-rgb, 6, 12, 22), .12) 80%);
  overflow-y: auto;
}
.mk-vung-nho .mk-che {
  align-items: center;
  padding: 16px;
}

/* Khối của nền: chỉ hình, không chữ. Màu theo biến hệ thống ở độ đục thấp. */
.mk-k {
  background: var(--vien2);
  border-radius: 2px;
}
.mk-k-dam {
  background: color-mix(in srgb, var(--vien2) 72%, var(--chu2));
}
.mk-k-mat {
  background: var(--mat2);
  border-radius: 3px;
}
.mk-k-nhat {
  background: var(--vien);
}
.mk-k-dong {
  background: color-mix(in srgb, var(--dong) 55%, transparent);
}
.mk-k-len {
  background: color-mix(in srgb, var(--len) 55%, transparent);
}
.mk-k-len.mk-k-nhat {
  background: color-mix(in srgb, var(--len) 30%, transparent);
}
.mk-k-xuong {
  background: color-mix(in srgb, var(--xuong) 45%, transparent);
}
.mk-k-tc {
  background: color-mix(in srgb, var(--tc) 45%, transparent);
}
.mk-k-san {
  background: color-mix(in srgb, var(--san) 70%, transparent);
}
.mk-n-dau {
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
}
.mk-n-chip {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  overflow: hidden;
}
.mk-n-chip > .mk-k {
  flex: 0 0 auto;
}
.mk-n-the {
  background: var(--mat);
  border: 1px solid var(--vien);
  border-radius: 6px;
  padding: 14px;
  margin-bottom: 14px;
  min-width: 0;
}
.mk-n-the-so {
  display: grid;
  gap: 8px;
  margin: 0;
}
.mk-n-luoi4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.mk-n-hang {
  display: grid;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--vien);
}
.mk-n-hang:last-child,
.mk-n-muc:last-child,
.mk-n-thanh:last-child {
  border-bottom: 0;
}
.mk-n-hang-6 {
  grid-template-columns: 2fr repeat(5, minmax(0, 1fr));
}
.mk-n-hang-3 {
  grid-template-columns: 2fr repeat(2, minmax(0, 1fr));
}
.mk-n-muc {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--vien);
}
.mk-n-muc > .mk-k {
  flex: 0 0 auto;
}
.mk-n-hai {
  flex: 1;
  display: grid;
  gap: 7px;
  min-width: 0;
}
.mk-n-o {
  border-radius: 4px;
}
.mk-n-vien {
  border-radius: 3px;
}
.mk-n-nhiet {
  display: grid;
  gap: 3px;
  align-items: center;
  margin-bottom: 3px;
}
.mk-n-nhiet-22 {
  grid-template-columns: 150px repeat(22, minmax(0, 1fr));
}
.mk-n-nhiet-8 {
  grid-template-columns: 72px repeat(8, minmax(0, 1fr));
}
.mk-n-doi {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: 16px;
}
.mk-n-mot {
  grid-template-columns: minmax(0, 1fr);
}
.mk-n-giua {
  display: flex;
  justify-content: center;
}
.mk-n-radar {
  width: 100%;
  max-width: 340px;
}
.mk-s-vien2 {
  fill: none;
  stroke: var(--vien2);
  stroke-width: 2;
}
.mk-s-vien {
  fill: none;
  stroke: var(--vien);
}
.mk-s-dong {
  fill: color-mix(in srgb, var(--dong) 25%, transparent);
  stroke: var(--dong);
  stroke-width: 2;
}
.mk-n-thanh {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 10px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid var(--vien);
}
.mk-n-nen {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 300px;
}
.mk-n-nen-cot {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-width: 0;
}
.mk-n-nen-than {
  width: 100%;
  border-radius: 1px;
}
.mk-n-kl-hang {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 44px;
  margin-top: 8px;
}
.mk-n-kl {
  flex: 1;
  min-width: 0;
}
.mk-nen-mot .mk-n-luoi4 {
  grid-template-columns: minmax(0, 1fr);
}
.mk-nen-mot .mk-n-an-hep {
  display: none;
}

/* ════ Thẻ kính ════ */
.mk-the {
  width: min(500px, 100%);
  background: color-mix(in srgb, var(--mat) 92%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--vien2);
  border-radius: 6px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5), 0 0 0 1px rgba(210, 174, 92, .06) inset;
  overflow: hidden;
  color: var(--chu);
  animation: mk-len calc(550ms * var(--nhip)) var(--e-ra) calc(150ms * var(--nhip)) backwards;
}
/* Thuộc tính hidden luôn thắng display của lớp mk- (tránh khung rỗng còn hiện). */
.mk-the [hidden],
.mk-hop [hidden] {
  display: none !important;
}
.mk-duong-sang {
  height: 2px;
  background: linear-gradient(90deg, transparent, #8A6A2A, #F3D58C, #D2AE5C, transparent);
  background-size: 220% 100%;
  animation: mk-sang calc(3500ms * var(--nhip)) var(--e-giua) infinite;
}
.mk-than {
  padding: 22px 24px 20px;
}
.mk-dong-dau {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.mk-huy {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 500 11px/1 var(--f-so, "IBM Plex Mono", monospace);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dong);
  border: 1px solid rgba(210, 174, 92, .45);
  background: var(--dong-m, rgba(210, 174, 92, .14));
  padding: 6px 9px;
  border-radius: 3px;
}
.mk-huy svg {
  width: 12px;
  height: 12px;
  transform-origin: 50% 70%;
  animation: mk-khoa calc(3200ms * var(--nhip)) var(--e-giua) calc(1000ms * var(--nhip)) infinite;
}
.mk-huy-het {
  color: var(--tc);
  border-color: rgba(232, 197, 71, .45);
  background: rgba(232, 197, 71, .1);
}
.mk-ma-man {
  font: 500 11px var(--f-so, "IBM Plex Mono", monospace);
  color: var(--chu3);
  letter-spacing: .08em;
}
.mk-the h2 {
  font: 600 24px/1.15 var(--f-hien, "Chakra Petch", sans-serif);
  margin: 0 0 6px;
  text-wrap: balance;
}
.mk-mo-ta {
  color: var(--chu2);
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.55;
}
.mk-mo-ta b {
  color: var(--chu);
  font-weight: 500;
}
.mk-the p,
.mk-duoc li > span,
.mk-chan {
  text-wrap: pretty;
}
/* Ba chữ cuối đoạn (man_khoa_nen.js noiChu): white-space là viết tắt gồm text-wrap-mode, nên bộ
   chọn phải mạnh hơn luật text-wrap: pretty của đoạn chứa nó. */
.mk-the .mk-noi,
.mk-duoc li > span .mk-noi {
  white-space: nowrap;
  text-wrap-mode: nowrap;
}
.mk-duoc {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: grid;
  gap: 8px;
}
.mk-duoc li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13.5px;
  line-height: 1.5;
  animation: mk-vao calc(400ms * var(--nhip)) var(--e-ra) backwards;
}
.mk-duoc li:nth-child(1) {
  animation-delay: calc(350ms * var(--nhip));
}
.mk-duoc li:nth-child(2) {
  animation-delay: calc(450ms * var(--nhip));
}
.mk-duoc li:nth-child(3) {
  animation-delay: calc(550ms * var(--nhip));
}
.mk-duoc li svg {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  color: var(--len);
  margin-top: 2px;
}
.mk-goi-so {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 1px solid var(--vien);
  border-radius: 4px;
  padding: 10px 12px;
  margin-bottom: 18px;
  background: rgba(var(--toi-rgb, 6, 12, 22), .5);
}
.mk-goi-so .ht-nhan {
  display: block;
  margin-bottom: 4px;
}
.mk-goi-so b {
  font: 600 15px var(--f-hien, "Chakra Petch", sans-serif);
}
.mk-goi-so .mk-toi b {
  color: var(--dong);
}
.mk-mui {
  color: var(--chu3);
  width: 16px;
  height: 16px;
}
.mk-nut-hang {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.mk-nut,
.mk-nut-vien {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  padding: 10px 16px;
  font: 600 13.5px var(--f-chu, "Be Vietnam Pro", sans-serif);
  cursor: pointer;
  text-decoration: none;
  transition: transform calc(150ms * var(--nhip)) var(--e-mau), box-shadow calc(200ms * var(--nhip)) var(--e-mau), filter calc(200ms * var(--nhip)) var(--e-mau);
}
.mk-nut {
  border: 0;
  color: #1A1307;
  background: linear-gradient(135deg, #F3D58C 0%, #D2AE5C 45%, #A9823A 100%);
  box-shadow: 0 6px 18px rgba(210, 174, 92, .28), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.mk-nut::after,
.mk-nut-vien::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%);
  transform: translateX(-130%);
  transition: transform calc(600ms * var(--nhip)) var(--e-mau);
}
.mk-nut:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(210, 174, 92, .38), inset 0 1px 0 rgba(255, 255, 255, .4);
  filter: saturate(1.08);
}
.mk-nut:hover::after,
.mk-nut-vien:hover::after {
  transform: translateX(130%);
}
.mk-nut:active,
.mk-nut-vien:active {
  transform: translateY(0) scale(.98);
}
.mk-nut:focus-visible,
.mk-nut-vien:focus-visible {
  outline: 2px solid var(--dong);
  outline-offset: 2px;
}
.mk-nut-vien {
  background: linear-gradient(var(--mat), var(--mat)) padding-box, linear-gradient(135deg, #F3D58C, #A9823A) border-box;
  border: 1px solid transparent;
  color: var(--dong-s, #EBD7A6);
}
.mk-nut-vien:hover {
  box-shadow: 0 6px 18px rgba(210, 174, 92, .18);
}
.mk-nut-vien::after {
  background: linear-gradient(110deg, transparent 30%, rgba(243, 213, 140, .18) 50%, transparent 70%);
}
.mk-nut:disabled {
  cursor: default;
  filter: grayscale(.35) brightness(.85);
  transform: none;
  box-shadow: none;
}
.mk-nut:disabled::after {
  display: none;
}
.mk-loi {
  color: var(--xuong);
  font-size: 12.5px;
  margin: 10px 0 0;
}
.mk-loi:empty {
  display: none;
}
.mk-chan {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--vien);
  color: var(--chu3);
  font-size: 12.5px;
  line-height: 1.55;
}
.mk-chan b {
  color: var(--chu2);
  font-weight: 500;
}

/* Hộp "Xem các gói". index.html đặt *{margin:0}, xóa margin auto mặc định của <dialog>: đặt lại
   để hộp nằm giữa màn (nghiệm thu Màn khóa vòng 1 T1). */
.mk-hop {
  margin: auto;
  width: min(460px, calc(100% - 32px));
  max-height: calc(100vh - 48px);
  padding: 0;
  border: 1px solid var(--vien2);
  border-radius: 6px;
  background: var(--mat);
  color: var(--chu);
}
.mk-hop::backdrop {
  background: rgba(0, 0, 0, .55);
}
.mk-hop-dau {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--vien);
  background: var(--mat2);
}
.mk-hop-than {
  padding: 14px 16px 16px;
  display: grid;
  gap: 14px;
}
.mk-hop-goi b {
  font: 600 15px var(--f-hien, "Chakra Petch", sans-serif);
}
.mk-hop-goi ul {
  margin: 6px 0 0;
  padding-left: 18px;
  color: var(--chu2);
  font-size: 13px;
  line-height: 1.6;
}
.mk-hop-cua-ban {
  margin-left: 8px;
  font: 500 11px var(--f-so, "IBM Plex Mono", monospace);
  letter-spacing: .06em;
  color: var(--dong);
  border: 1px solid rgba(210, 174, 92, .5);
  border-radius: 3px;
  padding: 2px 6px;
}

/* Thanh bên: mục khóa đổi màu ổ khóa khi rê chuột hoặc focus; chú thích gói chứa màn. */
#rail > button.bd-khoa .bd-khoa-bt {
  transition: color calc(200ms * var(--nhip)) var(--e-mau), transform calc(200ms * var(--nhip)) var(--e-mau);
}
#rail > button.bd-khoa:hover .bd-khoa-bt,
#rail > button.bd-khoa:focus-visible .bd-khoa-bt {
  color: var(--dong);
  opacity: 1;
  transform: scale(1.12);
}
.mk-goi-y {
  position: fixed;
  z-index: 80;
  pointer-events: none;
  white-space: nowrap;
  background: var(--mat2);
  border: 1px solid var(--vien2);
  color: var(--chu);
  font: 500 11px var(--f-so, "IBM Plex Mono", monospace);
  padding: 5px 8px;
  border-radius: 3px;
}
.mk-goi-y[hidden] {
  display: none;
}

/* /tuchoi khi CRM bật: cùng thẻ, không nền mờ. */
.mk-don {
  display: flex;
  justify-content: center;
  padding: 48px 16px 64px;
}
.mk-tu {
  display: none;
}
.mk-tu.on {
  display: block;
}

/* ════ Ô khóa từng khối trong màn (khoa_khoi.js, QUYEN_TINH_NANG.md mục 7.2) ════
   Nền và thẻ chồng lên nhau trong một ô lưới: khối cao theo phần cao hơn, thẻ không bị cắt khi
   khối hẹp (cột phải của Biểu đồ kỹ thuật, màn 390 px). */
.kk {
  display: grid;
  min-height: 0;
  margin: 0 0 var(--k3, 12px);
  border: 1px solid var(--vien, rgba(255, 255, 255, .08));
}
.kk > .mk-nen,
.kk > .mk-che {
  grid-area: 1 / 1;
}
.kk > .mk-nen {
  min-height: 240px;
  overflow: hidden;
}
.kk > .mk-che {
  position: relative;
  inset: auto;
  overflow: visible;
}
.kk .mk-the {
  width: min(440px, 100%);
}
.kk .mk-than {
  padding: 18px 20px 16px;
}
.kk .mk-dong-dau {
  margin-bottom: 12px;
}
.kk .mk-the h3 {
  font: 600 18px/1.2 var(--f-hien, "Chakra Petch", sans-serif);
  margin: 0 0 6px;
  text-wrap: balance;
}
.kk .mk-mo-ta {
  font-size: 13.5px;
  margin: 0 0 14px;
}
.kk .mk-chan {
  margin-top: 12px;
}

/* Màn hẹp: một cột */
@media (max-width: 600px) {
  .mk-vung {
    padding: 16px;
  }
  .mk-che {
    padding: 40px 14px 20px;
  }
  .mk-than {
    padding: 18px 16px;
  }
  .mk-goi-so {
    grid-template-columns: minmax(0, 1fr);
  }
  .mk-mui {
    display: none;
  }
  .mk-nut-hang .mk-nut,
  .mk-nut-hang .mk-nut-vien {
    width: 100%;
  }
  .mk-n-luoi4,
  .mk-n-doi {
    grid-template-columns: minmax(0, 1fr);
  }
}

@keyframes mk-len {
  from {
    opacity: 0;
    transform: translateY(14px) scale(.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes mk-mo-nen {
  from {
    opacity: 0;
    filter: blur(14px);
  }
  to {
    opacity: .95;
    filter: blur(4.5px);
  }
}
@keyframes mk-quet {
  0% {
    transform: translateX(-120%);
  }
  60%,
  100% {
    transform: translateX(220%);
  }
}
@keyframes mk-sang {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}
@keyframes mk-khoa {
  0%,
  100% {
    transform: translateY(0);
  }
  8% {
    transform: translateY(-2px) rotate(-6deg);
  }
  16% {
    transform: translateY(0) rotate(4deg);
  }
  24% {
    transform: rotate(0);
  }
}
@keyframes mk-vao {
  from {
    opacity: 0;
    transform: translateX(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ════ Dải báo chưa cấp quyền (phien.js, CAU_HOI_MO câu 80, 175) ════
   Chữ, nút "Đăng nhập bằng tài khoản khác", nút tắt góc phải. Không chuyển động. Ở 390 px chữ
   chiếm cả dòng, nút xuống dòng dưới; chừa chỗ bên phải cho nút tắt. */
.bd-bao {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: var(--k2) var(--k3);
  align-items: center;
  margin: var(--k3) var(--k4) 0;
  padding: var(--k2) calc(var(--k3) + 30px) var(--k2) var(--k4);
  border-left: 2px solid var(--tc);
  font-size: var(--c2);
}
.bd-bao-chu {
  flex: 1 1 280px;
  min-width: 0;
  text-wrap: pretty;
}
.bd-bao-tat {
  position: absolute;
  top: 4px;
  right: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: var(--r-nut);
  background: transparent;
  color: var(--chu2);
  font: 400 18px / 1 var(--f-chu);
  cursor: pointer;
}
.bd-bao-tat:hover {
  color: var(--chu);
  background: var(--dong-m);
}
.bd-bao-tat:focus-visible {
  outline: 2px solid var(--dong);
  outline-offset: 1px;
}

/* Giảm chuyển động (MAN_KHOA mục 5): tắt mọi animation và transition của màn khóa, kể cả hiệu
   ứng vào màn chung của chuyen_dong.css trên khối con của #v-khoa. */
@media (prefers-reduced-motion: reduce) {
  .mk-vung,
  .mk-vung::after,
  .mk-nen,
  .mk-the,
  .mk-duoc li,
  .mk-huy svg,
  .mk-duong-sang,
  .mk-nut,
  .mk-nut::after,
  .mk-nut-vien,
  .mk-nut-vien::after,
  .mk-hop,
  #v-khoa > *,
  #rail > button.bd-khoa .bd-khoa-bt {
    animation: none !important;
    transition: none !important;
  }
  .mk-vung::after {
    display: none;
  }
}