/* Hướng thiết kế: biển phố tráng men xanh của Hà Nội + tờ vé số giấy hồng.
   TOÀN TRANG DÙNG MỘT PHÔNG: KVN 97 (pixel, có đủ dấu tiếng Việt).

   Ba ràng buộc của phông này, đã đo bằng ảnh chụp chứ không đoán:
   1. Chữ HOA có dấu bị vẽ thân nhỏ như chữ thường (Ô cạnh O thấy rõ), riêng Đ thì đúng.
      → không dùng text-transform: uppercase ở bất cứ đâu, viết dáng câu.
   2. Không có bản đậm thật. font-weight: 700 khiến trình duyệt bôi đậm giả, nét pixel nhoè bét.
      → mọi nơi đều 400, cần nhấn thì đổi màu hoặc đổi cỡ.
   3. Nét sắc nhất ở bội số của 8px. Dưới 16px thì dấu tiếng Việt chồng lên nhau, khó đọc.
      → 16px là sàn, các cỡ lớn dùng 24 / 32 / 48. */
@font-face {
  font-family: KVN;
  src: url('font/kvn97.ttf') format('truetype');
  font-display: swap;
}

:root {
  --men: #1A4BA0;
  --men-dam: #123777;
  --trang: #FFFDF7;
  --vang: #FFC928;
  --do: #D6202A;
  --giay-ve: #FBDDE2;
  --muc: #14213D;
  --mo: #B9CBEF;          /* chữ phụ trên nền xanh */
  --mo-ve: #6B5460;       /* chữ phụ trên nền vé hồng */
  --chu: KVN, ui-monospace, monospace;
}

* { box-sizing: border-box; }

/* Cảnh phim và vệt gió có thể vượt mép phải; cắt tràn ngang ở gốc kẻo khung nhìn bị nới rộng. */
html, body { overflow-x: clip; }

body {
  margin: 0;
  background: var(--men);
  color: var(--trang);
  font: 400 16px/1.75 var(--chu);
  letter-spacing: .01em;
  /* Tắt khử răng cưa toàn trang: pixel phải là pixel, không được làm mượt */
  -webkit-font-smoothing: none;
  font-smooth: never;
}
body.dang-chieu { overflow: hidden; }

:focus-visible { outline: 3px solid var(--vang); outline-offset: 3px; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, legend, strong, b { font-weight: 400; }

/* ---------- Biển phố ---------- */
.bien-pho { max-width: 1080px; margin: 0 auto; padding: 28px 16px 8px; }
.bien-pho__tren { margin: 0 0 12px; font-size: 16px; color: var(--vang); }
.bien-pho h1 {
  display: inline-block;
  margin: 0;
  padding: 16px 20px 12px;
  border: 4px solid var(--trang);
  border-radius: 10px;
  box-shadow: inset 0 0 0 3px var(--men), inset 0 0 0 5px var(--trang);
  font-size: clamp(26px, 7vw, 48px);
  line-height: 1.2;
}
.bien-pho__duoi { margin: 14px 0 0; max-width: 42ch; color: var(--mo); }

/* ---------- Khung ---------- */
main {
  max-width: 1080px;
  margin: 0 auto;
  padding: 16px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
}
@media (min-width: 700px) {
  main { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); align-items: start; gap: 32px; }
  .may { position: sticky; top: 16px; }
}
@media (min-width: 1100px) {
  main { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 48px; }
}

/* ---------- Bộ lọc ---------- */
fieldset { border: 0; margin: 0 0 24px; padding: 0; min-width: 0; }
legend { padding: 0; margin-bottom: 12px; font-size: 24px; line-height: 1.3; color: var(--vang); }
.hang { display: flex; flex-wrap: wrap; gap: 8px; }

