:root {
  --tim: #6f178f;
  --tim-dam: #521069;
  --tim-sang: #8e3bb0;
  --tim-nhat: #f4eaf8;
  --tim-vien: #e2cdec;
  --nen: #faf6fc;
  --the: #ffffff;
  --chu: #2a1733;
  --chu-phu: #6d5a78;
  --cam: #a64b00;
  --cam-nhat: #fff3e3;
  --cam-vien: #f3c992;
  --do: #b3261e;
  --do-nhat: #fdecea;
  --xanh: #1f8a57;
  --bong: 0 1px 2px rgba(82, 16, 105, .06), 0 8px 24px rgba(82, 16, 105, .08);
  --bong-noi: 0 2px 4px rgba(82, 16, 105, .08), 0 14px 36px rgba(82, 16, 105, .2);
}
@media (prefers-color-scheme: dark) {
  :root {
    --tim: #c98ee6;
    --tim-dam: #e2bdf3;
    --tim-nhat: #2b1b35;
    --tim-vien: #43294f;
    --nen: #140c18;
    --the: #1e1424;
    --chu: #f1e8f6;
    --chu-phu: #b9a6c4;
    --cam: #ffb866;
    --cam-nhat: #33230f;
    --cam-vien: #6b4a1c;
    --do: #ff8a80;
    --do-nhat: #3a1d1c;
    --xanh: #6fd39c;
    --bong: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
    --bong-noi: 0 2px 4px rgba(0, 0, 0, .4), 0 14px 36px rgba(0, 0, 0, .55);
  }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--nen);
  color: var(--chu);
  font: 16px/1.55 "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Đầu trang: dải tím, logo trong thẻ trắng */
