/* Trang chào + nhập khóa hprint.online (ban-quyen.js) — y như trang chào MASTER TOOL (welcome.css bên đó): nền navy sáng dần ở giữa,
   bầu trời sao + chữ DESIGN M▲STER + vạch sáng (nen-dm.js, styles.css), thẻ kính, ô nhập khóa HPRT-, chip máy. Nút / ô nhập phải đè
   quy tắc chung của app (button, input trong styles.css) nên bộ chọn có thêm .cong-khoa. */

/* Chưa được vào app: giấu giao diện app (vẫn giữ bố cục để app.js đo khung đúng), chỉ hiện trang chào */
html.cho-ban-quyen body > :not(.cong-khoa):not(.man-noi-may) { visibility: hidden; }

/* Bản web đặt trên hosting: màn chờ nối DESIGN MASTER AI trên máy (renderer/web-dm.js) — đè cả trang chào */
.man-noi-may { position: fixed; inset: 0; z-index: 2147483000; display: grid; place-items: center; padding: 16px;
  background: radial-gradient(ellipse at 50% 30%, #0d2a52 0%, #04080f 75%); color: #dce4f2; font-family: "Be Vietnam Pro", system-ui, sans-serif; }
.man-noi-may[hidden] { display: none; }
.man-noi-the { width: min(480px, 100%); padding: 26px; border: 1px solid #23406b; border-radius: 14px; background: #0b1526ee;
  box-shadow: 0 20px 50px #0008; text-align: center; }
.man-noi-the > b { display: block; letter-spacing: .12em; font-size: 13px; color: #8fc1ff; }
.man-noi-the h2 { margin: 10px 0 8px; font-size: 20px; color: #fff; }
.man-noi-the p { margin: 0; line-height: 1.55; color: #b6c4da; }
.man-noi-nut { display: flex; gap: 10px; justify-content: center; margin-top: 18px; }
.man-noi-nut:empty { display: none; }
.man-noi-nut button { padding: 10px 18px; border-radius: 8px; border: 1px solid #2b4a75; background: #12223a; color: #dce4f2; font: inherit; cursor: pointer; }
.man-noi-nut button.nut-chinh { background: #2563eb; border-color: #3b82f6; color: #fff; font-weight: 600; }
.man-noi-quay { display: inline-block; width: 22px; height: 22px; margin-top: 8px; border: 3px solid #23406b; border-top-color: #8fc1ff;
  border-radius: 50%; animation: man-noi-quay .9s linear infinite; }
@keyframes man-noi-quay { to { transform: rotate(360deg); } }

.cong-khoa {
  position: fixed; inset: 0; z-index: 2147483000; overflow: auto; display: flex; flex-direction: column; padding: 46px 16px 22px;
  color: #e6edf8; font-family: var(--font); -webkit-font-smoothing: antialiased; user-select: text;
}
.cong-khoa > .sao { position: fixed; }
/* Kéo cửa sổ ở dải trên cùng (cửa sổ không có thanh tiêu đề; chừa chỗ ba nút thu nhỏ / phóng / đóng bên phải) */
.ck-keo { position: fixed; top: 0; left: 0; right: 150px; height: 44px; -webkit-app-region: drag; z-index: 2; }

.ck-trong {
  position: relative; z-index: 1; width: min(600px, 100%); margin: auto; display: flex; flex-direction: column; align-items: center;
  animation: ck-len .8s cubic-bezier(.2, .8, .2, 1) both;
}
.ck-hieu { display: flex; flex-direction: column; align-items: center; width: 100%; }
.cong-khoa .ten-chao { --co-ten: clamp(30px, min(4cqi, 7cqb), 48px); }
.ck-chao { margin: 18px 0 20px; color: #d3def0; font-size: 15px; font-weight: 500; line-height: 1.6; text-wrap: balance; }
.ck-chao b { color: #f4f8ff; font-weight: 600; }

.ck-the {
  position: relative; width: 100%; text-align: left; padding: 24px 26px; border-radius: 18px;
  background: linear-gradient(180deg, rgba(18, 34, 64, .80), rgba(8, 15, 31, .88)); border: 1px solid rgba(110, 168, 255, .22);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .06); backdrop-filter: blur(14px);
}
.ck-the::before {
  content: ""; position: absolute; left: 26px; right: 26px; top: -1px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, #3b82f6, #9cc7ff, #3b82f6, transparent);
}
.ck-the.canh-bao::before { background: linear-gradient(90deg, transparent, #ef4444, #fca5a5, #ef4444, transparent); }

.ck-hinh { flex-shrink: 0; }
.ck-dang { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 18px 0; color: #a9bddb; font-size: 14px; }
.ck-quay {
  display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, .25); border-top-color: #fff; border-radius: 50%;
  animation: ck-quay .8s linear infinite;
}

/* Khóa đang dùng: gói, số ngày còn lại, thanh thời gian, ngày kích hoạt / hết hạn, khóa che bớt */
.ck-lic-dau { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ck-goi {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 13px; border-radius: 999px; font-size: 13px; font-weight: 600;
  color: #d6e5ff; background: rgba(37, 99, 235, .20); border: 1px solid rgba(110, 168, 255, .38);
}
.ck-goi .ck-hinh { color: #9cc7ff; }
.ck-song { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: #6ee7b7; }
.ck-song i { width: 8px; height: 8px; border-radius: 50%; background: #34d399; animation: ck-nhay 2s ease-out infinite; }
.ck-ngay { display: flex; align-items: baseline; gap: 12px; margin: 18px 0 14px; }
.ck-ngay b {
  font-size: 66px; line-height: 1; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #fff 25%, #8fbaff); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ck-ngay .ck-vo-han { font-size: 62px; }
.ck-ngay span { font-size: 15px; color: #a9bddb; }
.ck-vach { height: 8px; border-radius: 99px; background: #0a1730; border: 1px solid rgba(110, 168, 255, .14); overflow: hidden; }
.ck-vach i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #2563eb, #6ea8ff); box-shadow: 0 0 12px rgba(110, 168, 255, .55); transition: width .6s; }
.ck-vach i.sap-het { background: linear-gradient(90deg, #d97706, #fbbf24); box-shadow: 0 0 12px rgba(251, 191, 36, .45); }
.ck-moc { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 10px; font-size: 13px; color: #8ea2c0; }
.ck-moc b { color: #dbe7fb; font-weight: 600; font-variant-numeric: tabular-nums; }
.ck-dong-khoa {
  display: flex; align-items: center; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(110, 168, 255, .12);
  font-size: 13px; color: #8ea2c0;
}
.ck-dong-khoa code { font-family: "JetBrains Mono", Consolas, monospace; color: #cfe0ff; letter-spacing: .06em; }
.ck-dong-khoa .ck-lien-ket { margin-left: auto; }
.ck-lic + .ck-hang, .ck-ghi + .ck-hang { margin-top: 20px; }
.ck-ghi { margin: 0; color: #a9bddb; font-size: 14px; line-height: 1.65; }

/* Lý do chưa dùng được / bị đưa ra */
.ck-ly-do {
  display: flex; gap: 12px; align-items: flex-start; margin-bottom: 18px; padding: 12px 14px; border-radius: 12px;
  background: rgba(127, 29, 29, .24); border: 1px solid rgba(248, 113, 113, .38); color: #fecaca; font-size: 13.5px; line-height: 1.55;
}
.ck-ly-do .ck-hinh { margin-top: 2px; color: #f87171; }
.ck-ly-do b { display: block; margin-bottom: 2px; color: #fff; font-size: 14px; }
.ck-ly-do span { display: block; }

/* Ô nhập khóa */
.ck-nhan { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 15px; font-weight: 600; color: #e6edf8; }
.ck-nhan svg { color: #6ea8ff; }
.ck-o {
  display: flex; align-items: center; height: 56px; padding: 0 16px; border-radius: 12px; background: #050c1b; border: 1px solid #23406b;
  transition: border-color .15s, box-shadow .15s;
}
.ck-o:focus-within { border-color: #3b82f6; box-shadow: 0 0 0 4px rgba(59, 130, 246, .18); }
.ck-dau-khoa { margin-right: 2px; font: 600 19px/1 "JetBrains Mono", Consolas, monospace; letter-spacing: .08em; color: #6ea8ff; }
.cong-khoa .ck-o input {
  flex: 1; min-width: 0; height: 100%; padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; outline: none;
  color: #fff; font: 500 19px/1 "JetBrains Mono", Consolas, monospace; letter-spacing: .12em; text-transform: uppercase;
}
.cong-khoa .ck-o input:focus-visible { outline: none; }
.cong-khoa .ck-o input::placeholder { color: #3b5277; letter-spacing: .12em; }
.ck-loi { margin: 10px 0 0; color: #fca5a5; font-size: 13.5px; line-height: 1.5; }
.ck-goi-y { margin: 10px 0 12px; color: #8ea2c0; font-size: 13px; line-height: 1.55; }
.ck-goi-y b { color: #cfe0ff; font-weight: 600; }
.ck-cac-goi { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.ck-cac-goi span {
  padding: 4px 11px; border-radius: 999px; font-size: 12px; color: #a9bddb; background: rgba(15, 30, 58, .8); border: 1px solid rgba(110, 168, 255, .16);
}

/* Nút */
.ck-hang { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cong-khoa .ck-nut {
  height: 46px; padding: 0 18px; gap: 9px; border-radius: 12px; border: 1px solid #2b4a75; background: #0f1d33; color: #dbe7fb;
  font-size: 14.5px; font-weight: 500;
}
.cong-khoa .ck-nut:hover:not(:disabled) { background: #16294a; border-color: #4b6fa3; }
.cong-khoa .ck-nut--chinh {
  flex: 1; border-color: #4f8ff7; color: #fff; font-weight: 600; background: linear-gradient(180deg, #3b82f6, #2563eb);
  box-shadow: 0 10px 26px rgba(37, 99, 235, .45), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.cong-khoa .ck-nut--chinh:hover:not(:disabled) { background: linear-gradient(180deg, #4b8ef8, #2f6cf0); border-color: #7aa9ff; }
.cong-khoa .ck-nut--to { height: 54px; font-size: 16px; }
.cong-khoa .ck-nut em {
  display: inline-grid; place-items: center; min-width: 24px; height: 24px; border-radius: 50%; font-style: normal; font-size: 12.5px;
  font-variant-numeric: tabular-nums; background: rgba(255, 255, 255, .2);
}
.cong-khoa .ck-lien-ket {
  display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; border-radius: 0; background: none; color: #8fbaff;
  font-size: 13px; font-weight: 500; cursor: pointer; text-decoration: none;
}
.cong-khoa .ck-lien-ket:hover:not(:disabled) { background: none; color: #d6e5ff; text-decoration: underline; }
.ck-lay { margin-top: 16px; }

/* Chip máy này: tên máy, IP, LAN, mã máy */
.ck-may { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 20px 0 0; padding: 0; list-style: none; }
.ck-may li {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 12px; color: #9fb2d0;
  background: rgba(8, 16, 32, .72); border: 1px solid rgba(110, 168, 255, .16); backdrop-filter: blur(6px); font-variant-numeric: tabular-nums;
}
.ck-may .ck-hinh { color: #6ea8ff; }
.ck-chan { position: relative; z-index: 1; margin-top: 24px; text-align: center; font-size: 12px; color: #5d7396; }

@keyframes ck-len { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes ck-quay { to { transform: rotate(360deg); } }
@keyframes ck-nhay { 0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, .55); } 80%, 100% { box-shadow: 0 0 0 8px rgba(52, 211, 153, 0); } }
@media (prefers-reduced-motion: reduce) { .cong-khoa *, .cong-khoa *::after { animation: none !important; } }