/* Phần chung của cả 3 giao diện: biến màu, font, đặt lại, tiện ích tiếp cận.
   Bố cục và chuyển động nằm ở gd/<số>/giao-dien.css. */
:root {
  color-scheme: light;
  --tim: #6f178f;
  --tim-dam: #521069;
  --tim-nhat: #f4eaf8;
  --tim-vien: #e2cdec;
  --chu: #2a1733;
  --chu-phu: #5e4c69;
  --nen: #fff;
  --tren-tim: #f3e8f8;
  /* Màu nhấn: mỗi giao diện chọn đúng một màu, dùng tiết chế; tím vẫn là màu chính */
  --nhan-cam: #ff8a5c;
  --nhan-cam-dam: #b8441b;
  --nhan-hong: #f7cfdd;
  --nhan-hong-dam: #a0335f;
  --nhan-oai: #d6c5f3;
  --vao: cubic-bezier(.2, 0, 0, 1);
  --chu-tieu-de: "Lexend", "Be Vietnam Pro", system-ui, sans-serif;
  --chu-than: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --chu-logo: "Nunito", "Lexend", system-ui, sans-serif; /* giống chữ Nhi+ trên logo: nét bo tròn, đậm 900 */
}

/* Ẩn tạm trong lúc nạp giao diện. Lớp này chỉ do nap-giao-dien.js gắn và luôn tự gỡ. */
html[data-cho] body { visibility: hidden; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--nen);
  color: var(--chu);
  font: 400 17px/1.6 var(--chu-than);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
img, svg { display: block; }
h1, h2, p, ul, dl, dd, figure, address { margin: 0; padding: 0; }
ul { list-style: none; }
address { font-style: normal; }

/* Ảnh minh hoạ không bao giờ tràn khung, kể cả khi giao diện chưa kịp nạp */
.anh-minh-hoa img { width: 100%; height: auto; }

[hidden] { display: none !important; }

/* Cuộn tới ô tra lượt và kết quả không bị thanh đầu trang che */
.tra-luot, .ket-qua-tra-luot { scroll-margin: 84px 0 16px; }