.chip { position: relative; }
.chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chip span {
  display: block;
  min-height: 44px;
  padding: 10px 14px;
  border: 2px solid var(--trang);
  border-radius: 6px;
  line-height: 1.5;
  transition: background .15s, color .15s, transform .15s;
}
.chip input:hover + span { background: var(--men-dam); }
.chip input:checked + span { background: var(--vang); border-color: var(--vang); color: var(--muc); transform: translateY(-1px); }
.chip input:focus-visible + span { outline: 3px solid var(--vang); outline-offset: 3px; }

/* Nút phụ cũng phải chạm được: tối thiểu 44px, đo bằng scripts/do-nhieu-co.mjs. */
.nhanh { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.nhanh button, .goi-y button {
  min-height: 44px;
  padding: 8px 14px;
  border: 2px solid rgba(255, 253, 247, .45);
  border-radius: 999px;
  background: none;
  color: var(--mo);
}
.nhanh button:hover, .goi-y button:hover { background: var(--men-dam); border-color: var(--trang); color: var(--vang); }

details { margin-top: 12px; }
summary { cursor: pointer; min-height: 44px; padding: 10px 0; color: var(--mo); }
details .hang { margin-top: 8px; }

/* ---------- Bảng quay ---------- */
/* Ngưỡng 700px chứ không phải 899px: điện thoại xoay ngang (844x390) mà dính thanh đáy thì
   thanh đó ăn mất một phần ba chiều cao màn hình, không còn nhìn thấy chip nào. */
@media (max-width: 699px) {
  body { padding-bottom: 136px; }
  .bang-quay {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 5;
    padding: 10px 16px calc(14px + env(safe-area-inset-bottom));
    background: var(--men-dam);
    border-top: 2px solid var(--trang);
  }
  .bang-quay .nut-quay { margin-top: 8px; padding: 12px; font-size: 20px; }
}

.dem { margin: 0 0 4px; line-height: 1.5; color: var(--mo); }
.goi-y { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-height: 1.2em; }

.nut-quay {
  width: 100%;
  margin-top: 10px;
  padding: 16px;
  border: 0;
  border-radius: 12px;
  background: var(--do);
  color: var(--trang);
  font-size: 24px;
  line-height: 1.3;
  box-shadow: 0 7px 0 #8E1019;
  transition: transform .08s, box-shadow .08s;
}
.nut-quay:active:not(:disabled) { transform: translateY(5px); box-shadow: 0 2px 0 #8E1019; }
.nut-quay:disabled { opacity: .45; cursor: not-allowed; }

/* Máy tính: bảng quay thành một khối có viền kèm dòng mách nước — cột phải vốn trống trơn. */
.bang-quay__mach { display: none; }
@media (min-width: 700px) {
  .bang-quay {
    padding: 18px;
    border: 2px solid rgba(255, 253, 247, .35);
    border-radius: 14px;
    background: var(--men-dam);
  }
  .bang-quay__mach { display: block; margin: 14px 0 0; color: var(--mo); }
}

/* ---------- Màn phim ---------- */
#phim {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 16px;
  cursor: pointer;
  animation: hien-phim .25s ease both;
}
#phim[hidden] { display: none; }
@keyframes hien-phim { from { opacity: 0 } to { opacity: 1 } }

#man-phim {
  display: block;
  width: min(100%, 960px);
  aspect-ratio: 16 / 9;
  image-rendering: pixelated;
  border-top: 3px solid rgba(0, 0, 0, .3);
  border-bottom: 3px solid rgba(0, 0, 0, .3);
}
#phim-chu {
  margin: 0;
  max-width: 30ch;
  text-align: center;
  color: var(--muc);
}
.phim-bo { margin: 0; color: rgba(20, 33, 61, .6); }

/* Đang chiếu: thanh đầu tan ra để lời dẫn nằm thẳng trong khối flex của màn phim. */
.phim-dau { display: contents; }

/* Hết phim: khung cuối ở lại làm hậu cảnh mờ, tấm vé nổi lên trên. */
#phim:not(.xong) #ve,
#phim:not(.xong) #dong-phim { display: none; }

