/* ═══════════════════════════════════════════════
   UMIDON — page-menu.css: style riêng trang THỰC ĐƠN
   Nạp SAU style.css + pages.css
   ═══════════════════════════════════════════════ */

/* ═══════════ HERO TRANG MENU ═══════════ */
.menu-hero { overflow: hidden; }
.menu-hero__wrap { position: relative; }
.menu-hero .page-hero__title { max-width: 16ch; transform: rotate(-1.4deg); }
.menu-hero .page-hero__title .stroke {
  color: transparent;
  -webkit-text-stroke: clamp(2px, .3vw, 4px) var(--red);
}
.menu-hero__jp {
  position: absolute; top: -6px; right: 2%;
  background: var(--black); color: var(--paper);
  font-size: 11.5px; line-height: 1.7; letter-spacing: .1em;
  padding: 10px 14px;
  transform: rotate(2.4deg);
  box-shadow: 4px 4px 0 rgba(190, 56, 19, .9);
  z-index: 3;
}
.menu-hero__oishii {
  position: absolute; top: 34%; right: 4%;
  width: clamp(84px, 9vw, 130px); height: auto;
  transform: rotate(-8deg);
  z-index: 2;
}
.menu-hero__note {
  display: inline-block;
  margin-top: 22px;
  font-size: 19px; line-height: 1.25;
  color: var(--russet);
  transform: rotate(-1.6deg);
}
.menu-hero__dd {
  position: absolute; right: 16%; bottom: 6%;
  width: 66px; color: var(--yolk);
  transform: rotate(16deg);
}
.menu-hero__barcode {
  position: absolute; right: 3%; bottom: 0;
  width: clamp(88px, 9vw, 120px);
  color: rgba(30, 26, 21, .45);
}
.menu-hero__meta {
  display: flex; flex-wrap: wrap; gap: 10px 18px;
  margin-top: 26px;
  font-size: 11.5px; letter-spacing: .12em;
  color: var(--red);
}

/* ═══════════ THANH TAB NHẢY NHÓM ═══════════ */
.menu-tabs {
  position: sticky; top: 74px; z-index: 60;
  background: rgba(255, 242, 223, .93);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 2.5px solid var(--ink);
  border-bottom: 2.5px solid var(--ink);
  padding: 11px 0;
}
.menu-tabs__inner {
  display: flex; align-items: center; gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
}
.menu-tabs__inner::-webkit-scrollbar { display: none; }
.menu-tabs__label {
  font-size: 10.5px; letter-spacing: .16em;
  color: rgba(30, 26, 21, .5);
  white-space: nowrap;
  padding-right: 4px;
}
.tab {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 600; letter-spacing: .06em;
  background: var(--card);
  border: 2.5px solid var(--ink);
  border-radius: var(--r-hand);
  padding: 7px 15px;
  box-shadow: 3px 3px 0 rgba(23, 19, 14, .82);
  transform: rotate(-1deg);
  transition: transform .16s, background .16s, color .16s, box-shadow .16s;
  white-space: nowrap;
}
.tab:nth-child(even) { transform: rotate(1.2deg); }
.tab:hover { background: var(--yolk); transform: rotate(0) translate(-1px, -2px); box-shadow: 5px 6px 0 rgba(23, 19, 14, .82); }
.tab.is-active { background: var(--ink); color: var(--paper); transform: rotate(0); }

/* ═══════════ KHỐI NHÓM MÓN ═══════════ */
.grp { position: relative; }
/* siết khoảng trống hai bên mép giấy xé — bản thân .tear đã cao ~250px */
.grp--tight-bottom { padding-bottom: clamp(24px, 3vw, 44px); }
.grp--tight-top { padding-top: clamp(24px, 3vw, 44px); }
.grp__head {
  display: grid;
  grid-template-columns: 1fr minmax(260px, 380px);
  gap: clamp(20px, 3vw, 48px);
  align-items: end;
  margin-bottom: clamp(34px, 4vw, 52px);
}
.grp__num {
  font-family: var(--font-display);
  font-size: clamp(46px, 7vw, 92px);
  line-height: .8;
  color: transparent;
  -webkit-text-stroke: 2px rgba(30, 26, 21, .3);
  margin-bottom: 6px;
  user-select: none;
}
.section--black .grp__num { -webkit-text-stroke-color: rgba(246, 239, 223, .32); }
.grp__title {
  font-size: clamp(30px, 4.6vw, 56px);
  line-height: 1.02;
  letter-spacing: -.012em;
  text-transform: uppercase;
}
.grp__title em { font-style: normal; color: var(--red); }
.section--black .grp__title em { color: var(--yolk); }
.grp__scribble {
  position: static;
  width: clamp(150px, 19vw, 250px); height: 16px;
  color: var(--yolk);
  margin-top: 14px;
}
.grp__star {
  top: clamp(48px, 6vw, 90px); right: 3%;
  width: clamp(30px, 3.4vw, 44px);
  color: var(--red);
  transform: rotate(-12deg);
}
.grp__desc { font-size: 15.5px; color: rgba(30, 26, 21, .78); }
.section--black .grp__desc { color: rgba(246, 239, 223, .8); }
.grp__desc b { color: var(--ink); }
.section--black .grp__desc b { color: var(--paper); }