header {
  background: linear-gradient(135deg, #6f178f 0%, #8e3bb0 45%, #a95cc8 75%, #8e3bb0 100%);
  background-size: 180% 180%;
  color: #fff;
  text-align: center;
  padding: 24px 16px 64px;
  position: relative;
  overflow: hidden;
}
header::before, header::after {
  content: ""; position: absolute; border-radius: 50%;
  background: rgba(255, 255, 255, .08);
}
header::before { width: 220px; height: 220px; top: -90px; left: -70px; }
header::after { width: 160px; height: 160px; bottom: -70px; right: -40px; }
/* Bong bóng và dấu "+" (như trong tên Nhi+) trôi nhẹ hai bên logo - chỉ để trang trí */
.trang-tri { position: absolute; pointer-events: none; }
.trang-tri.bong { border-radius: 50%; background: rgba(255, 255, 255, .14); }
.trang-tri.cong::before, .trang-tri.cong::after { content: ""; position: absolute; border-radius: 2px; background: rgba(255, 255, 255, .26); }
.trang-tri.cong { width: 16px; height: 16px; }
.trang-tri.cong::before { left: 6px; top: 0; width: 4px; height: 16px; }
.trang-tri.cong::after { left: 0; top: 6px; width: 16px; height: 4px; }
.t1 { width: 22px; height: 22px; left: 9%; top: 16%; }
.t2 { left: 19%; top: 36%; }
.trang-tri.t3 { width: 12px; height: 12px; right: 13%; top: 13%; background: rgba(255, 220, 245, .4); }
.t4 { right: 21%; top: 34%; scale: .75; }
.logo {
  display: inline-block;
  background: #fff;
  border-radius: 20px;
  padding: 12px 20px;
  box-shadow: 0 6px 20px rgba(40, 0, 60, .25);
  position: relative;
}
.logo img { display: block; height: 52px; width: auto; }
header h1 {
  margin: 16px 0 2px;
  font-size: 1.05rem; font-weight: 800; letter-spacing: .03em;
  position: relative;
}
header p { margin: 0; font-size: .88rem; color: #f0dff8; position: relative; text-wrap: balance; }
/* Địa chỉ luôn 1 dòng: cỡ chữ co theo bề ngang đầu trang (cqw), tối đa .88rem */
header { container-type: inline-size; }
header p.dia-chi { white-space: nowrap; text-wrap: nowrap; font-size: min(.88rem, 3.55cqw); }
header h1 { white-space: nowrap; font-size: min(1.05rem, 4.6cqw); }
header p.lien-he { margin-top: 2px; font-size: min(.88rem, 3.55cqw); }
header p.lien-he a { color: inherit; text-decoration: none; }
/* Giờ làm việc ở cuối trang: nhỏ, gọn, chữ mờ, không khung - thông tin phụ, không giành chú ý với thẻ của bé */
.gio-lam { margin: 0 0 12px; padding: 0 4px; color: var(--chu-phu); }
.gio-lam h2 { margin: 0 0 2px; font-size: .78rem; font-weight: 600; color: var(--chu-phu); }
.gio-lam table { border-collapse: collapse; font-size: .76rem; line-height: 1.5; font-variant-numeric: tabular-nums; }
.gio-lam th { display: none; }
.gio-lam td { padding: 0 12px 0 0; white-space: nowrap; }
.gio-lam td:first-child { font-weight: 600; }
.gio-lam td.nghi { opacity: .75; }
/* Sắp mở cửa: nổi hơn thẻ thường - viền tím, nền ngả tím nhạt, giờ mở cửa tím đậm, chấm đếm ngược */
.dong-cua-chung.sap-mo { position: relative; border-color: var(--tim); background: linear-gradient(135deg, var(--the) 40%, var(--tim-nhat)); }
.sap-mo b { color: var(--tim-dam); }
.sap-mo .gio-mo { color: var(--tim); font-weight: 800; font-size: 1.2em; font-variant-numeric: tabular-nums; }
.sap-mo .con-lai { display: flex; align-items: center; gap: 8px; margin-top: 2px; color: var(--chu); font-size: .95rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.sap-mo .con-lai::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--tim); }

main {
  max-width: 480px;
  margin: -44px auto 0;
  padding: 0 16px;
  position: relative;
}
.the {
  background: var(--the);
  border: 1px solid var(--tim-vien);
  border-radius: 20px;
  padding: 20px;
  box-shadow: var(--bong);
}
.tra-cuu h2 { margin: 0 0 4px; font-size: 1.3rem; font-weight: 800; color: var(--tim-dam); }
@media (prefers-color-scheme: dark) { .tra-cuu h2 { color: var(--tim-dam); } }
.tra-cuu p { margin: 0 0 16px; color: var(--chu-phu); font-size: .95rem; }
form { display: flex; gap: 8px; }
input {
  flex: 1; min-width: 0;
  font: inherit; font-size: 1.2rem; font-weight: 600; letter-spacing: .05em;
  padding: 12px 14px;
  border: 2px solid var(--tim-vien); border-radius: 14px;
  background: var(--nen); color: var(--chu);
  transition: border-color .15s, box-shadow .15s;
}
input::placeholder { color: var(--chu-phu); font-weight: 400; letter-spacing: 0; opacity: .7; }
input:focus { outline: none; border-color: var(--tim); box-shadow: 0 0 0 4px color-mix(in srgb, var(--tim) 18%, transparent); }
button {
  font: inherit; font-weight: 700;
  padding: 12px 20px;
  border: 0; border-radius: 14px;
  background: linear-gradient(135deg, #6f178f, #8e3bb0);
  color: #fff; cursor: pointer;
  box-shadow: 0 4px 12px rgba(111, 23, 143, .3);
  transition: transform .12s ease;
}
button:active { transform: scale(.96); }
button:disabled { opacity: .6; cursor: wait; }
.phu {
  background: none; box-shadow: none; color: var(--tim);
  padding: 6px 4px; font-weight: 700;
}
/* Danh sách số đã tra trên máy, bật ra dưới ô khi bấm vào ô */
.o-nhap { flex: 1; min-width: 0; display: flex; position: relative; }
.goi-y {
  position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 6px);
  padding: 6px;
  background: var(--the); border: 1px solid var(--tim-vien); border-radius: 14px;
  box-shadow: var(--bong);
}
.tra-cuu .goi-y .nhan { margin: 0; padding: 2px 10px 4px; font-size: .78rem; }
.goi-y ul { list-style: none; margin: 0; padding: 0; }
.goi-y button {
  display: block; width: 100%; text-align: left;
  padding: 10px; border-radius: 10px;
  background: none; box-shadow: none; color: var(--chu);
  font-size: 1.1rem; font-weight: 600; letter-spacing: .05em; font-variant-numeric: tabular-nums;
}
.goi-y button:hover, .goi-y button:focus-visible, .goi-y button:active {
  background: var(--tim-nhat); color: var(--tim-dam); outline: none; transform: none;
}

#ket-qua { margin-top: 16px; display: grid; gap: 12px; }
/* Thẻ của bé nổi lên trên ô tra cứu: thông tin chính của trang */
.benh-nhan { border: 2px solid color-mix(in srgb, var(--tim) 35%, var(--tim-vien)); box-shadow: var(--bong-noi); }
.benh-nhan .ten {
  margin: 0 0 14px;
  font-weight: 800; font-size: 1.3rem; line-height: 1.3; letter-spacing: .01em;
  color: var(--tim-dam);
}
.so-luot { display: flex; align-items: center; gap: 14px; }
.vong {
  flex: none;
  width: 76px; height: 76px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--tim-nhat);
  border: 3px solid var(--tim);
  color: var(--tim);
  font-size: 2.1rem; font-weight: 800; font-variant-numeric: tabular-nums;
}
.so-luot span { font-weight: 600; font-size: 1.2rem; line-height: 1.35; }
/* "Đến ngay": chữ thường màu chữ chính, không ô màu, không nhấp nháy (không làm phụ huynh căng thẳng) */
.hen { margin-top: 14px; }
.hen p { margin: 0; color: var(--chu); }
/* Giờ có mặt chỉ để tham khảo: chữ nhỏ, màu mờ, không đóng khung - số lượt mới là thông tin chính */
.tham-khao { margin: 14px 0 0; padding-top: 12px; border-top: 1px dashed var(--tim-vien); color: var(--chu-phu); }
.tham-khao p { margin: 0; font-size: .88rem; }
.tham-khao .gio { font-variant-numeric: tabular-nums; }
.tham-khao .ghi-chu { margin-top: 2px; font-size: .8rem; font-style: italic; opacity: .85; }
.trang-thai { margin: 0; font-size: 1.1rem; font-weight: 700; color: var(--tim); }
/* Qua lượt: thẻ như thường, chữ màu chữ chính (không ô vàng) */
.qua-so .trang-thai { color: var(--chu); }
.qua-so p:last-child { margin: 6px 0 0; }
.benh-nhan .trang-thai + p { margin: 6px 0 0; }
/* Nút ở trang giới thiệu */
.nut-lon {
  display: block; text-align: center; text-decoration: none;
  font-weight: 700; font-size: 1.1rem;
  padding: 14px 20px; border-radius: 14px;
  background: linear-gradient(135deg, #6f178f, #8e3bb0); color: #fff;
  box-shadow: 0 4px 12px rgba(111, 23, 143, .3);
}
/* Hết giờ khám mà bé vẫn còn trong danh sách: màu trung tính, không giục như "đến ngay" */
.dong-cua .trang-thai { color: var(--chu-phu); }
.benh-nhan, .hen { position: relative; }
/* Dấu tích xanh cho bé đã được bác sĩ khám */
.trang-thai.xong { display: flex; align-items: center; gap: 10px; }
.tich { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--xanh); position: relative; }
.tich::after {
  content: ""; position: absolute; left: 10px; top: 6px; width: 6px; height: 12px;
  border: solid var(--the); border-width: 0 3px 3px 0; transform: rotate(45deg);
}

