/* ==========================================================================
   HỆ THỐNG THIẾT KẾ — Kiosk hành chính công
   --------------------------------------------------------------------------
   Một file duy nhất cho cả ba loại màn hình: kiosk chạm, máy cán bộ, và
   điện thoại của người dân.

   Ba nguyên tắc, đều xuất phát từ người dùng thật tại phường:

   1. TỰ CHỨA. Không tải bất cứ thứ gì từ Internet. Kiosk đặt ở phường,
      mạng chập chờn; hệ thống cũ nạp 149 tài nguyên từ CDN nên mất mạng là
      giao diện trắng trơn. Font dùng bộ có sẵn của hệ điều hành.

   2. ĐỌC ĐƯỢC BỞI NGƯỜI CAO TUỔI. Cỡ chữ nền 20px trên kiosk (không phải
      12-14px như trước), tương phản đạt WCAG AA, không dùng nét chữ mảnh.

   3. BẤM ĐƯỢC BẰNG NGÓN TAY. Vùng chạm tối thiểu 64px trên kiosk, 48px trên
      điện thoại. Không có nút chỉ-biểu-tượng: luôn kèm chữ.
   ========================================================================== */

/* --- Biến thiết kế ------------------------------------------------------ */
:root {
  /* Màu: xanh hành chính, tương phản >= 7:1 trên nền trắng */
  --k-chinh:        #0b5cab;
  --k-chinh-dam:    #063a6e;
  --k-chinh-nhat:   #e8f1fb;

  --k-thanh-cong:   #1a7f37;
  --k-thanh-cong-nhat: #e7f5ec;
  --k-canh-bao:     #a15c00;
  --k-canh-bao-nhat: #fdf3e3;
  --k-loi:          #b3261e;
  --k-loi-nhat:     #fdecea;

  --k-chu:          #14171a;
  --k-chu-nhat:     #4d555e;
  --k-vien:         #d3d8de;
  --k-nen:          #f4f6f8;
  --k-trang:        #ffffff;

  /* Bảng màu trang trọng — lấy từ mẫu thẻ quầy quaydemo.svg.
     Dùng cho thẻ quầy và dải đầu trang của kiosk. */
  --k-do-quay:      #B01F24;   /* nền thẻ quầy */
  --k-do-dau:       #cd181e;   /* dải đầu trang */
  --k-vang-khung:   #F5B815;   /* khung ngoài */
  --k-vang-chu:     #FBC02D;   /* số và tên quầy */
  --k-navy:         #0B1F3A;   /* viền trong */
  /* Times New Roman ĐỨNG TRƯỚC Georgia: Georgia thiếu glyph tiếng Việt dựng
     sẵn (Ầ, Ế, Ầ...) nên trình duyệt phải ghép dấu rời, hiển thị thành
     "QUÂ`Y", "Y TÊ´". Times New Roman có đủ và luôn có sẵn trên Windows. */
  --k-font-trang-trong: "Times New Roman", Cambria, "DejaVu Serif", serif;

  /* Chữ: dùng font hệ điều hành, không tải từ Internet */
  --k-font: "Segoe UI", "Noto Sans", Roboto, "Helvetica Neue", Arial, sans-serif;
  --k-co-nen: 18px;

  /* Khoảng cách theo bậc 4px */
  --k-kc-1: 4px;  --k-kc-2: 8px;  --k-kc-3: 12px; --k-kc-4: 16px;
  --k-kc-5: 24px; --k-kc-6: 32px; --k-kc-7: 48px; --k-kc-8: 64px;

  --k-bo-goc: 10px;
  --k-bo-goc-lon: 16px;
  --k-do-bong: 0 1px 3px rgba(20, 23, 26, .10), 0 4px 12px rgba(20, 23, 26, .06);

  /* Vùng chạm tối thiểu */
  --k-cham: 48px;
}

/* Kiosk: chữ to hơn, vùng chạm rộng hơn. Đặt class k-kiosk lên <body>. */
.k-kiosk {
  --k-co-nen: 20px;
  --k-cham: 64px;
}