/* ═══════════ LƯỚI POLAROID BIẾN THỂ ═══════════ */
/* align-items:start → thẻ nhỏ không bị kéo cao bằng thẻ lớn cùng hàng
   (nếu stretch thì tem giá absolute sẽ trôi lơ lửng giữa thẻ) */
.polaroids--3 { grid-template-columns: repeat(3, 1fr); align-items: start; }
.polaroid--wide { grid-column: span 2; }
.polaroid--wide img { aspect-ratio: 16 / 10; }
.polaroid--wide h3 { font-size: 17px; }
/* giữ khối chữ dưới ảnh cao đều nhau → tem giá luôn nằm đúng chỗ */
.polaroids--3 .polaroid h3 { min-height: 2.6em; }
.polaroids .polaroid p.hand { min-height: 1.2em; }

/* tem giá trên nền giấy sáng cần viền chắc hơn chút */
.grp .polaroid__price { bottom: 46px; }

/* ═══════════ DANH SÁCH GIÁ KIỂU TỜ MENU GIẤY ═══════════ */
.paperlist {
  position: relative;
  background: var(--card) url("../assets/img/props/tex-paper.jpg");
  background-size: 430px;
  background-blend-mode: multiply;
  color: var(--ink);
  border: 3px solid var(--ink);
  box-shadow: 7px 9px 0 rgba(23, 19, 14, .85);
  padding: clamp(24px, 3vw, 38px) clamp(20px, 2.6vw, 34px) clamp(22px, 2.6vw, 30px);
  transform: rotate(-.5deg);
}
.paperlist--tilt { transform: rotate(.7deg); }
.paperlist__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px;
  padding-bottom: 12px;
  margin-bottom: 8px;
  border-bottom: 3px double rgba(30, 26, 21, .35);
}
.paperlist__head h3 {
  font-family: var(--font-display);
  font-size: 17px; letter-spacing: .01em;
  text-transform: uppercase;
}
.paperlist__head span {
  font-size: 10.5px; letter-spacing: .14em;
  color: rgba(30, 26, 21, .5);
  white-space: nowrap;
}
/* bảng có dán tem 旨 ở góc: chừa chỗ cho tem, tránh đè chữ */
.paperlist--stamped .paperlist__head { padding-right: clamp(56px, 6.5vw, 92px); }

.pl { display: block; }
.pl--two { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(26px, 3.6vw, 54px); }
.pl__row {
  display: flex; align-items: baseline; gap: 8px;
  padding: 11px 4px 9px;
  border-bottom: 1.5px dashed rgba(30, 26, 21, .16);
  transition: background .16s, padding .16s;
}
.pl__row:last-child { border-bottom: 0; }
.pl__row:hover { background: rgba(251, 164, 61, .22); }
.pl__name {
  font-family: var(--font-mono);
  font-size: 14px; font-weight: 500; letter-spacing: .01em;
}
.pl__row .hand {
  display: block;
  font-size: 15.5px; line-height: 1.25;
  color: rgba(30, 26, 21, .58);
  letter-spacing: 0;
}
.pl__dots {
  flex: 1 1 auto;
  min-width: 20px;
  border-bottom: 2px dotted rgba(30, 26, 21, .34);
  transform: translateY(-4px);
}
.pl__price {
  font-family: var(--font-logo);
  font-weight: 700; font-size: 15.5px;
  white-space: nowrap;
}
.pl__price em { font-style: normal; font-size: 11px; letter-spacing: .08em; color: rgba(30, 26, 21, .55); }
.pl__tag {
  font-family: var(--font-mono);
  font-size: 9.5px; font-weight: 600; letter-spacing: .1em;
  background: var(--yolk);
  border: 2px solid var(--ink);
  padding: 1px 6px;
  margin-left: 6px;
  transform: rotate(-2deg);
  display: inline-block;
  white-space: nowrap;
}
.pl__tag--red { background: var(--red); color: var(--card); }

.paperlist__foot {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 2px dashed rgba(30, 26, 21, .22);
  font-size: 10.5px; letter-spacing: .1em;
  color: rgba(30, 26, 21, .5);
}
.paperlist__stamp {
  position: absolute; top: -40px; right: -22px;
  width: clamp(58px, 6vw, 86px); height: auto;
  transform: rotate(12deg);
  z-index: 4;
}
.paperlist__smile {
  position: absolute; bottom: -24px; left: -22px;
  width: clamp(46px, 5vw, 66px); height: auto;
  transform: rotate(-12deg);
  z-index: 4;
}