.kho-hinh { position: absolute; }
.chi-doc { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ico { width: 22px; height: 22px; flex: none; }

:focus-visible { outline: 3px solid var(--tim-dam); outline-offset: 3px; border-radius: 6px; }

.bo-qua {
  position: absolute; left: 12px; top: -80px; z-index: 60;
  padding: 12px 18px; border-radius: 12px;
  background: var(--tim-dam); color: #fff;
}
.bo-qua:focus { top: 12px; }

/* Nền tối thiểu cho ô tra lượt và 4 ảnh ở giao diện 2, 3 (chưa có thiết kế riêng), để hai giao diện này không vỡ.
   Giới hạn trong data-gd 2, 3 nên không đụng tới giao diện 1; :where không cộng độ ưu tiên nên gd/2, gd/3 đè được. */
:where(html[data-gd="2"], html[data-gd="3"]) .mo-tra-luot { display: inline-flex; align-items: center; gap: 8px; }
:where(html[data-gd="2"], html[data-gd="3"]) .tra-luot {
  position: relative; margin-top: 12px; padding: 16px;
  border: 1px solid var(--tim-vien); border-radius: 16px;
  background: var(--nen); color: var(--chu);
  font-size: 16px; line-height: 1.5; text-align: left;
}
:where(html[data-gd="2"], html[data-gd="3"]) .tra-luot-dong {
  position: absolute; top: 4px; right: 4px;
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: var(--chu-phu); cursor: pointer;
}
:where(html[data-gd="2"], html[data-gd="3"]) .tra-luot-tieu-de { padding-right: 40px; font: 500 18px/1.3 var(--chu-tieu-de); color: var(--chu); }
:where(html[data-gd="2"], html[data-gd="3"]) .tra-luot-nhan { display: block; margin-top: 4px; font-size: 15px; color: var(--chu-phu); }
:where(html[data-gd="2"], html[data-gd="3"]) .tra-luot-hang { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
:where(html[data-gd="2"], html[data-gd="3"]) .o-nhap { position: relative; flex: 1 1 160px; min-width: 0; }
:where(html[data-gd="2"], html[data-gd="3"]) .o-nhap input {
  display: block; width: 100%; height: 48px; padding: 0 12px;
  border: 1.5px solid var(--tim); border-radius: 12px; background: var(--nen); color: var(--chu);
  font: 500 17px/1.2 var(--chu-than);
}
:where(html[data-gd="2"], html[data-gd="3"]) .tra-luot #nut-tra { flex: none; }
:where(html[data-gd="2"], html[data-gd="3"]) .tra-luot .goi-y button,
:where(html[data-gd="2"], html[data-gd="3"]) .tra-luot .phu,
:where(html[data-gd="2"], html[data-gd="3"]) .tra-luot .xem-gio {
  min-height: 44px; padding: 8px 12px;
  border: 1px solid var(--tim-vien); border-radius: 12px; background: var(--nen); color: var(--tim-dam);
  font: 500 15px/1.3 var(--chu-than); cursor: pointer;
}
:where(html[data-gd="2"], html[data-gd="3"]) .tra-luot .goi-y { margin-top: 8px; font-size: 14px; color: var(--chu-phu); }
:where(html[data-gd="2"], html[data-gd="3"]) .tra-luot .goi-y ul { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
:where(html[data-gd="2"], html[data-gd="3"]) .tra-luot .xem-gio { display: block; width: 100%; text-align: left; }
:where(html[data-gd="2"], html[data-gd="3"]) .ket-qua-tra-luot > * { margin-top: 12px; }
:where(html[data-gd="2"], html[data-gd="3"]) .tra-luot .thong-bao.loi { color: #a11d17; }
:where(html[data-gd="2"], html[data-gd="3"]) .tra-luot .the { padding: 12px; border: 1px solid var(--tim-vien); border-radius: 12px; }
:where(html[data-gd="2"], html[data-gd="3"]) .tra-luot .the > * + * { margin-top: 8px; }
:where(html[data-gd="2"], html[data-gd="3"]) .tra-luot .ten { font-weight: 600; }
:where(html[data-gd="2"], html[data-gd="3"]) .tra-luot .so-luot { display: flex; align-items: center; gap: 10px; }
/* gd/2 cũng có lớp .vong cho vòng tròn trang trí (nằm tuyệt đối, có mask): số lượt phải gỡ hết để đọc được */
:where(html[data-gd="2"], html[data-gd="3"]) .tra-luot .vong {
  position: static; -webkit-mask-image: none; mask-image: none;
  font: 600 28px/1.2 var(--chu-tieu-de); color: var(--tim);
}
:where(html[data-gd="2"], html[data-gd="3"]) .tra-luot .trang-thai { font-weight: 500; color: var(--tim-dam); }
:where(html[data-gd="2"], html[data-gd="3"]) .tra-luot .cap-nhat { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px; color: var(--chu-phu); }
:where(html[data-gd="2"], html[data-gd="3"]) .tra-luot .gio-an { margin-top: 10px; }
:where(html[data-gd="2"], html[data-gd="3"]) .tra-luot .dong-gio { margin-top: 10px; }
:where(html[data-gd="2"], html[data-gd="3"]) .canh-bao { padding: 14px; border-radius: 12px; background: #a33a1c; color: #fff; }
:where(html[data-gd="2"], html[data-gd="3"]) .canh-bao strong { display: block; font: 600 18px/1.3 var(--chu-tieu-de); }
:where(html[data-gd="2"], html[data-gd="3"]) .canh-bao p { margin-top: 5px; }
:where(html[data-gd="2"], html[data-gd="3"]) .luoi-anh { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
:where(html[data-gd="2"], html[data-gd="3"]) .luoi-anh img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 12px; }
@media (min-width: 760px) {
  :where(html[data-gd="2"], html[data-gd="3"]) .luoi-anh { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}