.thong-bao { padding: 14px 16px; border-radius: 16px; background: var(--the); border: 1px solid var(--tim-vien); }
.thong-bao-chung { margin: 0 0 16px; padding: 12px 16px; border-radius: 16px; background: var(--the); border: 2px solid var(--tim-vien); color: var(--tim-dam); font-weight: 600; white-space: pre-line; }
.dong-cua-chung { margin: 0 0 16px; padding: 14px 16px; border-radius: 16px; background: var(--the); border: 2px solid var(--tim-vien); }
.dong-cua-chung b { display: block; font-size: 1.05rem; color: var(--tim-dam); }
.dong-cua-chung span { display: block; margin-top: 2px; color: var(--chu-phu); font-size: .88rem; line-height: 1.45; }
.dong-cua-chung b span { display: inline; margin: 0; }
.thong-bao.loi { background: var(--do-nhat); border-color: var(--do); color: var(--do); }
.cham { display: inline-flex; gap: 4px; margin-left: 6px; }
.cham i { width: 6px; height: 6px; border-radius: 50%; background: var(--tim); }
.cap-nhat { display: flex; align-items: center; justify-content: space-between; color: var(--chu-phu); font-size: .88rem; padding: 0 4px; }
.cap-nhat > span { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Tự làm mới bị lỗi: giữ thẻ bé, chấm chuyển cam, ghi chú nhỏ */
.chua-cap-nhat { color: var(--chu); flex-basis: 100%; }
.cap-nhat > span { flex: 1; min-width: 0; }
.cap-nhat .phu { white-space: nowrap; align-self: flex-start; }
.cap-nhat.loi .song, .cap-nhat.loi .song::after { background: var(--cam); }
.cu .benh-nhan { opacity: .5; }
/* Chấm xanh: trang đang tự cập nhật */
.song { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--xanh); position: relative; }
.song::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--xanh); opacity: 0; }

/* Hiệu ứng: nhẹ, chỉ dùng transform/opacity (máy yếu vẫn mượt), và tắt hẳn khi điện thoại
   bật "Giảm chuyển động". Thẻ kết quả chỉ trượt lên khi phụ huynh bấm Tra cứu (lớp "vao"),
   không lặp lại mỗi lần trang tự làm mới 30 giây. */