#phim.xong {
  display: block;
  overflow-y: auto;
  padding: 0;
  cursor: default;
  -webkit-overflow-scrolling: touch;
}
#phim.xong #man-phim {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
  filter: blur(6px) brightness(.5) saturate(.75);
  transform: scale(1.06);         /* nới ra để mép ảnh không lộ vệt trong suốt do blur */
}
#phim.xong::before {              /* lớp tối cho chữ trên vé luôn đọc được */
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(10, 20, 45, .45);
}
#phim.xong > * { position: relative; }
#phim.xong .phim-bo { display: none; }

/* Lời dẫn và nút Đóng thành một thanh dính trên đỉnh. Nút nổi tự do sẽ bị tấm vé che mất. */
#phim.xong .phim-dau {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px 8px 16px;
  background: rgba(8, 18, 42, .82);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(255, 253, 247, .15);
}
#phim.xong #phim-chu {
  max-width: none;
  margin: 0;
  text-align: left;
  color: var(--vang);
}
#phim.xong #ve {
  max-width: 460px;
  margin: 0 auto;
  padding: 0 16px calc(40px + env(safe-area-inset-bottom));
}
#dong-phim {
  flex: none;
  min-height: 44px;
  padding: 8px 18px;
  border: 2px solid var(--trang);
  border-radius: 999px;
  background: transparent;
  color: var(--trang);
}
#dong-phim:hover { background: var(--trang); color: var(--muc); }

