/* ═══════════════════════════════════════════════
   UMIDON — page-dat-mon.css
   Nạp SAU style.css + pages.css. Chỉ style riêng trang ĐẶT MÓN.
   ═══════════════════════════════════════════════ */

/* nav: đánh dấu trang hiện tại (dùng lại gạch vàng có sẵn) */
.nav__links a[aria-current="page"]::after { transform: scaleX(1); }

/* icon dạng đặc (logo mạng xã hội) */
.ico--fill { fill: currentColor; }

/* ═══════════ HERO TRANG ═══════════ */
.ord-hero { overflow: hidden; }
.ord-hero__wrap {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: clamp(22px, 3.4vw, 56px);
  align-items: center;
}
.ord-hero__text .page-hero__desc { margin-bottom: 26px; }
.ord-hero__text .hero__caption { margin-top: 26px; margin-bottom: 0; }
.ord-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 28px; }

.ord-hero__art { position: relative; display: flex; justify-content: center; gap: clamp(12px, 1.8vw, 22px); }
.ord-hero__art .polaroid { width: 47%; box-shadow: 6px 8px 0 rgba(20,16,8,.18); }
.ord-hero__art .polaroid:hover { box-shadow: 9px 12px 0 rgba(20,16,8,.22); }
.ord-hero__art .polaroid:nth-child(2) { margin-top: clamp(30px, 5vw, 62px); }
/* Umi dán ở góc trên-trái, chỉ chớm mép ảnh — không đè chú thích polaroid */
.ord-hero__umi {
  position: absolute; left: -30px; top: -22px; bottom: auto;
  width: clamp(72px, 8vw, 104px); height: auto;
  transform: rotate(-11deg);
  filter: drop-shadow(4px 6px 0 rgba(23,19,14,.14));
  z-index: 5;
}
.ord-hero__steam {
  position: absolute; top: -34px; right: 12%;
  width: clamp(34px, 4vw, 52px);
  color: var(--red);
  z-index: 5;
}

/* ═══════════ 3 HÌNH THỨC ĐẶT MÓN ═══════════ */
.steps {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(22px, 2.8vw, 34px);
  margin-top: 40px;
}
.note--step { display: flex; flex-direction: column; padding: 40px 26px 26px; }
.step__num {
  position: absolute; top: -20px; left: -16px;
  display: grid; place-items: center;
  width: 54px; height: 54px;
  background: var(--red); color: var(--card);
  border: 3px solid var(--ink); border-radius: 50%;
  font-family: var(--font-display); font-weight: 800; font-size: 22px; line-height: 1;
  box-shadow: 3px 4px 0 rgba(23,19,14,.85);
  transform: rotate(-8deg);
  z-index: 4;
}
.note--step:nth-child(2) .step__num { background: var(--yolk); color: var(--ink); transform: rotate(7deg); }
.note--step:nth-child(3) .step__num { background: var(--ink); color: var(--paper); transform: rotate(-5deg); }
/* biến thể icon nền mực — tương phản cao, vẫn trong palette */
.note__icon--ink { background: var(--ink); color: var(--paper); }
.step__tag {
  display: inline-block;
  font-size: 10.5px; letter-spacing: .14em;
  color: var(--russet);
  margin-bottom: 6px;
}
.step__list { display: grid; gap: 7px; margin: 14px 0 20px; }
.step__list li {
  display: flex; gap: 9px; align-items: flex-start;
  font-size: 13px; line-height: 1.5; letter-spacing: .02em;
  color: rgba(30,26,21,.72);
}
.step__list li::before { content: "✱"; color: var(--red); font-size: 12px; line-height: 1.55; }
.step__foot { margin-top: auto; display: flex; flex-wrap: wrap; gap: 10px; }

/* nút placeholder — trông "tắt", chờ khách gửi link thật */
.btn--dim {
  opacity: .68;
  cursor: not-allowed;
  box-shadow: 4px 4px 0 rgba(23,19,14,.55);
}
.btn--dim:hover { transform: none; box-shadow: 4px 4px 0 rgba(23,19,14,.55); }