/* Người dùng đặt hệ điều hành ở chế độ giảm chuyển động thì tắt hiệu ứng */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* --- Nền tảng ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

body.k-body {
  margin: 0;
  font-family: var(--k-font);
  font-size: var(--k-co-nen);
  line-height: 1.55;
  color: var(--k-chu);
  background: var(--k-nen);
  -webkit-text-size-adjust: 100%;
}

.k-body h1, .k-body h2, .k-body h3 { margin: 0 0 var(--k-kc-3); line-height: 1.25; }
.k-body h1 { font-size: 2rem;    font-weight: 700; }
.k-body h2 { font-size: 1.5rem;  font-weight: 700; }
.k-body h3 { font-size: 1.25rem; font-weight: 600; }
.k-body p  { margin: 0 0 var(--k-kc-4); }

/* Ổ khoá tiêu điểm: bắt buộc thấy được, phục vụ điều hướng bằng bàn phím */
.k-body :focus-visible {
  outline: 3px solid var(--k-chinh);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Chỉ hiện cho trình đọc màn hình */
.k-an-thi-giac {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Bỏ qua thanh điều hướng, nhảy thẳng vào nội dung */
.k-bo-qua {
  position: absolute; left: -9999px;
  background: var(--k-chinh); color: #fff;
  padding: var(--k-kc-3) var(--k-kc-4); z-index: 100;
}
.k-bo-qua:focus { left: var(--k-kc-4); top: var(--k-kc-4); }

/* --- Bố cục ------------------------------------------------------------- */
.k-khung { max-width: 1200px; margin: 0 auto; padding: 0 var(--k-kc-5); }
.k-khung--hep { max-width: 720px; }

.k-dau-trang {
  background: var(--k-chinh);
  color: #fff;
  padding: var(--k-kc-4) 0;
}
.k-dau-trang__trong { display: flex; align-items: center; gap: var(--k-kc-4); }
.k-dau-trang__logo { height: 52px; width: auto; }
.k-dau-trang__ten { font-size: 1.375rem; font-weight: 700; margin: 0; }
.k-dau-trang__phu { font-size: .95rem; opacity: .92; margin: 0; }

.k-noi-dung { padding: var(--k-kc-6) 0; }

.k-luoi { display: grid; gap: var(--k-kc-4); }
.k-luoi--2 { grid-template-columns: repeat(2, 1fr); }
.k-luoi--3 { grid-template-columns: repeat(3, 1fr); }
.k-luoi--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .k-luoi--3, .k-luoi--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .k-luoi--2, .k-luoi--3, .k-luoi--4 { grid-template-columns: 1fr; } }

/* --- Nút ---------------------------------------------------------------- */
.k-nut {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--k-kc-2);
  min-height: var(--k-cham);
  padding: var(--k-kc-3) var(--k-kc-5);
  font-family: inherit; font-size: 1rem; font-weight: 600;
  color: #fff; background: var(--k-chinh);
  border: 2px solid var(--k-chinh); border-radius: var(--k-bo-goc);
  cursor: pointer; text-decoration: none;
  transition: background .15s ease;
}
.k-nut:hover { background: var(--k-chinh-dam); border-color: var(--k-chinh-dam); }
.k-nut:active { transform: translateY(1px); }
.k-nut[disabled], .k-nut[aria-disabled="true"] {
  opacity: .5; cursor: not-allowed; transform: none;
}