@media (prefers-reduced-motion: no-preference) {
  .logo { animation: logo-vao .5s ease-out both; overflow: hidden; }
  /* Đầu trang: nền tím đổi sắc chậm, hai vòng tròn lớn "thở", vệt sáng lướt qua thẻ logo,
     tên và địa chỉ hiện dần lên khi mở trang */
  header { animation: nen-troi 16s ease-in-out infinite alternate; }
  header::before { animation: tho 9s ease-in-out infinite; }
  header::after { animation: tho 11s ease-in-out -4s infinite; }
  .logo::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(110deg, transparent 35%, rgba(169, 92, 200, .22) 50%, transparent 65%);
    transform: translateX(-120%); animation: loe 7s ease-in-out 1.2s infinite;
  }
  header h1 { animation: hien-len .5s .15s cubic-bezier(.2, .8, .3, 1) both; }
  header p { animation: hien-len .5s .28s cubic-bezier(.2, .8, .3, 1) both; }
  .trang-tri { animation: troi 7s ease-in-out infinite; }
  .t2 { animation-duration: 9s; animation-delay: -3s; }
  .t3 { animation-duration: 6s; animation-delay: -1s; }
  .t4 { animation-duration: 8s; animation-delay: -5s; }
  #ket-qua.vao > * { animation: hien-len .4s cubic-bezier(.2, .8, .3, 1) both; }
  #ket-qua.vao > :nth-child(2) { animation-delay: .07s; }
  #ket-qua.vao > :nth-child(n+3) { animation-delay: .14s; }
  #ket-qua.vao .tich { animation: tich .5s .25s cubic-bezier(.34, 1.56, .64, 1) both; }
  .vong.doi { animation: nay .7s ease-out; }
  .sap-mo::after {
    content: ""; position: absolute; inset: -2px; border-radius: inherit; pointer-events: none;
    box-shadow: 0 0 0 3px var(--tim-vien), 0 0 20px color-mix(in srgb, var(--tim) 35%, transparent);
    opacity: 0; animation: sang-vien 2.4s ease-in-out infinite;
  }
  .sap-mo .con-lai::before { animation: nhip-tim 1.6s ease-in-out infinite; }
  .song::after { animation: nhip 2s ease-out infinite; }
  .cham i { animation: cham 1s ease-in-out infinite; }
  .cham i:nth-child(2) { animation-delay: .15s; }
  .cham i:nth-child(3) { animation-delay: .3s; }
}
@keyframes nen-troi { from { background-position: 0% 30%; } to { background-position: 100% 70%; } }
@keyframes tho { 50% { transform: translate(8px, 5px) scale(1.12); } }
@keyframes loe { 0%, 72% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
@keyframes logo-vao { from { opacity: 0; transform: translateY(-6px) scale(.94); } }
@keyframes troi { 50% { transform: translate(5px, -9px) rotate(12deg); } }
@keyframes hien-len { from { opacity: 0; transform: translateY(14px) scale(.98); } }
@keyframes tich { from { transform: scale(0) rotate(-30deg); } }
@keyframes nay { 35% { transform: scale(1.15); } 65% { transform: scale(.96); } }
@keyframes sang-vien { 50% { opacity: 1; } }
@keyframes nhip-tim { 50% { transform: scale(1.7); opacity: .45; } }
@keyframes nhip { from { opacity: .6; } to { opacity: 0; transform: scale(2.8); } }
@keyframes cham { 40% { transform: translateY(-5px); opacity: 1; } 0%, 80%, 100% { opacity: .35; } }

footer {
  max-width: 480px;
  margin: 16px auto 32px;
  padding: 0 16px;
}
.loi-nhan { text-align: center; font-size: .92rem; }
.loi-nhan p { margin: 0; }
.loi-nhan .cam-on { color: var(--tim); font-weight: 700; }
/* Ô chèn thêm (số điện thoại, thông báo chung, đóng cửa, sắp mở cửa, giờ làm việc) mở ra / thu lại từ từ: ô tra cứu
   bên dưới trượt xuống êm, không nhảy. Mở xong (lớp "mo") thì bỏ cắt viền để vệt sáng quanh ô sắp mở cửa không bị cắt */
.truot { display: grid; grid-template-rows: 0fr; opacity: 0; visibility: hidden; transition: grid-template-rows .4s ease, opacity .25s ease, visibility 0s .4s; }
.truot.hien { grid-template-rows: 1fr; opacity: 1; visibility: visible; transition: grid-template-rows .4s ease, opacity .35s ease .1s, visibility 0s; }
.truot > div { overflow: hidden; min-height: 0; }
.truot.hien.mo > div { overflow: visible; }
.khong-truot .truot { transition: none !important; }
@media (prefers-reduced-motion: reduce) { .truot, .truot.hien { transition: none; } }
[hidden] { display: none !important; }