/* ---------- Tờ vé ---------- */
.ve {
  --rang: 9px;
  margin-top: 16px;
  padding: 22px 24px 24px;
  color: var(--muc);
  background:
    repeating-radial-gradient(circle at 100% 0, transparent 0 13px, rgba(214, 32, 42, .06) 13px 14px),
    var(--giay-ve);
  /* răng cưa hai mép như vé xé từ cuống */
  -webkit-mask: radial-gradient(circle at 0 50%, transparent var(--rang), #000 calc(var(--rang) + .5px)) 0 0 / 51% 26px repeat-y,
                radial-gradient(circle at 100% 50%, transparent var(--rang), #000 calc(var(--rang) + .5px)) 100% 0 / 51% 26px repeat-y;
  mask: radial-gradient(circle at 0 50%, transparent var(--rang), #000 calc(var(--rang) + .5px)) 0 0 / 51% 26px repeat-y,
        radial-gradient(circle at 100% 50%, transparent var(--rang), #000 calc(var(--rang) + .5px)) 100% 0 / 51% 26px repeat-y;
  animation: in-ve .7s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes in-ve {
  from { clip-path: inset(0 0 100% 0); transform: translateY(-24px); }
  to { clip-path: inset(0); transform: none; }
}

.ve__dau {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2px 12px;
  padding-bottom: 12px;
  border-bottom: 2px dashed var(--do);
  line-height: 1.5;
  color: var(--do);
}
.ve__loai { margin: 16px 0 6px; color: var(--mo-ve); }
.ve__ten { margin: 0; font-size: clamp(24px, 6vw, 32px); line-height: 1.35; color: var(--do); overflow-wrap: anywhere; }
.ve__dia-chi { margin: 12px 0 0; }
.ve__mo-ta { margin: 8px 0 0; color: #3A2C34; }
.ve__gia {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: 16px 0;
  padding: 8px 14px;
  border: 2px solid var(--muc);
  border-radius: 4px;
  width: fit-content;
}
.ve__gia span { color: var(--mo-ve); }


.nut-chinh {
  display: block;
  margin-top: 14px;
  padding: 14px;
  border-radius: 6px;
  background: var(--men);
  color: var(--trang);
  text-align: center;
  text-decoration: none;
}
.nut-chinh:hover { background: var(--men-dam); }

.ve__nhom { margin-top: 20px; }
.ve__nhom h3 { margin: 0 0 10px; font-size: 16px; color: var(--mo-ve); }
.ve__links { display: flex; flex-wrap: wrap; gap: 8px; }
.ve__links a, .ve__links button {
  min-height: 44px;
  padding: 9px 14px;
  border: 2px solid var(--muc);
  border-radius: 4px;
  background: transparent;
  color: var(--muc);
  text-decoration: none;
}
.ve__links a:hover, .ve__links button:hover { background: var(--muc); color: var(--giay-ve); }
.ve__links button { border-style: dashed; }
.ve__chu-thich { margin: 10px 0 0; color: var(--mo-ve); }

/* Dấu ấn tác giả ở chân vé: vé mới là thứ người ta chụp màn hình gửi nhau. */
.ve__dau-an { margin: 14px 0 0; text-align: center; color: var(--mo-ve); opacity: .6; letter-spacing: .04em; }

.ve__cuoi {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin-top: 22px;
  padding-top: 14px;
  border-top: 2px dashed var(--do);
}
.ve__cuoi button {
  min-height: 44px;
  padding: 6px 0;
  background: none;
  border: 0;
  color: var(--do);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.ve :focus-visible { outline-color: var(--men); }

/* ---------- Lịch sử + chân trang ---------- */
.lich-su { margin-top: 32px; }
.lich-su h2 { margin: 0 0 8px; font-size: 16px; color: var(--vang); }
.lich-su ul { list-style: none; margin: 0; padding: 0; }
.lich-su li + li { border-top: 1px solid rgba(255, 253, 247, .2); }
/* KHÔNG đặt width ở đây. `.lich-su button` (0,1,1) đè được `.lich-su__xoa` (0,1,0), nên một dòng
   `width: 100%` sót lại từ bản cũ đã cho nút × chiếm trọn hàng và bóp tên quán còn một ký tự mỗi
   dòng. Bề rộng để flex tự chia: `.lich-su__mo` co giãn, `.lich-su__xoa` cố định 44px. */
.lich-su button { min-height: 44px; padding: 10px 0; background: none; border: 0; text-align: left; }
.lich-su button:hover strong { color: var(--vang); }
.lich-su span { color: var(--mo); }

body > footer { max-width: 1080px; margin: 0 auto; padding: 32px 16px 48px; color: var(--mo); }
body > footer p { margin: 0 0 8px; max-width: 56ch; }
body > footer a { color: inherit; }
/* Dấu ấn tác giả: để cuối cùng, mờ hơn phần còn lại, không giành chỗ của phần ghi công dữ liệu. */
.dau-an { margin-top: 20px; color: var(--mo); opacity: .55; letter-spacing: .04em; }

@media (prefers-reduced-motion: reduce) {
  .ve, #phim { animation: none; }
  #phim.xong #man-phim { transform: none; }
  .chip span, .nut-quay { transition: none; }
}

/* Màn thấp (điện thoại xoay ngang): phông 16px làm bảng quay cao quá, nút Vít ga tụt khỏi
   tầm nhìn. Bỏ dòng mách nước và bóp gọn lại — bộ đo ở do-nhieu-co.mjs bắt được lỗi này. */
@media (max-height: 540px) {
  .bien-pho { padding-top: 14px; }
  .bien-pho h1 { padding: 10px 16px 8px; font-size: clamp(24px, 5vw, 32px); }
  .bien-pho__duoi { margin-top: 10px; }
  .bang-quay { padding: 12px; }
  .bang-quay__mach { display: none; }
  .nut-quay { margin-top: 8px; padding: 12px; font-size: 20px; }
}

/* Mục nhập từ OpenStreetMap: nói thẳng là chưa qua tay người kiểm.
   Dùng hộp gạch đứt đỏ như con dấu đóng lên vé, ăn theo đúng ngôn ngữ sẵn có của tấm vé
   (gạch đứt ở đầu và cuối vé, hộp viền khép kín ở ô mệnh giá) thay vì thanh màu dọc một bên. */
.ve__chua-kiem {
  margin: 12px 0 0;
  padding: 8px 12px;
  border: 2px dashed var(--do);
  border-radius: 4px;
  background: rgba(214, 32, 42, .06);
  color: var(--mo-ve);
}

/* ---------- Khung hình trên vé ---------- */
/* Ghim quán trên Google Maps. Không tải được thì app.js gỡ hẳn iframe, vé không có ô trống. */
.ve__ban-do { display: block; width: 100%; height: 200px; border: 2px solid var(--muc); border-radius: 4px; background: #E9CDD2; }

/* ---------- Lịch sử: xoá từng vé và xoá hết ---------- */
.lich-su__dau { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
#xoa-het {
  min-height: 40px;
  padding: 6px 14px;
  border: 2px solid rgba(255, 253, 247, .45);
  border-radius: 999px;
  background: none;
  color: var(--mo);
}
#xoa-het:hover { border-color: var(--do); color: var(--do); }
.lich-su li { display: flex; align-items: center; gap: 8px; }
.lich-su__mo { flex: 1; min-width: 0; }
.lich-su__mo strong { overflow-wrap: anywhere; }
/* Nâng độ đặc hiệu lên (0,2,1) để mọi thuộc tính ở đây đè được `.lich-su button` (0,1,1) —
   chính cái bẫy ghi ở trên: để `.lich-su__xoa` trơn thì `text-align: left` thắng và dấu × dạt
   hẳn sang mép trái ô 44px thay vì nằm giữa. */
.lich-su button.lich-su__xoa {
  flex: none;
  text-align: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--mo);
  font-size: 24px;
  line-height: 1;
}
.lich-su button.lich-su__xoa:hover { background: var(--do); color: var(--trang); }

/* Nút phụ trên vé, ví dụ Thực đơn — nhạt hơn nút Chỉ đường để không tranh chỗ */
.nut-phu {
  display: block;
  margin-top: 10px;
  padding: 13px;
  border: 2px solid var(--men);
  border-radius: 6px;
  color: var(--men);
  text-align: center;
  text-decoration: none;
}
.nut-phu:hover { background: var(--men); color: var(--trang); }

/* Liên kết ghi công là thứ bắt buộc theo giấy phép, nên cũng phải chạm được như mọi nút khác. */
body > footer a {
  display: inline-block;
  padding: 13px 2px;
  margin: -13px 0;
  color: inherit;
}
body > footer a:hover { color: var(--vang); }

/* Công tắc lấy cả địa điểm chưa kiểm. Phải nói rõ đang đánh đổi cái gì, nên kèm luôn số đếm. */
.cong-tac {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  min-height: 44px;
  margin: -8px 0 22px;
  padding: 8px 12px;
  border: 2px solid rgba(255, 253, 247, .3);
  border-radius: 10px;
  cursor: pointer;
}
.cong-tac:hover { border-color: var(--trang); }
.cong-tac input { width: 22px; height: 22px; accent-color: var(--vang); flex: none; cursor: pointer; }
.cong-tac small { width: 100%; color: var(--mo); }
.cong-tac[hidden] { display: none; }

/* Khối thông tin hỏi trực tiếp Google. Nó vốn đã là một .ve__nhom có tiêu đề riêng như
   "Xem review" hay "Đặt về", nên không cần viền gì thêm — chỉ một gạch đứt phía trên để tách,
   đúng kiểu ngăn mục của tấm vé. */
.ve__google { margin-top: 22px; padding-top: 16px; border-top: 2px dashed var(--do); }
.ve__sao { margin: 0 0 10px; color: var(--muc); }
.ve__anh-boi {
  position: absolute;
  left: 8px;
  bottom: 8px;
  max-width: 60%;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(20, 33, 61, .65);
  color: var(--trang);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}