.k-nut--phu { background: var(--k-trang); color: var(--k-chinh); }
.k-nut--phu:hover { background: var(--k-chinh-nhat); }
.k-nut--nguy-hiem { background: var(--k-loi); border-color: var(--k-loi); }
.k-nut--nguy-hiem:hover { background: #8c1d17; border-color: #8c1d17; }

/* Nút chính trên kiosk: to để người cao tuổi bấm không trượt */
.k-nut--lon  { min-height: 76px;  font-size: 1.25rem; padding: 0 var(--k-kc-6); }
.k-nut--khong-lo {
  min-height: 108px; font-size: 1.75rem; font-weight: 700;
  padding: 0 var(--k-kc-7); border-radius: var(--k-bo-goc-lon);
  width: 100%;
}

/* --- Thẻ ---------------------------------------------------------------- */
.k-the {
  background: var(--k-trang);
  border: 1px solid var(--k-vien);
  border-radius: var(--k-bo-goc);
  padding: var(--k-kc-5);
  box-shadow: var(--k-do-bong);
}
.k-the__tieu-de { margin: 0 0 var(--k-kc-4); font-size: 1.125rem; font-weight: 700; }

/* Thẻ dịch vụ trên kiosk — cả thẻ là vùng chạm */
.k-dich-vu {
  display: flex; flex-direction: column; justify-content: center;
  align-items: center; text-align: center; gap: var(--k-kc-3);
  min-height: 168px; padding: var(--k-kc-5);
  background: var(--k-trang); color: var(--k-chu);
  border: 2px solid var(--k-vien); border-radius: var(--k-bo-goc-lon);
  cursor: pointer; text-decoration: none;
  font-family: inherit; font-size: 1.25rem; font-weight: 600;
  transition: border-color .15s ease, background .15s ease;
}
.k-dich-vu:hover, .k-dich-vu:focus-visible {
  border-color: var(--k-chinh); background: var(--k-chinh-nhat);
}
.k-dich-vu[aria-pressed="true"], .k-dich-vu.dang-chon {
  border-color: var(--k-chinh); background: var(--k-chinh-nhat);
  box-shadow: inset 0 0 0 2px var(--k-chinh);
}
.k-dich-vu__so-quay {
  font-size: .95rem; font-weight: 600; color: var(--k-chinh);
  background: var(--k-chinh-nhat); border-radius: 999px;
  padding: var(--k-kc-1) var(--k-kc-3);
}
.k-dich-vu--dong { opacity: .55; cursor: not-allowed; }
.k-dich-vu--dong:hover { border-color: var(--k-vien); background: var(--k-trang); }

/* --- Thẻ quầy trang trọng ----------------------------------------------- */
/* Dựng lại mẫu quaydemo.svg bằng CSS thay vì nhúng ảnh: số quầy và tên dịch
   vụ lấy động từ CSDL, chữ vẫn là chữ thật nên trình đọc màn hình đọc được,
   phóng to không vỡ, và đổi tên quầy không phải sửa file ảnh.
   Tỷ lệ giữ đúng bản gốc 1210×795 (khung vàng 2,8% — viền navy 1%). */
.k-quay {
  display: block;
  width: 100%;
  /* Dùng min-height chứ không dùng aspect-ratio cố định: tên quầy dài 3 dòng
     sẽ vượt khung và làm nhãn trạng thái tràn ra ngoài nền đỏ. */
  min-height: 15.5rem;
  padding: 2.8%;
  background: var(--k-vang-khung);
  border: 0;
  cursor: pointer;
  font-family: var(--k-font-trang-trong);
  text-decoration: none;
  transition: transform .15s ease, filter .15s ease;
}
.k-quay:hover, .k-quay:focus-visible { transform: translateY(-4px); filter: brightness(1.06); }
.k-quay:active { transform: translateY(0); }

.k-quay__trong {
  min-height: 100%;
  box-sizing: border-box;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: .18em;
  padding: var(--k-kc-5) var(--k-kc-4);
  background: var(--k-do-quay);
  border: .55rem solid var(--k-navy);
  text-align: center;
}
.k-quay__so {
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 700; line-height: 1;
  color: var(--k-vang-chu);
  font-variant-numeric: tabular-nums;
}
.k-quay__ten {
  font-size: clamp(1.1rem, 2vw, 1.9rem);
  font-weight: 700; line-height: 1.2;
  color: var(--k-vang-chu);
  text-transform: uppercase;
  text-wrap: balance;
}
.k-quay__trang-thai {
  margin-top: .4em;
  font-family: var(--k-font);
  font-size: clamp(.75rem, 1.5vw, 1rem);
  font-weight: 600;
  color: var(--k-vang-khung);
  background: rgba(0, 0, 0, .28);
  border-radius: 999px;
  padding: .15em .8em;
  text-transform: none;
}
/* Quầy tạm nghỉ: xám đi nhưng vẫn đọc được, không ẩn khỏi màn hình */
.k-quay--dong { filter: grayscale(.75) brightness(.85); cursor: not-allowed; }
.k-quay--dong:hover { transform: none; filter: grayscale(.75) brightness(.85); }

/* Dải đầu trang phiên bản trang trọng — dùng chung tông với thẻ quầy */
.k-dau-trang--trang-trong {
  background: var(--k-do-dau);
  border-bottom: 6px solid var(--k-vang-khung);
}
.k-dau-trang--trang-trong .k-dau-trang__ten {
  font-family: var(--k-font-trang-trong);
  color: var(--k-vang-chu);
  text-transform: uppercase;
  letter-spacing: .01em;
}

/* --- Số thứ tự ---------------------------------------------------------- */
.k-so {
  font-variant-numeric: tabular-nums;
  font-weight: 800; color: var(--k-chinh);
  line-height: 1; letter-spacing: -.02em;
}
.k-so--ve      { font-size: clamp(4rem, 14vw, 9rem); }   /* vé vừa lấy */
.k-so--bang    { font-size: clamp(2rem, 5vw, 3.5rem); }  /* bảng gọi số */
.k-so--nho     { font-size: 1.5rem; }

.k-so-khoi {
  text-align: center;
  padding: var(--k-kc-6) var(--k-kc-5);
  background: var(--k-chinh-nhat);
  border: 2px solid var(--k-chinh);
  border-radius: var(--k-bo-goc-lon);
}
.k-so-khoi__nhan {
  font-size: 1.125rem; font-weight: 600; color: var(--k-chu-nhat);
  text-transform: uppercase; letter-spacing: .04em;
  margin: 0 0 var(--k-kc-3);
}

/* --- Các bước ----------------------------------------------------------- */
.k-buoc { display: flex; gap: var(--k-kc-2); list-style: none; margin: 0 0 var(--k-kc-6); padding: 0; }
.k-buoc__muc {
  flex: 1; text-align: center;
  padding: var(--k-kc-3) var(--k-kc-2);
  font-size: 1rem; font-weight: 600; color: var(--k-chu-nhat);
  background: var(--k-trang);
  border-bottom: 5px solid var(--k-vien);
}
.k-buoc__muc--dang-o { color: var(--k-chinh); border-bottom-color: var(--k-chinh); }
.k-buoc__muc--xong   { color: var(--k-thanh-cong); border-bottom-color: var(--k-thanh-cong); }
.k-buoc__so {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 999px;
  background: var(--k-vien); color: var(--k-chu);
  margin-right: var(--k-kc-2); font-size: .95rem;
}
.k-buoc__muc--dang-o .k-buoc__so { background: var(--k-chinh); color: #fff; }
.k-buoc__muc--xong   .k-buoc__so { background: var(--k-thanh-cong); color: #fff; }

/* --- Thông báo ---------------------------------------------------------- */
.k-thong-bao {
  display: flex; gap: var(--k-kc-3);
  padding: var(--k-kc-4) var(--k-kc-5);
  border: 1px solid; border-left-width: 6px;
  border-radius: var(--k-bo-goc);
  margin-bottom: var(--k-kc-4);
  font-size: 1.0625rem;
}
.k-thong-bao--tin  { background: var(--k-chinh-nhat);     border-color: var(--k-chinh);      color: var(--k-chinh-dam); }
.k-thong-bao--ok   { background: var(--k-thanh-cong-nhat); border-color: var(--k-thanh-cong); color: #12551f; }
.k-thong-bao--luu-y{ background: var(--k-canh-bao-nhat);  border-color: var(--k-canh-bao);   color: #6d3e00; }
.k-thong-bao--loi  { background: var(--k-loi-nhat);       border-color: var(--k-loi);        color: #7d1a15; }
/* Thông báo lớn giữa màn hình kiosk */
.k-thong-bao--kiosk { font-size: 1.5rem; font-weight: 600; padding: var(--k-kc-6); text-align: center; display: block; }

/* --- Nhãn trạng thái ---------------------------------------------------- */
.k-nhan {
  display: inline-block; padding: var(--k-kc-1) var(--k-kc-3);
  border-radius: 999px; font-size: .9375rem; font-weight: 600;
}
.k-nhan--mo   { background: var(--k-thanh-cong-nhat); color: #12551f; }
.k-nhan--dong { background: var(--k-loi-nhat);        color: #7d1a15; }
.k-nhan--cho  { background: var(--k-canh-bao-nhat);   color: #6d3e00; }

/* --- Biểu mẫu ----------------------------------------------------------- */
.k-o-nhap { margin-bottom: var(--k-kc-5); }
.k-o-nhap__nhan { display: block; font-weight: 600; margin-bottom: var(--k-kc-2); }
.k-o-nhap__goi-y { font-size: .9375rem; color: var(--k-chu-nhat); margin-top: var(--k-kc-2); }
.k-o-nhap__loi { font-size: .9375rem; color: var(--k-loi); font-weight: 600; margin-top: var(--k-kc-2); }

.k-nhap {
  width: 100%; min-height: var(--k-cham);
  padding: var(--k-kc-3) var(--k-kc-4);
  font-family: inherit; font-size: 1rem; color: var(--k-chu);
  background: var(--k-trang);
  border: 2px solid var(--k-vien); border-radius: var(--k-bo-goc);
}
.k-nhap:focus { border-color: var(--k-chinh); }
.k-nhap[aria-invalid="true"] { border-color: var(--k-loi); }

/* --- Bảng --------------------------------------------------------------- */
.k-bang-bao { overflow-x: auto; }          /* bảng rộng cuộn trong khung riêng */
.k-bang { width: 100%; border-collapse: collapse; }
.k-bang th, .k-bang td {
  padding: var(--k-kc-3) var(--k-kc-4);
  text-align: left; border-bottom: 1px solid var(--k-vien);
}
.k-bang th { background: var(--k-nen); font-weight: 700; }
.k-bang td.k-giua, .k-bang th.k-giua { text-align: center; }
.k-bang tbody tr:hover { background: var(--k-chinh-nhat); }

/* Bảng gọi số trên màn hình chờ — đọc được từ xa vài mét */
.k-bang--goi-so { font-size: 1.5rem; }
.k-bang--goi-so th, .k-bang--goi-so td { padding: var(--k-kc-4) var(--k-kc-5); }
.k-bang--goi-so .k-so { font-size: 2.5rem; }
.k-dang-goi { animation: k-nhap-nhay 1.2s ease-in-out infinite; }
@keyframes k-nhap-nhay { 50% { background: var(--k-chinh-nhat); } }

/* --- Tiện ích ----------------------------------------------------------- */
.k-giua      { text-align: center; }
.k-hang      { display: flex; gap: var(--k-kc-3); flex-wrap: wrap; align-items: center; }
.k-hang--phai{ justify-content: flex-end; }
.k-mo-nhat   { color: var(--k-chu-nhat); }
.k-to        { font-weight: 700; }
.k-cach-tren { margin-top: var(--k-kc-5); }
.k-cach-duoi { margin-bottom: var(--k-kc-5); }

/* --- In vé -------------------------------------------------------------- */
@media print {
  .k-dau-trang, .k-nut, .k-bo-qua { display: none !important; }
  body.k-body { background: #fff; font-size: 12pt; }
}