/* Giao diện 1: Bong bóng.
   Ngôn ngữ thiết kế: bong bóng thoại của logo, ấm như da em bé trong ảnh. Tím chỉ dùng đúng chỗ: chữ Nhi+, nút chính, bong bóng Liên hệ, dải cuối trang.
   Bảng màu: nền kem, bong bóng đào, san hô dịu làm điểm nhấn (đã so 3 bảng: đào san hô, hồng san hô, be đất nung; chọn đào san hô vì ăn với tông da trong ảnh).
   Nhịp cuộn: bong bóng đào (màn đầu, có ảnh và khối tra lượt) > bong bóng trắng (giờ làm) cạnh bong bóng tím (liên hệ) > 4 ảnh phòng khám > dải tím đậm (cuối trang).
   Mỗi ranh giới có một thứ gối qua: ảnh và đuôi thoại vắt từ màn đầu xuống giờ làm; đuôi tím chỉ xuống hàng ảnh; hàng ảnh gối xuống dải cuối trang. */
:root {
  --nen: #fffaf4;                         /* kem */
  --dao: #fce8db;                         /* bong bóng màn đầu */
  --dao-dam: #f8d9c6;                     /* góc đậm của bong bóng */
  --san-ho: #ee9c80;                      /* mảng san hô sau ảnh, dấu cộng màn đầu, nhãn Hôm nay */
  --san-ho-dam: #a8452a;                  /* chữ san hô, đạt AA trên kem và đào */
  --san-ho-chu-to: #cf5d3c;               /* biểu tượng san hô, đạt 3:1 trên đào */
  --bong-nau: #7a3a22;                    /* bóng đổ ấm của mảng san hô */
  --bong-tim-sau: #1c0626;                /* bóng tách bong bóng tím khỏi dải cuối trang */
  --lech-cam: 8px;                        /* mảng san hô lệch so với ảnh; đuôi đi theo mảng này */
  --san-ho-nhat: #ffd8c6;                 /* số điện thoại trên nền tím */
  --ke: #f0e2d6;                          /* kẻ mảnh trên nền trắng */
  --bo-bong: clamp(26px, 3.2vw, 48px);
  --bo-the: clamp(22px, 2.400vw, 34px);
  --bo-nut: 16px 16px 16px 5px;           /* nút là một bong bóng nhỏ: một góc nhọn như đuôi thoại */
  --ria: clamp(8px, 1.1vw, 16px);         /* từ mép màn hình tới bong bóng */
  --le: clamp(20px, 5.400vw, 64px);       /* đường lề của chữ */
  --rong: clamp(1240px, 84vw, 1480px);    /* bề rộng nội dung tối đa */
  --canh: max(var(--le), calc((100% - var(--rong)) / 2));
  --cao-dau: 65px;                        /* đầu trang: 44px nút + 20px đệm + 1px kẻ */
  --rong-duoi: clamp(44px, 4.600vw, 68px);
  --vien-anh: clamp(7px, .9vw, 12px);     /* khung trắng quanh ảnh, như nét bong bóng của logo */
  --goi-cuoi: clamp(30px, 3.600vw, 56px); /* hàng ảnh phòng khám gối xuống dải cuối trang */
  --nen-hom-nay: #fbe7e0;                 /* san hô 24% trên trắng; viết thẳng để máy cũ chưa có color-mix vẫn thấy dòng Hôm nay */
  --tim-cong: #9d6ec2;                    /* dấu + của Nhi+: tím nhạt theo ý chủ, đạt 3:1 trên nền đào */
}
/* Điện thoại: đầu trang thấp lại, dành chỗ cho nội dung */
@media (max-width: 639px) { :root { --cao-dau: 57px; } }

/* Nền kem ấm dần xuống đáy, để bong bóng trắng nổi lên và hai góc cong của dải cuối trang liền với nền */
body { background: linear-gradient(180deg, var(--nen) 50%, color-mix(in srgb, var(--dao) 72%, var(--nen)) 100%); }
/* Màn cao hơn nội dung: dải cuối trang giãn xuống chạm đáy màn hình. Màn thường trang dài hơn màn hình nên không đổi gì */
body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
.cuoi { flex: 1 0 auto; }
/* Đầu trang dính ở trên: trình duyệt chừa chỗ này khi cuộn tới phần tử đang nhận focus, kể cả khi lùi Shift+Tab */
html { scroll-padding-top: calc(var(--cao-dau) + 12px); }
main { position: relative; z-index: 1; }

h1, h2 { font-family: var(--chu-tieu-de); font-weight: 500; }
h2 { font-size: clamp(24px, 6.600vw, 28px); line-height: 1.15; letter-spacing: -.02em; color: var(--tim-dam); }

.trong { width: 100%; max-width: calc(var(--rong) + 2 * var(--le)); margin-inline: auto; padding-inline: var(--le); }

/* Nút */
.nut {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 44px; padding: 8px 18px;
  border-radius: var(--bo-nut);
  font: 500 16px/1.2 var(--chu-tieu-de);
  text-decoration: none; white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
/* Lớp phủ khi rê và chạm: đổi độ mờ chứ không đổi màu nền */
.nut::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  opacity: 0; pointer-events: none;
}
.nut:active::before { opacity: 1; }
@media (hover: hover) { .nut:hover::before { opacity: 1; } }
.nut-tim { background: var(--tim); color: #fff; }
.nut-tim::before { background: var(--tim-dam); }
.nut-nho { font-size: 15px; padding-inline: 16px; }

/* Đầu trang. Nút ở đầu trang chỉ hiện khi nút trong bong bóng không còn nằm trọn trong màn hình, mỗi lúc chỉ một nút chính.
   giao-dien.js gắn các lớp này; không có JS thì nút luôn hiện. */
.dau { position: sticky; top: 0; z-index: 40; background: var(--nen); box-shadow: 0 1px 0 var(--ke); }
.an-nut-dau .dau, .co-js:not(.da-do-nut) .dau { box-shadow: none; }
.an-nut-dau .dau .nut-nho, .co-js:not(.da-do-nut) .dau .nut-nho { visibility: hidden; }
.dau-trong {
  display: flex; align-items: center; gap: clamp(16px, 2.400vw, 28px);
  max-width: calc(var(--rong) + 2 * var(--le)); min-height: var(--cao-dau);
  margin-inline: auto; padding: calc((var(--cao-dau) - 45px) / 2) var(--le);
}
.dau-logo { margin-right: auto; padding: 4px 0; }
.dau-logo img { width: auto; height: 36px; }
/* Số điện thoại luôn ở sát phải, nút hiện ra thì không làm số nhảy chỗ */
.dau .nut-nho { order: 1; }
.dau-goi {
  order: 2; display: none; align-items: center; min-height: 44px;
  font: 500 16px/1 var(--chu-tieu-de); color: var(--san-ho-dam); text-decoration: none;
  font-variant-numeric: tabular-nums; letter-spacing: .01em;
}
.dau-goi:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (min-width: 640px) { .dau-goi { display: inline-flex; } }

/* Màn đầu: bong bóng đào có đuôi. Điện thoại: chữ trước, ảnh gối lên đáy bong bóng */
#tra-luot { scroll-margin-top: 8px; }
.vung-nhat {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1fr);
  padding-top: var(--ria);
  --goi-anh: clamp(84px, 24vw, 120px);    /* phần ảnh nằm trong bong bóng */
}
.man-dau { grid-area: 1 / 1; display: flex; flex-direction: column; min-width: 0; padding-inline: var(--ria); }
.bong {
  position: relative;
  flex: 1 1 auto; display: flex; flex-direction: column; width: 100%;
  /* Vị trí đuôi, tính theo bề rộng bong bóng: thân đuôi vào đúng đường lề của chữ */
  --trai-duoi: max(var(--bo-bong), calc(max(calc(var(--le) - var(--ria)), calc((100% - var(--rong)) / 2)) + 8px));
}
.bong-than {
  position: relative; /* không tạo lớp xếp chồng riêng: danh sách số đã tra phải nổi lên trên cả ảnh và đuôi, còn nền đào vẫn nằm dưới ảnh */
  flex: 1 1 auto; display: flex;
  /* Chữ trong bong bóng thẳng hàng với logo ở đầu trang */
  padding-block: clamp(20px, 3.200vh, 34px) calc(var(--goi-anh) + 18px); /* máy cũ chưa có svh */
  padding-block: clamp(20px, 3.200svh, 34px) calc(var(--goi-anh) + 18px);
  padding-inline: max(calc(var(--le) - var(--ria)), calc((100% - var(--rong)) / 2));
  border-radius: var(--bo-bong);
  color: var(--chu);
}
/* Nền nằm ở lớp riêng: chuyển động chỉ cắt lớp nền này, nên nút trong bong bóng bấm được từ khung hình đầu */
.bong-than::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  border-radius: inherit;
  background-color: var(--dao);
  background-image:
    radial-gradient(70% 90% at 100% 100%, var(--dao-dam) 0%, transparent 78%),
    radial-gradient(60% 70% at 0% 0%, #fff3ea 0%, transparent 74%);
}
/* Dấu cộng của logo phóng lớn, cùng tông, nghiêng nhẹ, chìm trong bong bóng.
   Có khung cắt riêng do giao-dien.js chèn: bản thân bong bóng không cắt, để danh sách số đã tra thò ra ngoài được */
.bong-trang-tri { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; border-radius: inherit; }
.bong-trang-tri::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  right: -112px; top: -96px;
  width: 300px; height: 300px;
  scale: .56; rotate: 16deg;
  background: color-mix(in srgb, var(--san-ho) 45%, var(--dao));
  clip-path: path("M150 0A45 45 0 0 1 195 45V105H255A45 45 0 0 1 255 195H195V255A45 45 0 0 1 105 255V195H45A45 45 0 0 1 45 105H105V45A45 45 0 0 1 150 0Z");
}

/* Đuôi thoại: dáng lấy từ logo, mũi chỉ vào bong bóng giờ làm ngay bên dưới.
   Điện thoại: đuôi nằm dưới ảnh, không chiếm chỗ. Lúc vào trang thấy bong bóng nở có đuôi, ảnh mở xong che đuôi và làm đường nối */
.bong-duoi {
  position: absolute; top: calc(100% - 1px); left: var(--trai-duoi);
  display: block; flex: none;
  width: var(--rong-duoi); height: auto;
  fill: var(--dao);
}

/* Hình mặt cười cỡ lớn trong trang không dùng ở phương án này */
.mat { display: none; }