/* bố cục: danh sách + ảnh scrap */
.split {
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  gap: clamp(26px, 3.6vw, 54px);
  align-items: start;
}
.split--flip { grid-template-columns: .65fr 1.35fr; }
.split--flip .split__aside { order: -1; }
.split--gap { margin-top: clamp(34px, 4vw, 52px); }
.split__aside { position: relative; padding-top: 10px; }
.split__aside .btn { margin-top: 16px; }
/* cột phụ bám theo khi cột chính dài hơn → không để lại mảng trống lớn */
@media (min-width: 1025px) {
  .split__aside { position: sticky; top: 148px; align-self: start; }
}

/* ảnh scrap dán tape (không phải card món — ảnh không khí) */
.scrap {
  position: relative;
  background: var(--card);
  padding: 12px 12px 14px;
  box-shadow: 6px 8px 0 rgba(20, 16, 8, .2);
  transform: rotate(2.2deg);
  transition: transform .2s ease;
}
.section--black .scrap { box-shadow: 7px 12px 22px rgba(0, 0, 0, .5); }
.scrap:hover { transform: rotate(0) translateY(-5px); }
.scrap img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--paper2); }
.scrap--tall img { aspect-ratio: 3 / 4; }
.scrap figcaption {
  margin-top: 10px;
  font-size: 16px; line-height: 1.25;
  color: rgba(30, 26, 21, .68);
  text-align: center;
}

/* ═══════════ VÉ COMBO ═══════════ */
.tickets {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(18px, 2.4vw, 28px);
}
.ticket {
  position: relative;
  display: grid; grid-template-columns: 1fr auto;
  align-items: center; gap: 16px;
  background: var(--card) url("../assets/img/props/tex-paper.jpg");
  background-size: 430px;
  background-blend-mode: multiply;
  color: var(--ink);
  border: 3px solid var(--ink);
  box-shadow: 6px 7px 0 rgba(23, 19, 14, .85);
  padding: 22px 24px 20px 30px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.ticket::before {
  content: "";
  position: absolute; left: 14px; top: 10px; bottom: 10px;
  border-left: 2.5px dashed rgba(30, 26, 21, .3);
}
.ticket--wide { grid-column: 1 / -1; }
.ticket:nth-child(odd) { transform: rotate(-.7deg); }
.ticket:nth-child(even) { transform: rotate(.8deg); }
.ticket:hover { transform: rotate(0) translateY(-5px); box-shadow: 9px 12px 0 rgba(23, 19, 14, .85); }
.ticket h3 { font-size: 16.5px; line-height: 1.25; margin-bottom: 6px; }
.ticket p { font-size: 14px; color: rgba(30, 26, 21, .72); }
.ticket__price {
  font-family: var(--font-logo);
  font-weight: 800; font-size: 21px; line-height: 1;
  background: var(--yolk);
  border: 2.5px solid var(--ink);
  box-shadow: 2px 3px 0 rgba(23, 19, 14, .8);
  padding: 8px 12px 6px;
  text-align: center;
  transform: rotate(3deg);
  white-space: nowrap;
}
.ticket__price small { display: block; font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em; font-weight: 500; }
.ticket__badge {
  position: absolute; top: -12px; left: 20px;
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 600; letter-spacing: .1em;
  background: var(--red); color: var(--card);
  padding: 4px 10px;
  transform: rotate(-3deg);
  box-shadow: 2px 3px 0 rgba(0, 0, 0, .3);
}

/* ═══════════ GHI CHÚ & CTA ═══════════ */
.grp__note {
  margin-top: 22px;
  font-size: 11px; letter-spacing: .1em;
  color: rgba(30, 26, 21, .5);
}
.section--black .grp__note { color: rgba(246, 239, 223, .5); }
.grp__cta { margin-top: clamp(28px, 3.4vw, 40px); display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }

.menu-end { text-align: center; }
.menu-end .btn { margin: 0 6px 10px; }

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width: 1024px) {
  .polaroids--3 { grid-template-columns: repeat(2, 1fr); }
  .polaroid--wide { grid-column: span 2; }
  .split, .split--flip { grid-template-columns: 1fr; }
  .split--flip .split__aside { order: 0; }
  .split__aside { max-width: 420px; }
  .menu-hero__oishii { top: auto; bottom: 4%; right: 2%; }
}

@media (max-width: 880px) {
  .menu-tabs { top: 74px; padding: 9px 0; }
  .grp__head { grid-template-columns: 1fr; align-items: start; }
  .tickets { grid-template-columns: 1fr; }
  .pl--two { grid-template-columns: 1fr; }
  .menu-hero__jp { display: none; }
  .menu-hero__dd { display: none; }
  /* sticker おいしい đè hàng chip ở mobile → ẩn */
  .menu-hero__oishii { display: none; }
}

@media (max-width: 540px) {
  .polaroids--3 { grid-template-columns: 1fr; }
  .polaroid--wide { grid-column: span 1; }
  .polaroid--wide img { aspect-ratio: 1; }
  .menu-hero__barcode { display: none; }
  .menu-hero__oishii { width: 74px; }
  .ticket { grid-template-columns: 1fr; }
  .ticket__price { justify-self: start; }
  .paperlist { padding-left: 18px; padding-right: 18px; }
}