/* tem "[CẬP NHẬT]" */
.upd {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: .12em;
  color: var(--red);
  border: 2px dashed var(--red);
  padding: 3px 9px;
  transform: rotate(-1.4deg);
}
.upd--light { color: var(--yolk); border-color: rgba(251,164,61,.6); }

/* ═══════════ BẢNG TIN ĐẶT MÓN (section đen) ═══════════ */
/* mép xé đã chiếm chỗ phía trên → giảm padding cho khỏi trống */
.board-sec { padding-top: clamp(30px, 3.6vw, 52px); }

.board__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 28px; margin-bottom: clamp(34px, 4.4vw, 56px);
  position: relative;
}
.board__title {
  font-size: clamp(32px, 4.8vw, 60px);
  line-height: .98; letter-spacing: -.015em; text-transform: uppercase;
  margin-top: 12px;
}
.board__title em { font-style: normal; color: var(--yolk); }
.board__intro { max-width: 380px; font-size: 15px; color: rgba(246,239,223,.78); }
.board__oishii {
  width: clamp(80px, 8vw, 118px); height: auto;
  transform: rotate(6deg);
  margin-bottom: 6px;
}

.board {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.6vw, 30px);
}
.board__card {
  position: relative;
  background: var(--card);
  color: var(--ink);
  border: 3px solid var(--ink);
  padding: 28px 24px 24px;
  box-shadow: 6px 8px 0 rgba(0,0,0,.5);
  transition: transform .2s ease, box-shadow .2s ease;
}
.board__card:nth-child(odd) { transform: rotate(-.9deg); }
.board__card:nth-child(even) { transform: rotate(.85deg); }
.board__card:hover { transform: rotate(0) translateY(-6px); box-shadow: 10px 13px 0 rgba(0,0,0,.5); }
.board__card h3 { font-size: 16px; margin-bottom: 8px; }
.board__card p { font-size: 14px; color: rgba(30,26,21,.75); }
.board__card .upd { margin-top: 14px; }
.board__val {
  display: block;
  font-family: var(--font-logo); font-weight: 700;
  font-size: 21px; line-height: 1.2;
  margin-bottom: 8px;
}
.board__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.board__tags span {
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: .1em;
  border: 2px dashed rgba(30,26,21,.4);
  padding: 5px 10px;
}
.board__link {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 14px;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .08em;
  color: var(--red);
  border-bottom: 2px dashed var(--red);
  padding-bottom: 2px;
}
.board__link:hover { opacity: .7; }
.board__link .ico { width: 15px; height: 15px; }

.board__strip {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: clamp(16px, 2.4vw, 28px);
  background: var(--yolk);
  color: var(--ink);
  border: 3px solid var(--ink);
  box-shadow: 6px 8px 0 rgba(0,0,0,.5);
  padding: 24px 28px;
  transform: rotate(-.4deg);
}
.board__strip .ico { width: 38px; height: 38px; flex: none; color: var(--ink); }
.board__strip h3 { font-size: 16px; margin-bottom: 6px; }
.board__strip p { font-size: 14.5px; color: rgba(30,26,21,.82); }

.board__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 18px; margin-top: clamp(30px, 3.6vw, 44px);
}
.board__foot .mono { font-size: 11px; letter-spacing: .12em; color: rgba(246,239,223,.5); }
.board__barcode { width: 118px; color: rgba(246,239,223,.6); }

/* ═══════════ CƠ SỞ GẦN BẠN ═══════════ */
.near__cta { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-top: clamp(28px, 3.4vw, 40px); }
.near__note { font-size: 11px; letter-spacing: .1em; color: rgba(30,26,21,.55); }

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width: 1024px) {
  .board { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 880px) {
  .ord-hero__wrap { grid-template-columns: 1fr; }
  .ord-hero__art { order: -1; margin-bottom: 26px; }
  .ord-hero__umi { left: -10px; top: -16px; bottom: auto; }
  .steps { grid-template-columns: 1fr; }
  .board__head { flex-direction: column; align-items: flex-start; }
  .board__oishii { position: absolute; top: -14px; right: 0; }
}

@media (max-width: 540px) {
  .board { grid-template-columns: 1fr; }
  .board__strip { flex-direction: column; align-items: flex-start; }
  .step__foot .btn { width: 100%; }
}