/* Ảnh: khung trắng có đuôi như bong bóng logo, phía sau là một bong bóng san hô đặt lệch đều hai cạnh như bóng đổ. Cắt khung bằng object-fit */
.anh-minh-hoa {
  position: relative; z-index: 3; isolation: isolate;
  grid-area: 2 / 1; min-width: 0;
  height: clamp(188px, 58vw, 42vh); /* máy cũ chưa có svh: khung không được sập, vì ảnh nằm tuyệt đối trong khung */
  height: clamp(188px, 58vw, 42svh);
  margin: calc(-1 * var(--goi-anh)) var(--le) 34px; /* mép ảnh thẳng với đường lề của chữ */
}
.anh-minh-hoa img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 12% 42%;
  border: var(--vien-anh) solid #fff;
  border-radius: var(--bo-the);
  background: var(--dao-dam); /* mạng chậm: khung chờ màu đào, không phải ô trắng trông như ảnh hỏng */
}
/* Bóng nằm ở mảng san hô, màu nâu ấm: bóng tím đổ lên san hô làm mép dưới xỉn đi */
.anh-minh-hoa::before {
  content: ""; position: absolute; z-index: -1;
  inset: var(--lech-cam) calc(-1 * var(--lech-cam)) calc(-1 * var(--lech-cam)) var(--lech-cam);
  border-radius: var(--bo-the);
  background: var(--san-ho);
  box-shadow: 0 22px 44px -26px color-mix(in srgb, var(--bong-nau) 45%, transparent);
}
/* Đuôi san hô nối liền mảng san hô: đuôi trắng đè lên mảng này trông như một vết khuyết */
.anh-minh-hoa::after {
  content: ""; position: absolute; z-index: -1;
  left: calc(var(--bo-the) + 10px + var(--lech-cam)); top: calc(100% + var(--lech-cam) - 1px);
  width: 48px; height: 29px;
  background: var(--san-ho);
  clip-path: path("M0 0H2.700C6.200 0 8.900 .9 12.400 2.900L33.800 23.900C37.300 27.700 44.400 26.600 44.400 20.100C44.400 13.300 44.400 6.200 48 0Z");
}

/* Điện thoại đứng: mép phải mảng san hô trùng mép phải bong bóng đào, cũng là mép bảng giờ và Liên hệ, để không còn vệt đào hẹp giữa hai mép */
@media (max-width: 479px) { .anh-minh-hoa::before { inset: var(--lech-cam) calc(var(--ria) - var(--le)) calc(-1 * var(--lech-cam)) var(--lech-cam); } }

/* Một bong bóng nhỏ có ống nghe, dấu hiệu y tế của màn đầu, giao-dien.js chèn vào, gối lên góc ảnh */
.bong-nho {
  position: absolute; z-index: 2; pointer-events: none;
  width: var(--co-nho); height: var(--co-nho);
  border-radius: 34%;
  box-shadow: 0 12px 22px -14px color-mix(in srgb, var(--tim-dam) 70%, transparent);
}
.bong-nho::before {
  content: ""; position: absolute; inset: 20%;
  background: var(--mau-hinh);
  -webkit-mask: var(--hinh) center / contain no-repeat;
  mask: var(--hinh) center / contain no-repeat;
}
.bong-nho::after {
  content: ""; position: absolute; top: calc(100% - 1px);
  width: 19px; height: 12px;
  background: inherit;
  clip-path: path("M0 0H1C2.500 0 3.500 .4 4.700 1.200L13.300 9.800C14.800 11.300 17.400 10.900 17.400 8.300C17.400 5.500 17.400 2.500 19 0Z");
}
.bong-nho-1 {
  --co-nho: clamp(46px, 5vw, 76px); --mau-hinh: var(--tim); --hinh: url("/anh/bieu-tuong/stethoscope.svg");
  background: #fff;
  top: clamp(-20px, -1.400vw, -14px); right: 22px;
}
.bong-nho-1::after { left: 22%; }

/* Khối chữ: một hàng lớn, xuống dòng tự nhiên. Nút rộng theo chữ, ba liên kết phụ đứng cạnh nếu đủ chỗ */
.bong-chu { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; align-content: center; column-gap: clamp(14px, 1.800vw, 26px); }
h1, .dia-chi { flex: 1 0 100%; }
h1 { display: flex; flex-direction: column; }
.dong, .dong > span { display: block; }
.dong-1, .dong-2 {
  font-size: clamp(23px, 6.700vw, 30px);
  font-weight: 400; line-height: 1.2; letter-spacing: -.02em;
  color: var(--chu);
}
.dong-2 { font-weight: 500; }
/* Tên Nhi+ đúng dáng logo: Nunito 900 mềm, tròn nét, dấu cộng cùng độ đậm, nhỏ hơn chữ một chút và nâng nhẹ */
.ten-nhi {
  margin-top: 2px;
  font-family: var(--chu-logo); font-weight: 900;
  font-size: min(29vw, 124px, 24vh); /* máy cũ chưa có svh */
  font-size: min(29vw, 124px, 24svh);
  line-height: .98; letter-spacing: -.012em; white-space: nowrap;
  color: var(--tim);
}
/* will-change đưa chữ sang lớp riêng để bỏ viền đỏ xanh của khử răng cưa LCD trên chữ rất to */
.ten-nhi > span { margin-left: -.05em; will-change: translate; }
.ten-nhi .cong {
  display: inline-block; position: relative; top: -.29em;
  margin-left: .02em;
  font-size: .78em; line-height: 0; letter-spacing: 0;
  color: var(--tim-cong);
}

/* Giới hạn 18.8em để địa chỉ xuống dòng đúng trước "TP Hồ Chí Minh", không tách tên phường */
.dia-chi { margin-top: 6px; max-width: 18.8em; font-size: clamp(14px, 4vw, 16px); line-height: 1.45; color: var(--chu-phu); }

/* Tra lượt khám: một bong bóng trắng có đuôi, cùng dáng với khung ảnh. Ô nhập và nút Tra cứu là một thanh liền, nút là mảng tím duy nhất trong màn đầu */
.tra-luot {
  position: relative; flex: 1 1 100%; min-width: 0;
  margin-top: 12px; padding: 13px 12px 12px;
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 18px 34px -24px color-mix(in srgb, var(--bong-nau) 55%, transparent);
}
.tra-luot::after {
  content: ""; position: absolute; left: 26px; top: calc(100% - 1px);
  width: 19px; height: 12px;
  background: #fff;
  clip-path: path("M0 0H1C2.500 0 3.500 .4 4.700 1.200L13.300 9.800C14.800 11.300 17.400 10.900 17.400 8.300C17.400 5.500 17.400 2.500 19 0Z");
}
/* Tiêu đề nhỏ, dấu bong bóng san hô giống dấu ở bảng giờ */
.tra-luot-tieu-de {
  display: flex; align-items: center; gap: 8px;
  font-size: 17px; line-height: 1.3; letter-spacing: -.012em;
}
.tra-luot-tieu-de::before {
  content: ""; flex: none;
  width: 16px; height: 17px;
  background: var(--san-ho-chu-to);
  clip-path: path("M4 0H12A4 4 0 0 1 16 4V9.700A4 4 0 0 1 12 13.700H11.400L11.800 16Q11.900 16.700 10.800 16.200L6.800 13.700H4A4 4 0 0 1 0 9.700V4A4 4 0 0 1 4 0Z");
}
.tra-luot-nhan { display: block; margin-top: 3px; font-size: 14px; line-height: 1.4; color: var(--chu-phu); }
/* Viền đủ 3:1 trên nền trắng để phụ huynh thấy ngay đây là ô nhập. Vòng tím khi đang nhập thay cho đường viền lấy nét của riêng ô */
.tra-luot-hang {
  position: relative;
  display: flex; align-items: center; gap: 4px;
  margin-top: 9px; padding: 3px;
  background: var(--nen);
  border: 1.5px solid color-mix(in srgb, var(--tim) 55%, #fff);
  border-radius: 17px 17px 17px 7px;
}
.tra-luot-hang:focus-within { border-color: var(--tim); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tim) 22%, transparent); }
.o-nhap { flex: 1 1 auto; min-width: 0; }
.o-nhap input {
  display: block; width: 100%; height: 48px; padding: 0 4px 0 11px;
  border: 0; border-radius: 12px; background: transparent; outline: none;
  font: 500 17px/1.2 var(--chu-tieu-de); font-variant-numeric: tabular-nums; letter-spacing: .005em;
  color: var(--chu);
}
.o-nhap input::placeholder { font-weight: 400; color: var(--chu-phu); opacity: 1; }
.o-nhap input:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px var(--nen) inset; -webkit-text-fill-color: var(--chu); }
.nut-lon {
  flex: none; min-height: 48px; padding: 8px 13px 8px 17px;
  border: 0; border-radius: 13px 13px 13px 5px;
  font-size: 16px; font-weight: 500;
  background: var(--tim); color: #fff;
  cursor: pointer;
}
.nut-lon::before { background: var(--tim-dam); }
.nut-lon .ico { width: 18px; height: 18px; }
.nut-lon:disabled { opacity: .72; cursor: progress; }

/* Số đã tra trên máy này: nổi trên bố cục, bong bóng trắng ngay dưới thanh nhập */
.goi-y {
  position: absolute; z-index: 20; left: -1.5px; right: -1.5px; top: calc(100% + 8px);
  max-height: 236px; overflow-y: auto; padding: 8px;
  background: #fff;
  border: 1px solid var(--tim-vien);
  border-radius: 16px 16px 16px 6px;
  box-shadow: 0 22px 40px -22px color-mix(in srgb, var(--tim-dam) 60%, transparent);
}
.goi-y[hidden] { display: none; }
.goi-y-nhan { padding: 2px 8px 4px; font-size: 13px; line-height: 1.4; color: var(--chu-phu); }
.goi-y button {
  display: block; width: 100%; min-height: 44px; padding: 8px;
  border: 0; border-radius: 10px; background: transparent; cursor: pointer;
  text-align: left; font: 500 16px/1.2 var(--chu-tieu-de); font-variant-numeric: tabular-nums; color: var(--tim-dam);
  -webkit-tap-highlight-color: transparent;
}
.goi-y button:active { background: var(--tim-nhat); }
@media (hover: hover) { .goi-y button:hover { background: var(--tim-nhat); } }

/* Thông báo đóng cửa, sắp mở, thông báo chung: gọn, nằm trên ô nhập */
.tb-tra-luot:not([hidden]) {
  display: grid; gap: 1px; margin-bottom: 10px; padding: 8px 12px;
  border-radius: 12px 12px 12px 4px;
  background: var(--tim-nhat); color: var(--chu);
  font-size: 13.500px; line-height: 1.4;
}
.tb-tra-luot b { font: 500 14.500px/1.35 var(--chu-tieu-de); color: var(--tim-dam); }
.tb-dong-cua:not([hidden]) { background: var(--nen-hom-nay); }
.tb-dong-cua b { color: var(--san-ho-dam); }

/* Kết quả: nằm ngay dưới ô nhập, trong cùng bong bóng trắng */
.ket-qua-tra-luot { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.ket-qua-tra-luot:empty { display: none; }
.ket-qua-tra-luot > :first-child { margin-top: 12px; }
.ket-qua-tra-luot.dang-gian { overflow: hidden; }
.the {
  position: relative; min-width: 0;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px;
  padding: 13px 14px 14px;
  background: var(--nen);
  border: 1px solid var(--ke);
  border-radius: 16px 16px 16px 6px;
  font-size: 14.500px; line-height: 1.45; color: var(--chu-phu);
}
.the .ten { font: 500 15px/1.35 var(--chu-tieu-de); color: var(--chu); }
.cu .the { opacity: .5; }

/* Vòng số lượt: điểm nhìn chính, cùng cách dựng với khung ảnh: nền trắng, viền đậm, một mảng màu đặt lệch phía sau */
.so-luot { display: flex; align-items: center; gap: 18px; min-width: 0; }
.vong {
  position: relative; isolation: isolate; flex: none;
  display: grid; place-items: center;
  width: 84px; height: 84px; margin: 0 6px 6px 0;
  font: 600 38px/1 var(--chu-tieu-de); font-variant-numeric: tabular-nums; letter-spacing: -.03em;
  color: var(--tim-dam);
}
.vong::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: 50%;
  translate: 6px 6px;
  background: var(--san-ho);
}
/* Nền và viền nằm ở lớp riêng phía trên mảng san hô, để vòng tròn trọn vẹn */
.vong::after { content: ""; position: absolute; inset: 0; z-index: -1; border: 4px solid var(--tim); border-radius: 50%; background: #fff; }
.so-luot > span { min-width: 0; font: 500 17px/1.3 var(--chu-tieu-de); letter-spacing: -.01em; color: var(--tim-dam); text-wrap: balance; }
/* Đã tới lượt, lượt kế tiếp: không còn số để đếm, thay vòng bằng một bong bóng tím */
.so-luot > .trang-thai {
  padding: 11px 16px; border-radius: var(--bo-nut);
  background: var(--tim); color: #fff;
  font: 500 17px/1.3 var(--chu-tieu-de); text-wrap: balance;
}
.tham-khao { padding-top: 10px; border-top: 1px solid var(--ke); color: var(--chu); }
.tham-khao > p:first-child { text-wrap: balance; } /* giờ không rơi một mình xuống dòng dưới */
.tham-khao .gio {
  display: inline-block; padding: 0 8px; border-radius: 8px 8px 8px 2px;
  background: var(--nen-hom-nay);
  font: 600 16px/1.5 var(--chu-tieu-de); font-variant-numeric: tabular-nums; color: var(--san-ho-dam);
}
.tham-khao .ghi-chu { display: block; margin-top: 5px; font-size: 13px; line-height: 1.45; color: var(--chu-phu); }

/* Đến ngay: thẻ ấm hẳn lên, vòng đổi màu, thêm dải có dấu định vị */
.den-ngay { background: var(--nen-hom-nay); border-color: var(--san-ho); }
.den-ngay .vong { color: var(--san-ho-dam); }
.den-ngay .vong::after { border-color: var(--san-ho-dam); }
.den-ngay .so-luot > span { color: var(--san-ho-dam); }
.hen {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 13px; border-radius: 12px 12px 12px 4px;
  background: var(--san-ho-dam); color: #fff;
  font: 500 15.500px/1.35 var(--chu-tieu-de);
}
.hen::before {
  content: ""; flex: none;
  width: 15px; height: 15px; margin-inline: 2px;
  border-radius: 50% 50% 50% 0; rotate: -45deg;
  background: radial-gradient(circle, var(--san-ho-dam) 3px, #fff 3.600px);
}

/* Qua lượt: viền đứt, dấu chấm than vẽ bằng hình; đọc được ngay cả khi không phân biệt màu */
.qua-so { background: #fff; border: 1.5px dashed var(--san-ho-chu-to); }
.benh-nhan > .trang-thai { font: 500 16.500px/1.35 var(--chu-tieu-de); color: var(--chu); text-wrap: pretty; }
.qua-so > .trang-thai { display: flex; align-items: flex-start; gap: 10px; color: var(--san-ho-dam); }
.qua-so > .trang-thai::before, .thong-bao.loi::before {
  content: ""; flex: none;
  width: 26px; height: 26px; border-radius: 50%;
  background:
    radial-gradient(circle at 50% 74%, #fff 1.800px, transparent 2.300px),
    linear-gradient(#fff, #fff) 50% 30% / 3px 9px no-repeat,
    var(--san-ho-dam);
}

/* Đã khám xong: êm và kết thúc, nền tím nhạt, dấu tích tròn */
.benh-nhan:has(.xong) { background: var(--tim-nhat); border-color: var(--tim-vien); }
.benh-nhan > .trang-thai.xong { display: flex; align-items: center; gap: 12px; font-size: 18px; color: var(--tim-dam); }
.tich { position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--tim); }
.tich::after {
  content: ""; position: absolute; left: 50%; top: 45%;
  width: 16px; height: 9px;
  border: solid #fff; border-width: 0 0 3px 3px; border-radius: 1px;
  translate: -50% -50%; rotate: -45deg;
}

/* Đóng cửa: xám tím, trầm hẳn đi */
.dong-cua { background: color-mix(in srgb, var(--chu-phu) 8%, #fff); border-color: transparent; }

/* Đang tra, không có số trong danh sách, lỗi */
.thong-bao {
  padding: 11px 14px; border-radius: 14px 14px 14px 5px;
  background: var(--nen);
  font-size: 14.500px; line-height: 1.45; color: var(--chu);
}
.thong-bao.loi { display: flex; align-items: flex-start; gap: 10px; background: var(--nen-hom-nay); color: var(--san-ho-dam); }
.cham { display: inline-flex; gap: 4px; margin-left: 6px; vertical-align: 2px; }
.cham i { width: 5px; height: 5px; border-radius: 50%; background: var(--tim); }

/* Dòng cập nhật và nút Làm mới: nhỏ về mắt, vùng bấm đủ 44px; lề âm để vùng bấm không làm dòng cao ra */
.cap-nhat {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin: -4px 2px -9px 4px;
  font-size: 13px; line-height: 1.35; color: var(--chu-phu);
}
.cap-nhat > span { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 7px; min-width: 0; }
.song { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--tim-cong); box-shadow: 0 0 0 3px var(--tim-nhat); }
.cap-nhat.loi .song { background: var(--san-ho-dam); box-shadow: 0 0 0 3px var(--nen-hom-nay); }
.chua-cap-nhat { flex: 1 1 100%; color: var(--san-ho-dam); }
.cap-nhat .phu {
  flex: none; min-width: 44px; min-height: 44px; padding: 0 9px;
  border: 0; border-radius: 12px; background: transparent; cursor: pointer;
  font: 500 14px/1.2 var(--chu-tieu-de); color: var(--tim);
  -webkit-tap-highlight-color: transparent;
}
.cap-nhat .phu:active { background: var(--tim-nhat); }
@media (hover: hover) { .cap-nhat .phu:hover { background: var(--tim-nhat); } }
.cap-nhat .phu:disabled { color: var(--chu-phu); cursor: progress; }

/* 3 nút phụ: chỉ chữ và biểu tượng san hô, không viền, không ô */
.nut-phu { flex: 1 1 100%; display: flex; justify-content: flex-start; gap: clamp(4px, 1.600vw, 8px); margin: 10px 0 0 -6px; }
.nut-phu .nut {
  gap: 6px; min-height: 44px; padding: 6px;
  border-radius: 12px; color: var(--chu);
  font-size: clamp(13.500px, 3.700vw, 15px); font-weight: 400;
}
.nut-phu .nut::before { background: color-mix(in srgb, var(--san-ho) 22%, transparent); }
.nut-phu .ico { width: 17px; height: 17px; color: var(--san-ho-chu-to); }

/* Hình ảnh phòng khám: 4 ảnh thật, vuông, không lọc màu, không phủ màu. Khung cùng dáng với ảnh màn đầu: viền trắng dày, mảng san hô đặt lệch phía sau, đuôi thoại.
   Hàng ảnh cuối gối xuống dải cuối trang, như mọi ranh giới khác của trang */
.anh-phong-kham { position: relative; margin-top: 46px; --lech-o: clamp(6px, .700vw, 10px); --vien-o: clamp(6px, .700vw, 10px); --bo-o: clamp(18px, 1.800vw, 26px); }
.luoi-anh { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 18px; }
.luoi-anh li { position: relative; isolation: isolate; min-width: 0; }
.luoi-anh img {
  display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover;
  border: var(--vien-o) solid #fff;
  border-radius: var(--bo-o);
  background: var(--dao-dam);
}
.luoi-anh li::before {
  content: ""; position: absolute; z-index: -1;
  inset: var(--lech-o) calc(-1 * var(--lech-o)) calc(-1 * var(--lech-o)) var(--lech-o);
  border-radius: var(--bo-o);
  background: var(--san-ho);
  box-shadow: 0 18px 32px -24px color-mix(in srgb, var(--bong-nau) 50%, transparent);
}
@media (min-width: 760px) { .luoi-anh { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 2.400vw, 34px); } }

/* Giờ làm và liên hệ: bong bóng trắng cạnh bong bóng tím, trên nền kem */
.gio { position: relative; }
.gio-luoi {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px;
  max-width: none; padding-inline: calc(var(--ria) + 4px);
}

/* Bong bóng trắng: tiêu đề, bảng giờ, hai câu chọn giờ gom làm một */
.gio-luoi > div:first-child {
  --thut: 10px;
  position: relative; min-width: 0;
  padding: clamp(18px, 5vw, 24px) clamp(14px, 4vw, 22px) clamp(16px, 4.600vw, 22px);
  background: #fff;
  border-radius: var(--bo-the);
  box-shadow: 0 1px 0 var(--ke), 0 24px 46px -34px color-mix(in srgb, var(--tim-dam) 42%, transparent);
}

/* Bảng thò ra hai bên đúng bằng phần đệm ô: chữ thẳng hàng với tiêu đề, dòng Hôm nay rộng hơn chữ một chút */
.bang-gio {
  width: calc(100% + 2 * var(--thut)); margin: 8px calc(-1 * var(--thut)) 0;
  border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums;
}
.bang-gio th, .bang-gio td {
  padding: 11px 0 11px 10px;
  text-align: left; vertical-align: baseline; white-space: nowrap;
  border-bottom: 1px solid var(--ke);
  font: 500 clamp(13.500px, 3.800vw, 15px)/1.3 var(--chu-tieu-de);
  letter-spacing: -.008em;
  color: var(--tim-dam);
}
.bang-gio tr > :first-child { padding-left: var(--thut); }
.bang-gio tr > :last-child { padding-right: var(--thut); }
/* Nhãn Ngày, Sáng, Chiều đã có sẵn trong trang dành cho trình đọc màn hình: cho hiện ra để phân biệt hai cột giờ */
.bang-gio thead.chi-doc { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; }
.bang-gio thead th { padding-block: 2px 7px; font: 400 13px/1.4 var(--chu-than); letter-spacing: 0; color: var(--chu-phu); }
.bang-gio tbody th { font: 500 clamp(13.500px, 3.700vw, 15px)/1.3 var(--chu-than); white-space: normal; text-wrap: balance; color: var(--chu); }
.bang-gio tbody tr:last-child > * { border-bottom-color: transparent; }
.bang-gio tr[data-thu="6"] td:last-child, .bang-gio tr[data-thu="0"] td { color: var(--chu-phu); font-weight: 400; }
/* Ô Nghỉ gộp hai cột: chữ nằm giữa hai cột, để không đọc thành "sáng nghỉ, chiều chưa rõ". Không tô nền: trông như ô nhập bị khoá */
.bang-gio tr[data-thu="0"] td { text-align: center; }
.bang-gio tr.hom-nay th, .bang-gio tr.hom-nay td { background: var(--nen-hom-nay); border-bottom-color: transparent; color: var(--tim-dam); }
.bang-gio tr:has(+ tr.hom-nay) > *, .bang-gio thead:has(+ tbody tr.hom-nay:first-child) th { border-bottom-color: transparent; }
.bang-gio tr.hom-nay th { border-radius: 14px 0 0 14px; }
.bang-gio tr.hom-nay td:last-child { border-radius: 0 14px 14px 0; }
.nhan-hom-nay {
  display: block; width: fit-content; margin-top: 4px; padding: 1px 9px; border-radius: 8px 8px 8px 2px;
  background: var(--san-ho); color: var(--chu);
  font: 500 12.500px/1.5 var(--chu-tieu-de); letter-spacing: 0; white-space: nowrap;
}

/* Ít phải chờ, Sau 17:00: câu giúp phụ huynh chọn giờ. Bong bóng nhỏ làm dấu: tím là vắng, san hô là đông */
/* Đường kẻ trên cùng dài bằng đường kẻ các dòng bảng; khoảng trên sát lại vì dòng cuối bảng đã có đệm riêng */
.so-lieu {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px clamp(12px, 3.600vw, 28px);
  margin: 2px calc(-1 * var(--thut)) 0; padding: 14px var(--thut) 0;
  border-top: 1px solid var(--ke);
}
.so-lieu > div { display: grid; align-content: start; gap: 2px; }
.so-lieu dt {
  display: flex; align-items: center; gap: 8px;
  font: 500 15.500px/1.3 var(--chu-tieu-de); letter-spacing: -.008em; color: var(--tim-dam);
}
.so-lieu dt::before {
  content: ""; flex: none;
  width: 16px; height: 17px;
  background: var(--tim);
  clip-path: path("M4 0H12A4 4 0 0 1 16 4V9.700A4 4 0 0 1 12 13.700H11.400L11.800 16Q11.900 16.700 10.800 16.200L6.800 13.700H4A4 4 0 0 1 0 9.700V4A4 4 0 0 1 4 0Z");
}
.so-lieu > div + div dt::before { background: var(--san-ho-chu-to); }
/* Cân hai dòng để mốc giờ không bị tách */
.so-lieu dd { font-size: 14.500px; line-height: 1.45; color: var(--chu-phu); text-wrap: balance; }

/* Liên hệ: mảng tím có chủ đích của trang, là bong bóng có đuôi, chỉ xuống hàng ảnh phòng khám */
.lien-he {
  position: relative; isolation: isolate; min-width: 0;
  display: grid; grid-template-columns: minmax(0, 1fr); align-content: start;
  padding: clamp(20px, 5.400vw, 26px) clamp(18px, 5vw, 26px) clamp(20px, 5vw, 26px);
  border-radius: var(--bo-the);
  background-color: var(--tim);
  color: var(--tren-tim);
  box-shadow: 0 18px 30px -22px color-mix(in srgb, var(--bong-tim-sau) 60%, transparent);
}
/* Nền và dấu cộng chìm nằm ở lớp riêng được cắt tròn; bản thân bong bóng không cắt để đuôi thò ra được */
.lien-he::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border-radius: inherit;
  background-color: var(--tim);
}
/* Dấu cộng chìm trong bong bóng tím, giao-dien.js chèn vào */
.lien-he-trang-tri {
  position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  border-radius: inherit;
}
.lien-he-trang-tri::before {
  content: ""; position: absolute;
  right: -100px; top: -104px;
  width: 300px; height: 300px;
  scale: .5; rotate: 16deg;
  background: color-mix(in srgb, #fff 8%, var(--tim));
  clip-path: path("M150 0A45 45 0 0 1 195 45V105H255A45 45 0 0 1 255 195H195V255A45 45 0 0 1 105 255V195H45A45 45 0 0 1 45 105H105V45A45 45 0 0 1 150 0Z");
}
/* Đuôi tím, chỉ xuống hàng ảnh */
.lien-he::after {
  content: ""; position: absolute; z-index: -2; pointer-events: none;
  right: calc(var(--bo-the) + 14px); top: calc(100% - 1px);
  width: 44px; height: 26px;
  background: var(--tim);
  scale: -1 1;
  clip-path: path("M0 0H2.500C5.700 0 8.200 .8 11.400 2.600L31 21.300C34.200 24.700 40.700 23.700 40.700 17.900C40.700 11.900 40.700 5.500 44 0Z");
}
.lien-he :focus-visible { outline-color: #fff; }
.lien-he h2 { color: #fff; }
.lien-he address { padding-top: 8px; max-width: 19em; font-size: clamp(14.500px, 4vw, 16px); line-height: 1.5; }
.lien-he address a {
  display: inline-block; margin-top: 4px; padding-block: 5px; /* đủ 44px ở mọi cỡ: đây là liên kết bấm nhiều nhất trên điện thoại */
  white-space: nowrap;
  font: 500 clamp(31px, 9.200vw, 38px)/1.15 var(--chu-tieu-de);
  font-variant-numeric: tabular-nums; letter-spacing: -.022em;
  color: var(--san-ho-nhat); text-decoration: none;
}
.lien-he address a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .14em; }
.lien-he address a:focus-visible { outline-offset: 1px; }
/* Máy cảm ứng: bong bóng nhỏ có hình điện thoại đứng trước số, cho thấy chạm vào là gọi được. giao-dien.js chèn vào */
.dau-so { display: none; }
@media (hover: none) {
  .lien-he address a { display: inline-flex; align-items: center; gap: .3em; }
  .dau-so {
    display: grid; place-items: center; flex: none;
    width: 1em; height: 1em;
    border-radius: .3em .3em .3em .1em;
    background: var(--san-ho-nhat); color: var(--tim-dam);
  }
  .dau-so .ico { width: .56em; height: .56em; }
}
.ghi-chu { display: grid; gap: 4px; margin-top: 8px; font-size: 14.500px; line-height: 1.5; color: var(--tren-tim); text-wrap: pretty; }

/* Cuối trang: dải tím đậm mép cong, đón hàng ảnh phòng khám gối xuống; logo nằm trong bong bóng trắng để giữ nguyên màu logo */
.cuoi {
  position: relative;
  margin-top: calc(-1 * var(--goi-cuoi));
  padding-block: calc(var(--goi-cuoi) + 42px) clamp(20px, 2.600vw, 30px);
  border-radius: var(--bo-bong) var(--bo-bong) 0 0;
  background: var(--tim-dam);
  color: var(--tren-tim);
}
.cuoi-trong { display: flex; align-items: center; gap: 16px; font-size: 14px; line-height: 1.4; }
.cuoi img {
  flex: none;
  width: auto; height: 44px; padding: 8px 14px;
  background: #fff; border-radius: 14px 14px 14px 4px;
}
.cuoi p { min-width: 0; text-wrap: balance; }

/* Điện thoại đứng: mọi thứ chung một đường lề với logo và chữ màn đầu, hai mép bong bóng bằng nhau từ trên xuống dưới */
@media (max-width: 759px) {
  .gio-luoi { padding-inline: var(--ria); gap: 14px; }
  .gio-luoi > div:first-child { --thut: 7px; padding-inline: calc(var(--le) - var(--ria)); }
  .lien-he { padding-inline: calc(var(--le) - var(--ria)); }
  :root { --goi-cuoi: 26px; }
  .cuoi { padding-bottom: 14px; }
}

/* Dòng Hôm nay trên điện thoại: hai ô giờ nằm giữa dòng vì nhãn làm dòng cao lên */
@media (max-width: 639px) {
  .nut-nho { padding-inline: 14px; }
  /* Logo và tên cùng một hàng cho dải thấp. Xuống dòng tham lam, không cân, để không tách đôi cụm "Chuyên khoa" */
  .cuoi-trong { gap: 12px; }
  .cuoi img { height: 40px; padding: 7px 12px; }
  .cuoi p { text-wrap: wrap; }
  .bang-gio tr.hom-nay td { vertical-align: middle; }
  .bang-gio tr[data-thu="1,2,3,4,5"] th, .bang-gio tr[data-thu="6"] th { white-space: nowrap; }
}

/* Điện thoại đứng: đuôi tím không dài thêm, kẻo mũi đuôi chạm hàng ảnh */
@media (max-width: 479px) {
  .lien-he::after { --dai-duoi-tim: 1; }
}

/* Máy nhỏ: ba liên kết phụ chia đều, biểu tượng nằm trên chữ; bảng giờ sít lại */
@media (max-width: 359px) {
  .bong-trang-tri::before { right: -120px; } /* dấu cộng màn đầu không chạm dòng Chuyên khoa Nhi */
  .nut-phu { justify-content: space-between; margin-left: 0; gap: 0; }
  .nut-phu .nut { padding-inline: 2px; gap: 5px; font-size: 13.500px; }
  /* Màn 320: bỏ mũi tên trên nút để ô nhập đủ chỗ cho cả số điện thoại */
  .nut-lon { padding-inline: 14px; }
  .nut-lon .ico { display: none; }
  .o-nhap input { padding-left: 9px; font-size: 16px; }
  .tra-luot { padding-inline: 10px; }
  .so-luot { gap: 14px; }
  .vong { width: 74px; height: 74px; font-size: 34px; }
  .so-luot > span { font-size: 16px; }
  .nut-phu .ico { width: 15px; height: 15px; }
  .gio-luoi > div:first-child { --thut: 6px; }
  .bang-gio th, .bang-gio td { padding-left: 7px; font-size: 13px; letter-spacing: -.016em; }
  .bang-gio tbody th { font-size: 13px; }
  .so-lieu dt { font-size: 14.500px; gap: 6px; }
  .so-lieu dd { font-size: 13.500px; }
  .lien-he address { font-size: 14px; }
}

@media (min-width: 640px) {
  .nhan-hom-nay { display: inline-block; margin: 0 0 0 8px; vertical-align: 1px; }
  .gio-luoi > div:first-child { --thut: 12px; }
  .bang-gio th, .bang-gio td { padding-block: 13px; font-size: 16px; }
  .bang-gio thead th { padding-block: 2px 7px; font-size: 13px; }
  .bang-gio tbody th { white-space: nowrap; font-size: 15.500px; }
  .dia-chi { max-width: none; }
}

/* Máy bảng, máy tính, và điện thoại xoay ngang: màn đầu hai cột. Chữ bên trái; ảnh bên phải, vắt qua đáy bong bóng xuống phần dưới */
@media (min-width: 760px), (min-width: 560px) and (max-height: 520px) {
  :root {
    --cot-phai: clamp(280px, 41vw, 640px);  /* cột ảnh và cột Liên hệ thẳng hàng với nhau */
    --khe: clamp(20px, 2.400vw, 32px);
    --vat-anh: clamp(10px, 1.800svh, 18px);  /* ảnh vắt qua đáy cụm bong bóng và đuôi */
    --cot-chu: calc(min(100vw - 2 * var(--le), var(--rong)) - var(--cot-phai) - var(--khe) - 12px);
    --dinh-anh: clamp(16px, 3.400svh, 34px);
    --lech-cam: 15px;
  }
  .vung-nhat { --goi-anh: 0px; }
  /* Chiều cao theo màn hình nhưng không vượt tỉ lệ bề rộng, máy bảng đứng không bị kéo dài */
  .man-dau { min-height: clamp(400px, min(calc(100svh - var(--cao-dau) - 170px), 62vw), 730px); }
  .bong-than { padding-block: clamp(18px, 4svh, 40px); }
  .bong-trang-tri::before { right: calc(var(--canh) + var(--cot-phai) + 24px); top: -84px; scale: .72; }
  .bong-duoi { position: static; margin: -1px 0 0 var(--trai-duoi); }
  .bong-chu { max-width: var(--cot-chu); }
  .anh-minh-hoa {
    grid-area: 1 / 1; justify-self: end;
    width: var(--cot-phai); height: auto;
    margin: var(--dinh-anh) var(--canh) calc(-1 * var(--vat-anh)) 0;
  }
  .anh-minh-hoa img { object-position: 16% 45%; }
  .bong-nho-1 { top: clamp(22px, 8%, 54px); right: auto; left: calc(var(--co-nho) * -.42); }
  .bong-nho-1::after { left: auto; right: 20%; scale: -1 1; }
  .dong-1, .dong-2 { font-size: clamp(24px, min(2.900vw, 5.400vh), 44px); font-size: clamp(24px, min(2.900vw, 5.400svh), 44px); }
  .ten-nhi { font-size: clamp(84px, min(10.500vw, 18.500vh), 160px); font-size: clamp(84px, min(10.500vw, 18.500svh), 160px); }
  .dia-chi { margin-top: clamp(4px, 1svh, 10px); font-size: clamp(15px, 1.200vw, 17px); }
  .tra-luot { max-width: 600px; margin-top: clamp(12px, 2svh, 20px); padding: 15px 16px 16px; border-radius: 24px; }
  .tra-luot::after { left: 30px; }
  .tra-luot-tieu-de { font-size: 18px; }
  .tra-luot-nhan { font-size: 14.500px; }
  .nut-phu { flex: 1 1 100%; margin: clamp(14px, 2.200svh, 22px) 0 0 -6px; } /* -6px bù đệm trong của nút, biểu tượng thẳng mép khối tra lượt */
  .nut-phu .nut { font-size: 15px; }
  .anh-phong-kham { margin-top: clamp(44px, 4vw, 60px); }

  /* Hàng dưới: bong bóng giờ làm hai cột với phần liên hệ từ khi đủ rộng */
  .gio-luoi { padding-inline: var(--canh); margin-top: 16px; }
  .gio-luoi > div:first-child { padding: clamp(20px, 2.300vw, 30px) clamp(18px, 2.300vw, 32px) clamp(18px, 2vw, 26px); }
  .lien-he { margin-top: 0; }
  h2 { font-size: clamp(24px, 2vw, 30px); }
}

/* Máy bảng đứng: cột chữ hẹp, địa chỉ xuống dòng đúng trước "TP Hồ Chí Minh" */
@media (min-width: 760px) and (max-width: 999px) { .dia-chi { max-width: 18.8em; } }

/* Máy bảng đứng: Liên hệ rộng cả màn nên chia hai cột, không để trống nửa phải; dấu cộng màn đầu sát cột ảnh, không đè chữ */
@media (min-width: 760px) and (max-width: 999px) and (min-height: 521px) {
  .lien-he { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; }
  .lien-he h2 { grid-column: 1 / -1; }
  .ghi-chu { margin-top: 0; align-self: end; padding-bottom: 8px; }
  .bong-trang-tri::before { right: calc(var(--canh) + var(--cot-phai) - 61px); top: -100px; scale: .5; }
}

/* Đủ rộng thì bảng giờ và Liên hệ cùng hàng, Liên hệ nằm ngay dưới ảnh, cùng bề rộng với ảnh. Điện thoại xoay ngang cũng vậy, để không phải cuộn dài */
@media (min-width: 1000px), (min-width: 780px) and (max-height: 520px) {
  /* Ảnh vắt sâu hơn xuống hàng dưới: nối hai không gian, và bong bóng tím ngắn lại vừa nội dung.
     Mảng san hô lệch rõ để đọc thành một màu thứ ba, và khi nghiêng theo chuột vẫn còn thấy */
  :root { --vat-anh: clamp(34px, 8svh, 72px); --lech-cam: 22px; }
  .gio-luoi {
    grid-template-columns: minmax(0, 1fr) var(--cot-phai);
    column-gap: var(--khe); align-items: stretch;
    margin-top: calc(-1 * var(--rong-duoi) * .32); /* đuôi đào gối lên mép bong bóng trắng */
  }
  .lien-he {
    margin-top: calc(var(--vat-anh) + var(--rong-duoi) * .4 + 46px); /* đủ chỗ cho mảng san hô và đuôi của nó */
    padding: clamp(22px, 2.200vw, 30px) clamp(22px, 2.400vw, 34px) clamp(24px, 2.400vw, 32px);
    align-content: center;
  }
  .lien-he-trang-tri::before { right: -82px; top: -92px; scale: .72; }
  .lien-he address { font-size: clamp(15px, 1.150vw, 16.500px); }
  .lien-he address a { font-size: clamp(32px, 3.200vw, 46px); }
  .ghi-chu { font-size: clamp(14.500px, 1.100vw, 16px); }
  .bang-gio th, .bang-gio td { font-size: clamp(15px, 1.250vw, 18px); }
  .bang-gio tbody th { font-size: clamp(14.500px, 1.150vw, 16.500px); }
  .so-lieu dt { font-size: clamp(15.500px, 1.200vw, 17.500px); }
  .so-lieu dd { font-size: clamp(14.500px, 1.050vw, 15.500px); }
  .cuoi { padding-bottom: 20px; }
  .cuoi-trong { min-height: 52px; }
  /* Bong bóng trắng cao bằng bong bóng tím bên cạnh: các dòng bảng giãn đều, không để trống ở đáy */
  .gio-luoi > div:first-child { display: flex; flex-direction: column; }
  .bang-gio { flex: 1 1 auto; }
  .bang-gio tbody th, .bang-gio tbody td { vertical-align: middle; }
  /* Kết quả trên máy tính: số lượt bên trái, giờ tham khảo bên phải, để màn đầu không giãn quá dài */
  .benh-nhan:has(.tham-khao) { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); column-gap: 16px; align-items: center; }
  .benh-nhan .ten { grid-column: 1 / -1; }
  .benh-nhan .tham-khao { padding: 0 0 0 16px; border-top: 0; border-left: 1px solid var(--ke); }
}

/* Máy bảng ngang, máy tính nhỏ: cột chữ còn hẹp, dấu cộng lớn lùi về sát cột ảnh và nhỏ lại để không chèn dòng Chuyên khoa Nhi */
@media (min-width: 1000px) and (max-width: 1239px) {
  .bong-trang-tri::before { right: calc(var(--canh) + var(--cot-phai) - 40px); top: -92px; scale: .56; }
}

/* Máy tính thường: khung ảnh rộng thêm để thấy nhiều ảnh hơn theo chiều ngang, không phóng quá gần bàn tay em bé.
   Đặt trước khối màn thấp để điện thoại xoay ngang vẫn giữ công thức cột ảnh riêng.
   100vw - 700px: giữ đủ chỗ cho nút chính và ba liên kết phụ cùng hàng ở 1240. Dấu cộng lùi 2vw về phải để cột ảnh rộng ra không đẩy nó sát dòng Chuyên khoa Nhi */
@media (min-width: 1240px) and (max-width: 1599px) {
  :root { --cot-phai: clamp(280px, min(44vw, 100vw - 700px), 680px); }
  .bong-trang-tri::before { right: calc(var(--canh) + var(--cot-phai) + 24px - 2vw); }
}

/* Màn rất rộng: ảnh có trần cả hai chiều, vì object-fit phóng ảnh theo chiều cao và bàn tay chụp cận quá lớn sẽ kém tinh tế.
   Cụm nội dung gọn lại để chữ và ảnh không xa nhau */
@media (min-width: 1600px) {
  :root { --cot-phai: clamp(620px, 35vw, 680px); --rong: min(84vw, 1420px); }
  .man-dau { min-height: min(calc(100svh - var(--cao-dau) - 170px), 650px); }
}

/* Bảng hẹp: nhãn Hôm nay xuống dưới tên ngày để đủ chỗ cho hai cột giờ */
@media (min-width: 1000px) and (max-width: 1239px), (min-width: 780px) and (max-width: 999px) and (max-height: 520px) {
  .bang-gio tr.hom-nay td { vertical-align: middle; }
  .nhan-hom-nay { display: block; margin: 4px 0 0; }
  .bang-gio th, .bang-gio td { padding-block: 11px; }
  .bang-gio thead th { padding-block: 2px 6px; }
}

/* Màn thấp, ví dụ điện thoại xoay ngang: nén để nút chính vẫn trong màn đầu */
@media (min-width: 560px) and (max-height: 520px) {
  /* Cột ảnh nhường chỗ để ba liên kết phụ (rộng khoảng 310px) không lọt dưới ảnh trên máy ngang nhỏ */
  :root { --cao-dau: 49px; --rong-duoi: 34px; --dinh-anh: 12px; --vat-anh: 8px; --lech-cam: 15px; --cot-phai: min(41vw, calc(100vw - 2 * var(--le) - 330px)); }
  .man-dau { min-height: 0; }
  .bong-than { padding-block: 12px; }
  .dong-1, .dong-2 { font-size: 19px; }
  .ten-nhi { font-size: min(24vh, 13vw); font-size: min(24svh, 13vw); }
  .dia-chi { margin-top: 3px; font-size: 13.500px; }
  .tra-luot { margin-top: 8px; }
  .nut-lon { font-size: 15px; }
  .nut-phu { margin: 8px 0 0 -6px; }
  .nut-phu .nut { font-size: 13.500px; }
  /* Liên hệ nằm dưới ảnh, chỉ cần chừa đủ chỗ cho đuôi ảnh; hàng dưới cách đuôi đào một khoảng thoáng */
  .gio-luoi { margin-top: 8px; }
  .gio-luoi > div:first-child { padding-block: 16px 14px; }
  .bang-gio th, .bang-gio td { padding-block: 9px; }
  .lien-he { margin-top: calc(var(--vat-anh) + 40px); padding: 18px 22px 20px; }
  .ghi-chu { margin-top: 4px; }
  .cuoi { padding-bottom: 16px; }
  .cuoi-trong { min-height: 50px; }
  .tra-luot { padding: 8px 10px; border-radius: 18px; }
  .tra-luot-nhan { display: none; }
  .tra-luot-hang { margin-top: 5px; }
  .o-nhap input { height: 44px; }
  .nut-lon { min-height: 44px; }
}
/* Điện thoại xoay ngang loại nhỏ: bảng và Liên hệ xếp chồng, vẫn sát nhau */
@media (min-width: 560px) and (max-width: 779px) and (max-height: 520px) {
  .dia-chi { max-width: 18.8em; } /* xuống dòng đúng trước "TP Hồ Chí Minh" */
  .gio-luoi { gap: 14px; }
  .lien-he { margin-top: 0; }
  .cuoi { padding-bottom: 14px; }
}

/* Chuyển động: một cử chỉ là bong bóng nhỏ có đuôi nở thành bong bóng lớn, lặp lại ở màn đầu và bảng giờ.
   Màn đầu: keyframes, không chờ JS, nút bấm được từ đầu. Khoảnh khắc "woa": bong bóng đào nở, ảnh nở ra từ bàn tay em bé, rồi các chữ Nhi+ nhấc lên lần lượt và dấu cộng nghiêng dưới 45 độ rồi về dáng. Không có nền sau chữ. Xong trước 2,2 giây.
   Khi cuộn: nền bong bóng đào lùi lại (chỉ lớp nền, chữ và nút không bao giờ bị co), ảnh và các lớp tách nhau, đuôi dài ra, bảng giờ và bong bóng tím trồi lên lệch nhịp, dấu cộng chìm ở màn đầu và Liên hệ cùng xoay, dải cuối trang mở ra đủ khổ.
   Khi rê: chữ Nhi+ nhấc lên như trên, các lớp màn đầu nghiêng nhẹ theo con trỏ, nút nhích, dòng bảng ửng màu. Khi chạm: chữ Nhi+ cũng chạy, các nút nhấn lún.
   Phần sau: chỉ ẩn dưới .co-js, giao-dien.js gắn .da-hien khi cuộn tới.
   Không nảy, không lặp. Không có .co-js hoặc người xem tắt chuyển động thì mọi thứ đứng yên và hiện đủ. */
@media (prefers-reduced-motion: no-preference) {
  /* Chữ trồi theo dòng. Mặt nạ không bọc overflow:hidden nên không cắt dấu tiếng Việt:
     khoảng dịch bằng 100% cộng phần mở rộng đáy, nhờ vậy mép dưới của mặt nạ đứng yên */
  @keyframes chu-troi {
    from { translate: 0 118%; clip-path: inset(-40% -10% 100% -10%); }
    to { translate: 0 0; clip-path: inset(-40% -10% -18% -10%); }
  }
  /* Nhi+ cao, không có chân chữ: mép dưới sát hơn để không đè địa chỉ, mép trên rộng cho dấu cộng */
  @keyframes ten-troi {
    from { translate: 0 108%; clip-path: inset(-60% -10% 100% -10%); }
    to { translate: 0 0; clip-path: inset(-60% -10% -8% -10%); }
  }
  @keyframes hien-len { from { opacity: 0; translate: 0 14px; } }
  @keyframes troi-nhe { from { opacity: 0; translate: 0 8px; } }

  /* Màn đầu 1: hiện một bong bóng nhỏ có đuôi như trong logo, dừng một nhịp để mắt kịp thấy, rồi nở ra đủ khổ */
  @keyframes bong-no {
    from { opacity: 0; clip-path: inset(calc(100% - 72px) var(--mo-phai) 0 var(--mo-trai) round 30px); animation-timing-function: linear; }
    /* Đường cong viết thẳng vì var() trong animation-timing-function của keyframes không có tác dụng */
    12% { opacity: 1; clip-path: inset(calc(100% - 72px) var(--mo-phai) 0 var(--mo-trai) round 30px); animation-timing-function: cubic-bezier(.2, 0, 0, 1); }
    to { opacity: 1; clip-path: inset(0 0 0 0 round var(--bo-bong)); }
  }
  @keyframes duoi-no { from { opacity: 0; scale: .55; } }
  .bong-than {
    --mo-trai: max(0px, calc(var(--trai-duoi) - 44px));
    --mo-phai: calc(100% - var(--mo-trai) - 170px);
  }
  .bong-than::before { animation: bong-no 660ms linear backwards; }
  /* Dấu cộng chìm xoay dưới 45 độ về chỗ, cùng cử chỉ với dấu cộng san hô */
  @keyframes cong-chim-vao { from { opacity: 0; rotate: -20deg; scale: .9; } }
  .bong-trang-tri::before { animation: cong-chim-vao 720ms var(--vao) 640ms backwards; } /* chờ nền bong-no phủ tới, kẻo dấu cộng thò ra nền kem */
  .bong-duoi { transform-origin: 30% 0; animation: duoi-no 200ms var(--vao) backwards; }

  /* Màn đầu 2: chữ trồi theo dòng, so le 60ms, ngay sau khi nền đã phủ tới */
  .man-dau .dong > span { animation: chu-troi 500ms var(--vao) 260ms backwards; }
  .man-dau .dong-2 > span { animation-delay: 310ms; }
  .man-dau .dong-3 > span { animation-name: ten-troi; animation-duration: 580ms; animation-delay: 320ms; }
  /* Khối tra lượt hiện sớm nhất trong cột nút: ba mẹ vào trang để tra lượt */
  .man-dau .len-5 { animation: troi-nhe 320ms var(--vao) 440ms backwards; }
  .man-dau .len-4 { animation: troi-nhe 320ms var(--vao) 490ms backwards; }
  .man-dau .len-6 { animation: troi-nhe 320ms var(--vao) 540ms backwards; }

  /* Màn đầu 3: dấu cộng xoay dưới 45 độ về đúng chỗ, không bao giờ thành dấu nhân */
  @keyframes cong-vao { from { opacity: 0; rotate: -24deg; scale: .55; } }
  .man-dau .cong { animation: cong-vao 460ms var(--vao) 640ms backwards; }

  /* Chữ Nhi+: khi rê, khi chạm và một lần lúc vào trang, các chữ nhấc lên lần lượt rồi về chỗ, dấu cộng nghiêng dưới 45 độ rồi về đúng dáng.
     KHÔNG có nền bong bóng trắng sau chữ: chủ yêu cầu bỏ.
     giao-dien.js bọc chữ cái và gắn .dang-no, .dang-song. Chỉ dùng translate, rotate nên không đổi bố cục */
  .ten-nhi { position: relative; align-self: flex-start; -webkit-tap-highlight-color: transparent; }
  /* Chỉ thành khối lúc đang chạy: lúc nghỉ chữ cái nằm liền nhau nên trình đọc màn hình đọc "Nhi", không đọc rời. Đã đo: bề rộng chữ không đổi */
  .ten-nhi.dang-song .chu-cai { display: inline-block; }
  @keyframes chu-song { 38% { translate: 0 -.09em; } }
  @keyframes cong-lac { 42% { rotate: -18deg; scale: 1.12; } }
  .ten-nhi.dang-song .chu-cai { animation: chu-song 620ms cubic-bezier(.3, 0, .2, 1) 60ms; }
  .ten-nhi.dang-song .chu-cai:nth-child(2) { animation-delay: 130ms; }
  .ten-nhi.dang-song .chu-cai:nth-child(3) { animation-delay: 200ms; }
  /* Giữ tên cong-vao trong danh sách để lúc gỡ .dang-song trình duyệt không chạy lại hiệu ứng vào trang */
  .man-dau .ten-nhi.dang-song .cong { animation: cong-vao 460ms var(--vao) 640ms backwards, cong-lac 680ms cubic-bezier(.3, 0, .2, 1) 240ms; }

  /* Màn đầu 4: mũi tên trên nút chính nhích một lần, chỉ vào việc cần làm */
  @keyframes mui-ten-nhich { 45% { translate: 5px 0; } }
  .mo-tra-luot:not(.da-nhich) .ico { animation: mui-ten-nhich 560ms var(--vao) 1200ms; } /* tra-luot.js gắn .da-nhich khi mở khối: nút hiện lại không nhích lần nữa */

  /* Ảnh: nở ra từ chính bàn tay em bé sau khi bong bóng đào đã phủ tới, ảnh lùi nhẹ về đúng cỡ. Khung mở đủ thì đuôi trắng mới hiện.
     Bong bóng san hô trượt ra từ sau ảnh, bong bóng ống nghe theo sau */
  @keyframes anh-mo {
    from { opacity: 0; scale: 1.04; clip-path: inset(24% 30% 36% 16% round 34px); }
    26% { opacity: 1; }
    to { opacity: 1; scale: 1; clip-path: inset(-60px -60px -60px -60px round var(--bo-the)); }
  }
  @keyframes cam-truot { from { opacity: 0; translate: -12px -12px; } }
  @keyframes nho-no { from { opacity: 0; scale: .6; translate: 0 10px; } }
  .co-js .anh-minh-hoa.da-hien img { animation: anh-mo 620ms var(--vao) 340ms backwards; }
  .co-js .anh-minh-hoa.da-hien::before { animation: cam-truot 520ms var(--vao) 700ms backwards; }
  .co-js .anh-minh-hoa.da-hien::after { transform-origin: 20% 0; animation: duoi-no 220ms var(--vao) 1020ms backwards; } /* chờ mảng san hô trượt tới chỗ rồi đuôi mới nở từ mép nó */
  .bong-nho { transform-origin: 30% 100%; }
  .co-js .anh-minh-hoa.da-hien .bong-nho { animation: nho-no 420ms var(--vao) 1060ms backwards; }

  /* Các lớp màn đầu nghiêng nhẹ theo con trỏ: giao-dien.js đặt --chuot-x, --chuot-y từ -1 đến 1 khi rê chuột, đứng yên khi không rê.
     Mảng san hô và đuôi của nó đi cùng nhau; lớp gần đi ngược con trỏ nhiều hơn, lớp xa đi cùng chiều, tối đa 12px để không gây chóng mặt */
  .anh-minh-hoa img { translate: calc(var(--chuot-x, 0) * -6px) calc(var(--chuot-y, 0) * -4px); }
  .anh-minh-hoa::before, .anh-minh-hoa::after { translate: calc(var(--chuot-x, 0) * 5px) calc(var(--chuot-y, 0) * 4px); }
  .bong-nho-1 { translate: calc(var(--chuot-x, 0) * -12px) calc(var(--chuot-y, 0) * -9px); }
  .bong-trang-tri::before { translate: calc(var(--chuot-x, 0) * 10px) calc(var(--chuot-y, 0) * 8px); }

  /* Chỗ ẩn để chờ hiện dần: chỉ trên màn hình, in trang thì vẫn đủ. Ảnh chỉ ẩn bằng opacity để lazy vẫn tải */
  @media screen {
    .co-js .hien:not(.da-hien) { opacity: 0; }
    .co-js .gio-luoi > div:first-child:not(.da-hien) { opacity: 0; }
    .co-js .lien-he:not(.da-hien) { opacity: 0; }
    .co-js .anh-minh-hoa:not(.da-hien) img,
    .co-js .anh-minh-hoa:not(.da-hien)::before,
    .co-js .anh-minh-hoa:not(.da-hien)::after,
    .co-js .anh-minh-hoa:not(.da-hien) .bong-nho { opacity: 0; }
  }

  /* Hiện dần khi cuộn tới: dịch 14px, so le 70ms */
  .co-js .hien.da-hien { animation: hien-len 400ms var(--vao) backwards; }
  .co-js .hien.tre-1.da-hien { animation-delay: 70ms; }
  .co-js .hien.tre-2.da-hien { animation-delay: 140ms; }
  /* Hai câu chọn giờ hiện sau các dòng bảng, để mắt đi một đường từ trên xuống */
  .co-js .so-lieu .hien.da-hien { animation-delay: 520ms; }
  .co-js .so-lieu .hien.tre-1.da-hien { animation-delay: 590ms; }

  /* Tiêu đề cũng trồi theo dòng như màn đầu */
  .co-js h2.hien.da-hien { animation: none; }
  .co-js h2.hien.da-hien .dong > span { animation: chu-troi 500ms var(--vao) backwards; }

  /* Bong bóng giờ làm: lặp lại cử chỉ của màn đầu, nở từ góc trên trái, chỗ đuôi đào chỉ xuống.
     Rồi hiện từng dòng, nền dòng Hôm nay quét từ trái sang, nhãn Hôm nay nở sau cùng.
     Chạy trên từng ô vì Safari không ổn với dòng bảng */
  @keyframes nhan-no { from { opacity: 0; scale: .8; } }
  @keyframes bang-no {
    from { opacity: 0; clip-path: inset(0 calc(100% - 210px) calc(100% - 64px) 0 round 26px); animation-timing-function: linear; }
    10% { opacity: 1; clip-path: inset(0 calc(100% - 210px) calc(100% - 64px) 0 round 26px); animation-timing-function: cubic-bezier(.2, 0, 0, 1); }
    to { opacity: 1; clip-path: inset(0 0 -60px 0 round var(--bo-the)); }
  }
  .co-js .gio-luoi > div:first-child.da-hien { animation: bang-no 620ms linear backwards; }
  .co-js .bang-gio.hien.da-hien { animation: none; }
  .co-js .bang-gio.da-hien tr > * { animation: hien-len 400ms var(--vao) 260ms backwards; }
  .co-js .bang-gio.da-hien tbody tr:nth-child(1) > * { animation-delay: 300ms; }
  .co-js .bang-gio.da-hien tbody tr:nth-child(2) > * { animation-delay: 370ms; }
  .co-js .bang-gio.da-hien tbody tr:nth-child(3) > * { animation-delay: 440ms; }
  .co-js .bang-gio.da-hien .nhan-hom-nay { transform-origin: 0 50%; animation: nhan-no 300ms var(--vao) 1080ms backwards; }

  /* Nền Hôm nay nằm ở lớp riêng trong từng ô, cắt bằng clip-path. Ba ô nối nhau thành một lần quét 500ms */
  @keyframes quet-nen { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
  .co-js .bang-gio tr.hom-nay > * { position: relative; isolation: isolate; background: none; }
  .co-js .bang-gio tr.hom-nay > *::before {
    content: ""; position: absolute; inset: 0 -1px 0 0; z-index: -1;
    border-radius: inherit;
    background: var(--nen-hom-nay);
  }
  .co-js .bang-gio tr.hom-nay > :last-child::before { inset: 0; }
  .co-js .bang-gio:not(.da-hien) tr.hom-nay > *::before { clip-path: inset(0 100% 0 0); }
  .co-js .bang-gio.da-hien tr.hom-nay > *::before { animation: quet-nen 200ms linear 580ms backwards; }
  .co-js .bang-gio.da-hien tr.hom-nay > :nth-child(2)::before { animation-duration: 150ms; animation-delay: 780ms; }
  .co-js .bang-gio.da-hien tr.hom-nay > :nth-child(3)::before { animation-duration: 150ms; animation-delay: 930ms; }

  /* Dấu bong bóng nhỏ của Ít phải chờ, Sau 17:00: nở từ đuôi, sau khi chữ đã hiện */
  @keyframes dau-no { from { opacity: 0; scale: .4; } }
  .co-js .so-lieu .da-hien dt::before { transform-origin: 65% 100%; animation: dau-no 320ms var(--vao) 720ms backwards; }
  .co-js .so-lieu .tre-1.da-hien dt::before { animation-delay: 790ms; }

  /* Liên hệ: bong bóng tím nở cả khối, chữ vào sau; nền có sẵn cùng lúc với chữ nên chữ sáng không bao giờ nằm trên nền sáng */
  .co-js .lien-he.da-hien { animation: hien-len 420ms var(--vao) 60ms backwards; }
  .co-js .lien-he h2.hien.da-hien .dong > span { animation-delay: 120ms; }
  .co-js .lien-he address.hien.da-hien { animation-delay: 160ms; }
  .co-js .lien-he .ghi-chu.hien.da-hien { animation-delay: 220ms; }

  /* Thẻ kết quả trồi lên từ ô nhập, lần lượt; chiều cao giãn êm do giao-dien.js. Chỉ chạy khi phụ huynh vừa tra, tự làm mới thì không */
  @keyframes the-len { from { opacity: 0; translate: 0 12px; } }
  #ket-qua.vao > * { animation: the-len 420ms var(--vao) 60ms backwards; }
  #ket-qua.vao > :nth-child(2) { animation-delay: 130ms; }
  #ket-qua.vao > :nth-child(3) { animation-delay: 200ms; }
  /* Vòng số nở sau thẻ một nhịp; mảng màu trượt ra từ sau vòng như ảnh màn đầu */
  @keyframes vong-no { from { opacity: 0; scale: .7; } }
  @keyframes vong-lech { from { translate: 0 0; } }
  #ket-qua.vao .vong { animation: vong-no 380ms var(--vao) 180ms backwards; }
  #ket-qua.vao .vong::before { animation: vong-lech 420ms var(--vao) 420ms backwards; }
  #ket-qua.vao .tich { animation: vong-no 360ms var(--vao) 220ms backwards; }
  /* Số lượt vừa đổi: vòng nhích nhẹ một lần, không nảy */
  @keyframes vong-doi { 40% { scale: 1.07; } }
  .vong.doi { animation: vong-doi 520ms var(--vao); }
  /* Đang tra cứu: ba chấm */
  @keyframes cham-nhip { 50% { opacity: .25; } }
  .cham i { animation: cham-nhip 900ms linear infinite; }
  .cham i:nth-child(2) { animation-delay: 150ms; }
  .cham i:nth-child(3) { animation-delay: 300ms; }
  /* Thanh nhập sáng lên khi bấm vào */
  .tra-luot-hang { transition: border-color 160ms linear, box-shadow 200ms var(--vao); }

  /* Hàng ảnh phòng khám: tăng dần theo cột; rê chuột thì ảnh nhấc lên và mảng san hô lộ thêm */
  .co-js .luoi-anh .hien.tre-3.da-hien { animation-delay: 210ms; }
  .luoi-anh img, .luoi-anh li::before { transition: translate 280ms var(--vao); }

  /* Nút Tra lượt khám ở đầu trang hiện ra nhẹ khi cuộn qua ô nhập */
  .dau .nut-nho { transition: opacity 200ms linear, translate 240ms var(--vao), scale 200ms var(--vao), visibility 0s; }
  .an-nut-dau .dau .nut-nho, .co-js:not(.da-do-nut) .dau .nut-nho {
    opacity: 0; translate: 0 6px;
    transition: opacity 140ms linear, translate 140ms linear, visibility 0s 140ms;
  }

  /* Phản hồi khi chạm và rê chuột */
  .nut { transition: scale 200ms var(--vao); }
  .nut::before { transition: opacity 160ms linear; }
  .nut:active { scale: .97; transition-duration: 100ms; }

  /* Số điện thoại: nhấn lún khi chạm, nhô lên rất nhẹ khi rê */
  .lien-he address a { transform-origin: 0 50%; -webkit-tap-highlight-color: transparent; transition: scale 200ms var(--vao); }
  .lien-he address a:active { scale: .98; transition-duration: 100ms; }
  /* Dòng bảng ửng màu khi rê hoặc chạm, đổi ngay không chuyển tiếp, bo góc như dòng Hôm nay. Dòng Hôm nay giữ nền riêng */
  .bang-gio tbody tr:not(.hom-nay):active > * { background-color: color-mix(in srgb, var(--dao) 60%, #fff); border-bottom-color: transparent; }
  .bang-gio tbody tr:not(.hom-nay):active > :first-child { border-radius: 14px 0 0 14px; }
  .bang-gio tbody tr:not(.hom-nay):active > :last-child { border-radius: 0 14px 14px 0; }
  .dau-logo img { transition: scale 200ms var(--vao); }
  .dau-logo:active img { scale: .97; transition-duration: 100ms; }

  @media (hover: hover) {
    /* Mũi tên chạy ra khỏi khung icon rồi vào lại từ bên trái, một lần mỗi lần rê */
    @keyframes mui-ten-vong {
      45% { translate: 24px 0; }
      46% { translate: -24px 0; }
    }
    .nut-lon:hover .ico use { animation: mui-ten-vong 440ms var(--vao); }

    /* Nút chính nhấc lên một chút, bóng tím đậm dần: bóng đậm nằm ở lớp riêng, chỉ đổi độ mờ */
    .nut-lon { transition: scale 200ms var(--vao), translate 220ms var(--vao); }
    .nut-lon:hover { translate: 0 -1px; }
    .nut-lon:active { translate: 0 0; }
    .nut-lon:disabled { translate: 0 0; }
    .luoi-anh li:hover img { translate: -3px -4px; }
    .luoi-anh li:hover::before { translate: 2px 2px; }
    .nut-lon::after {
      content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
      border-radius: inherit;
      box-shadow: 0 16px 24px -14px color-mix(in srgb, var(--tim-dam) 90%, transparent);
      opacity: 0; transition: opacity 220ms linear;
    }
    .nut-lon:hover::after { opacity: 1; }

    /* Nút phụ: biểu tượng nhích lên, ăn nhịp với nút chính */
    .nut-phu .ico { transition: translate 200ms var(--vao); }
    .nut-phu .nut:hover .ico { translate: 0 -2px; }

    .lien-he address a:hover { scale: 1.015; }
    .dau-logo:hover img { scale: 1.04; }
    /* Rê vào bong bóng Liên hệ: dấu cộng chìm đứng thẳng thêm một chút, không đi về phía dấu nhân */
    .lien-he-trang-tri::before { transition: rotate 600ms var(--vao); }
    .lien-he:hover .lien-he-trang-tri::before { rotate: 6deg; }
    .bang-gio tbody tr:not(.hom-nay):hover > * { background-color: color-mix(in srgb, var(--dao) 60%, #fff); border-bottom-color: transparent; }
    .bang-gio tbody tr:not(.hom-nay):hover > :first-child { border-radius: 14px 0 0 14px; }
    .bang-gio tbody tr:not(.hom-nay):hover > :last-child { border-radius: 0 14px 14px 0; }

    /* Bong bóng dấu của Ít phải chờ, Sau 17:00 nhấc lên khi rê vào câu đó */
    .so-lieu dt::before { transition: translate 220ms var(--vao), scale 220ms var(--vao); }
    .so-lieu > div:hover dt::before { translate: 0 -2px; scale: 1.1; }
  }

  /* Theo cuộn, trình duyệt không hỗ trợ thì đứng yên.
     Dùng dòng thời gian đặt tên vì .bong-than có overflow:hidden, view() của phần tử con sẽ bám nhầm vào đó.
     Mọi mức tiến đều đọc được và kết thúc đúng thiết kế; trang ngắn chưa cuộn hết thì dừng giữa chừng cũng không sao */
  @supports (animation-timeline: view()) {
    .vung-nhat { view-timeline: --man-dau block; view-timeline-inset: var(--cao-dau) 0; } /* tính từ mép dưới đầu trang: tiến 0 đúng lúc chưa cuộn */

    /* 1. Màn đầu xuống giờ làm: nền bong bóng đào lùi lại, các lớp trên nó tiến lên với tốc độ khác nhau, đuôi dài ra chỉ vào giờ làm.
       Chỉ co lớp nền: co cả .bong làm chữ và nút mờ, lệch lề, mà trang ngắn nên đó là trạng thái đứng yên khi cuộn hết */
    :root { --lui-bong: .985; --tach-anh: 8px; --tach-cam: 3px; --tach-nho-1: 18px; }
    @media (min-width: 760px) {
      :root { --lui-bong: .975; --tach-anh: clamp(10px, 2svh, 22px); --tach-cam: 5px; --tach-nho-1: clamp(26px, 5svh, 48px); }
    }
    @keyframes bong-lui { to { transform: scale(var(--lui-bong)); } }
    @keyframes lop-tien { to { transform: translateY(calc(-1 * var(--tach))); } }
    @keyframes cong-chim-xoay { to { transform: translateY(40px) rotate(-14deg); } } /* từ thế nghiêng 16 độ đứng dần về dáng dấu cộng, không đi về phía dấu nhân */
    @keyframes duoi-dai { to { transform: scaleY(var(--dai-duoi)); } }

    .bong { --dai-duoi: 1.2; } /* dài hơn sẽ chạm chữ Giờ làm việc */
    .bong-than::before {
      transform-origin: 50% 100%; /* mép đáy đứng yên để đuôi vẫn dính vào bong bóng */
      animation: bong-no 660ms linear backwards, bong-lui linear both;
      animation-timeline: auto, --man-dau;
      animation-range: normal, exit 0% exit 70%;
    }
    .bong-trang-tri::before {
      animation: cong-chim-vao 720ms var(--vao) 640ms backwards, cong-chim-xoay linear both;
      animation-timeline: auto, --man-dau;
      animation-range: normal, exit 0% exit 70%;
    }
    .bong-duoi {
      animation: duoi-no 200ms var(--vao) backwards, duoi-dai linear both;
      animation-timeline: auto, --man-dau;
      animation-range: normal, exit 0% exit 42%;
    }
    /* Mảng san hô và đuôi của nó đi cùng một mức để không rời nhau */
    .anh-minh-hoa img { --tach: var(--tach-anh); }
    .anh-minh-hoa::before, .anh-minh-hoa::after { --tach: var(--tach-cam); }
    .bong-nho-1 { --tach: var(--tach-nho-1); }
    .co-js .anh-minh-hoa.da-hien img {
      animation: anh-mo 620ms var(--vao) 340ms backwards, lop-tien linear both;
      animation-timeline: auto, --man-dau;
      animation-range: normal, exit 0% exit 70%;
    }
    .co-js .anh-minh-hoa.da-hien::before {
      animation: cam-truot 520ms var(--vao) 700ms backwards, lop-tien linear both;
      animation-timeline: auto, --man-dau;
      animation-range: normal, exit 0% exit 70%;
    }
    .co-js .anh-minh-hoa.da-hien::after {
      animation: duoi-no 220ms var(--vao) 1020ms backwards, lop-tien linear both;
      animation-timeline: auto, --man-dau;
      animation-range: normal, exit 0% exit 70%;
    }
    .co-js .anh-minh-hoa.da-hien .bong-nho {
      animation: nho-no 420ms var(--vao) 1060ms backwards, lop-tien linear both;
      animation-timeline: auto, --man-dau;
      animation-range: normal, exit 0% exit 70%;
    }

    /* 2. Hàng dưới: bong bóng trắng trồi lên, bong bóng tím theo sau lệch nhịp.
       steps đúng bằng số pixel: dịch theo số nguyên, lúc đứng yên chữ không nhoè trên màn tỉ lệ điểm ảnh 1 */
    @keyframes the-troi { from { transform: translateY(var(--lech-the)); } }
    .gio-luoi > div:first-child { --lech-the: 18px; animation: the-troi steps(18) both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
    .co-js .gio-luoi > div:first-child.da-hien {
      animation: bang-no 620ms linear backwards, the-troi steps(18) both;
      animation-timeline: auto, view();
      animation-range: normal, entry 0% entry 70%;
    }
    .lien-he { --lech-the: 40px; animation: the-troi steps(40) both; animation-timeline: view(); animation-range: entry 0% entry 80%; }
    .co-js .lien-he.da-hien {
      animation: hien-len 420ms var(--vao) 60ms backwards, the-troi steps(40) both;
      animation-timeline: auto, view();
      animation-range: normal, entry 0% entry 80%;
    }

    /* 3. Kết trang: đuôi bong bóng tím dài ra chỉ xuống dải cuối, dải mở từ khổ bong bóng ra đủ bề ngang, logo trong bong bóng trắng nở từ đuôi */
    @keyframes duoi-tim-dai { from { transform: scaleY(.7); } to { transform: scaleY(var(--dai-duoi-tim, 1.3)); } }
    .lien-he::after {
      transform-origin: 50% 0;
      animation: duoi-tim-dai linear both;
      animation-timeline: scroll(root);
      animation-range: 45% 100%;
    }
    @keyframes cuoi-mo {
      from { clip-path: inset(0 clamp(24px, 4vw, 72px) 0 clamp(24px, 4vw, 72px) round var(--bo-the) var(--bo-the) 0 0); }
      to { clip-path: inset(0 0 0 0 round var(--bo-bong) var(--bo-bong) 0 0); }
    }
    .cuoi { animation: cuoi-mo linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
    /* clip-path theo cuộn phải vẽ lại từng khung, máy cảm ứng yếu dễ giật: giữ nguyên dải đủ khổ, chỉ còn các chuyển động chạy trên lớp riêng */
    @media (hover: none), (max-width: 759px) { .cuoi { animation: none; } }
    @keyframes logo-no { from { transform: translateY(16px) scale(.84); } }
    .cuoi img { transform-origin: 0 100%; animation: logo-no linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }

    /* 4. Dấu cộng chìm ở Liên hệ xoay theo cuộn, cùng chiều với dấu cộng ở màn đầu: thấy được hai nơi là một mạch.
       Từ nghiêng 16 độ đứng dần về gần thẳng, cuối trang là dáng dấu cộng rõ ràng */
    @keyframes cong-theo-cuon { to { transform: rotate(-14deg); } }
    .lien-he-trang-tri::before { animation: cong-theo-cuon linear both; animation-timeline: scroll(root); }
  }
}

/* Chủ: "Không quá lạm dụng các quote này, bị lặp lại nhiều lần". Chỉ giữ đuôi của bong bóng màn đầu (.bong-duoi); các khối khác không có đuôi */
.anh-minh-hoa::after, .bong-nho::after, .tra-luot::after, .lien-he::after { content: none; }

/* Trang giới thiệu: mặc định chỉ có nút Tra lượt khám, bấm mới mở khối nhập số */
.tra-luot-vung { flex: 1 1 100%; min-width: 0; margin-top: clamp(12px, 2.200svh, 22px); }
.tra-luot-vung > .tra-luot { margin-top: 0; }
/* Khối đang giãn chiều cao (tra-luot.js): phải là clip, hidden sẽ để lúc đặt con trỏ cuộn ngầm khối và cắt mất tiêu đề */
.tra-luot-vung.dang-gian, .tham-khao.dang-gian { overflow: clip; }
.mo-tra-luot { min-height: 50px; padding: 10px 16px 10px 20px; font-size: 16.500px; box-shadow: 0 12px 20px -14px color-mix(in srgb, var(--tim-dam) 90%, transparent); }
.mo-tra-luot .ico { width: 19px; height: 19px; }
.tra-luot-dong {
  position: absolute; top: 2px; right: 2px;
  display: grid; place-items: center;
  width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: var(--chu-phu); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tra-luot-dong .ico { width: 18px; height: 18px; }
.tra-luot-dong:active { background: var(--tim-nhat); color: var(--tim-dam); }
@media (hover: hover) { .tra-luot-dong:hover { background: var(--tim-nhat); color: var(--tim-dam); } }
.tra-luot-tieu-de, .tra-luot-nhan { padding-right: 34px; }

/* Giờ có mặt tham khảo: ẩn sau nút, cảnh báo đứng trước con số */
.benh-nhan:has(.tham-khao) { grid-template-columns: minmax(0, 1fr); }
.benh-nhan .tham-khao { padding: 10px 0 0; border-left: 0; border-top: 1px solid var(--ke); }
.tham-khao { scroll-margin-bottom: 14px; } /* tự cuộn tới khối giờ thì không sát mép dưới màn hình */
.xem-gio {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; min-height: 44px; padding: 8px 12px;
  border: 1px solid var(--tim-vien); border-radius: 12px 12px 12px 4px;
  background: #fff; color: var(--tim-dam); cursor: pointer;
  font: 500 14.500px/1.3 var(--chu-tieu-de); text-align: left;
  -webkit-tap-highlight-color: transparent;
}
.xem-gio::after {
  content: ""; flex: none; width: 8px; height: 8px;
  border: solid currentColor; border-width: 0 2px 2px 0;
  rotate: 45deg; translate: 0 -2px;
}
.xem-gio[aria-expanded="true"]::after { rotate: -135deg; translate: 0 2px; }
.xem-gio:active { background: var(--tim-nhat); }
@media (hover: hover) { .xem-gio:hover { background: var(--tim-nhat); } }
/* Màn 320: chữ trên nút nằm gọn một dòng, không để một từ rơi xuống dòng dưới */
@media (max-width: 359px) { .xem-gio { padding-inline: 10px; gap: 6px; font-size: 14px; } }
.gio-an { display: grid; gap: 10px; margin-top: 10px; }
.canh-bao {
  display: grid; grid-template-columns: 38px minmax(0, 1fr); column-gap: 12px; align-items: start;
  padding: 16px; border-radius: 16px 16px 16px 5px;
  background: var(--san-ho-dam); color: #fff;
  font-size: 16px; font-weight: 500; line-height: 1.5;
  box-shadow: 0 14px 24px -16px color-mix(in srgb, var(--san-ho-dam) 90%, transparent);
}
.canh-bao::before {
  content: ""; grid-row: 1 / 3; width: 38px; height: 38px; border-radius: 50%;
  background:
    radial-gradient(circle at 50% 76%, var(--san-ho-dam) 2.600px, transparent 3.100px),
    linear-gradient(var(--san-ho-dam), var(--san-ho-dam)) 50% 30% / 4px 13px no-repeat,
    #fff;
}
.canh-bao strong { font: 600 clamp(18px, 1.500vw, 20px)/1.3 var(--chu-tieu-de); color: #fff; }
.canh-bao p { margin-top: 5px; }
.dong-gio { color: var(--chu); font-size: 14.500px; }
.dong-gio .gio {
  display: inline-block; padding: 0 8px; border-radius: 8px 8px 8px 2px;
  background: var(--nen-hom-nay);
  font: 600 16px/1.5 var(--chu-tieu-de); font-variant-numeric: tabular-nums; color: var(--san-ho-dam);
}
@media (prefers-reduced-motion: no-preference) {
  @keyframes mo-khoi { from { opacity: 0; translate: 0 10px; } }
  .tra-luot.vua-mo, .gio-an.vua-mo { animation: mo-khoi 300ms var(--vao) backwards; }
  .xem-gio { transition: scale 200ms var(--vao); }
  .xem-gio:active { scale: .985; transition-duration: 100ms; }
  .xem-gio::after { transition: rotate 200ms var(--vao), translate 200ms var(--vao); }
}

/* Ảnh màn đầu giữ nguyên cỡ dù khối tra lượt mở ra cao đến đâu: chủ chê "ảnh khi tra lượt khám quá to và bị tràn".
   Bong bóng đào giãn phía sau; ảnh dính theo khi cuộn để phần bên phải không trống */
@media (min-width: 760px), (min-width: 560px) and (max-height: 520px) {
  .anh-minh-hoa {
    align-self: start;
    position: sticky; top: calc(var(--cao-dau) + 16px);
    height: calc(clamp(400px, min(100vh - var(--cao-dau) - 170px, 62vw), 730px) - var(--dinh-anh) + var(--vat-anh));
    height: calc(clamp(400px, min(100svh - var(--cao-dau) - 170px, 62vw), 730px) - var(--dinh-anh) + var(--vat-anh));
  }
}
/* Điện thoại xoay ngang: màn thấp hơn mức 400px ở trên, ảnh vừa khít màn để thấy đủ đáy ảnh và mảng san hô; dấu cộng nhỏ lại, không lấn dòng Chuyên khoa Nhi */
@media (min-width: 560px) and (max-height: 520px) {
  .anh-minh-hoa { height: calc(100vh - var(--cao-dau) - 24px); height: calc(100svh - var(--cao-dau) - 24px); }
  .bong-trang-tri::before { right: calc(var(--canh) + var(--cot-phai) - 40px); top: -92px; scale: .5; }
}