/* ═══════════════════════════════════════════════
   UMIDON — page-van-phong.css
   Landing "Cơm Nhật văn phòng — Đặt cơm trưa Umidon"
   Nạp SAU style.css + pages.css. Chỉ style riêng của trang này.
   ═══════════════════════════════════════════════ */

/* ─────────── HERO VĂN PHÒNG ─────────── */
.ohero {
  padding: clamp(118px, 14vw, 172px) 0 clamp(46px, 6vw, 80px);
  position: relative;
  overflow: hidden;
}
.ohero__wrap {
  display: grid;
  grid-template-columns: 1.06fr .94fr;
  gap: clamp(22px, 3.2vw, 50px);
  align-items: center;
  position: relative;
}
.ohero__left { position: relative; z-index: 2; }
.ohero__crumb { margin-bottom: 16px; }

.ohero__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(37px, 6.1vw, 82px);
  line-height: .97;
  letter-spacing: -.02em;
  text-transform: uppercase;
  margin: 4px 0 16px;
  max-width: 15ch;
}
.ohero__title em { font-style: normal; color: var(--red); }

.ohero__quote {
  font-size: clamp(18px, 1.9vw, 23px);
  line-height: 1.35;
  color: rgba(30, 26, 21, .72);
  max-width: 30ch;
  margin-bottom: 14px;
}
.ohero__desc {
  max-width: 520px;
  font-size: 15.5px;
  color: rgba(30, 26, 21, .78);
  margin-bottom: 24px;
}
.ohero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.ohero__caption {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-top: 26px;
  font-size: 11.5px; letter-spacing: .12em;
  color: var(--red);
}
.ohero__caption i { font-style: normal; color: var(--yolk); }

.ohero__right { position: relative; min-height: clamp(380px, 45vw, 610px); }
.ohero__cut {
  position: absolute;
  width: clamp(215px, 25vw, 348px);
  top: 0; right: 5%;
  transform: rotate(3deg);
  z-index: 2;
}
.ohero__cut img {
  width: 100%; height: auto;
  filter: drop-shadow(3px 0 0 var(--card)) drop-shadow(-3px 0 0 var(--card))
          drop-shadow(0 3px 0 var(--card)) drop-shadow(0 -3px 0 var(--card))
          drop-shadow(8px 12px 0 rgba(20, 16, 8, .15));
}
.ohero__right .ohero__pola {
  position: absolute;
  left: 0; bottom: 1%;
  width: clamp(148px, 16.5vw, 214px);
  z-index: 3;
  transform: rotate(-5deg);
}
.ohero__right .ohero__pola:hover { transform: rotate(-5deg) translateY(-6px); }
.ohero__note {
  position: absolute;
  left: 2%; top: 4%;
  font-size: 18px; line-height: 1.25;
  color: var(--ink);
  transform: rotate(-6deg);
  z-index: 4;
}
.ohero__right .hero__steam { top: -6%; right: 24%; }
.ohero__right .price-tag { top: 40%; right: 0; }
.ohero__right .hero__label { top: -3%; right: -1%; }
.ohero__right .hero__barcode { bottom: 6%; right: 4%; position: absolute; width: clamp(90px, 10vw, 126px); color: var(--ink); z-index: 4; }

/* ─────────── 6 LỢI ĐIỂM ─────────── */
.perks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.6vw, 30px);
  margin-top: 36px;
}
.perks .note:nth-child(3n) { transform: rotate(1.2deg); }
.perks .note:nth-child(3n+2) { transform: rotate(-1.4deg); }
.perks .note:hover { transform: rotate(0) translateY(-6px); }
.perk__no {
  position: absolute; top: 14px; right: 16px;
  font-size: 11px; letter-spacing: .14em;
  color: rgba(30, 26, 21, .34);
}
.perks .note p b { color: var(--ink); }
.stamp-vp {
  position: absolute;
  top: clamp(26px, 3.6vw, 56px); right: clamp(18px, 5vw, 80px);
  width: clamp(60px, 6.6vw, 96px); height: auto;
  transform: rotate(12deg);
  opacity: .92;
  z-index: 2;
}

/* ─────────── ĐẶT NHÓM & CÔNG TY (đen) ─────────── */
/* padding dưới gọn lại: tránh dải đen trống trước mép xé */
.group { padding-top: clamp(40px, 5vw, 70px); padding-bottom: clamp(44px, 5vw, 72px); }
.group__head {
  position: relative;
  display: grid; grid-template-columns: 1.15fr .85fr;
  align-items: end; gap: 30px;
  margin-bottom: clamp(36px, 4.6vw, 56px);
}
.group__title {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(32px, 5vw, 62px);
  line-height: .98; letter-spacing: -.015em;
  text-transform: uppercase;
  margin-top: 12px;
}
.group__title em { font-style: normal; color: var(--yolk); }
.group__lead p { color: rgba(246, 239, 223, .8); font-size: 15.5px; }
.group__stamp {
  position: absolute;
  top: -58px; right: 2%;
  width: clamp(66px, 7vw, 100px); height: auto;
  transform: rotate(12deg);
  z-index: 3;
}

.steps {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.6vw, 30px);
  list-style: none;
}
.step {
  position: relative;
  display: flex; flex-direction: column;
  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(190, 56, 19, .9);
  padding: 28px 26px 26px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.step:nth-child(even) { transform: rotate(.9deg); }
.step:nth-child(odd) { transform: rotate(-.8deg); }
.step:hover { transform: rotate(0) translateY(-6px); box-shadow: 9px 12px 0 rgba(190, 56, 19, .9); }
.step__no {
  display: block;
  font-family: var(--font-display); font-weight: 900;
  font-size: 46px; line-height: .9;
  color: var(--red);
}
/* min-height = 2 dòng: tiêu đề dài/ngắn vẫn cho phần thân thẳng hàng nhau */
.step h3 {
  font-size: 16.5px; line-height: 1.28;
  margin: 10px 0 8px;
  min-height: 2.56em;
  display: flex; align-items: flex-end;
}
.step p { font-size: 14.5px; color: rgba(30, 26, 21, .75); margin-bottom: 16px; }
.step__tick {
  align-self: flex-start;
  margin-top: auto;
  font-size: 11px; letter-spacing: .12em;
  background: var(--yolk); color: var(--ink);
  border: 2px solid var(--ink);
  padding: 3px 9px;
  transform: rotate(-1.4deg);
}

/* 2 cột: chữ co giãn — polaroid cột phải, không rớt dòng để trống một mảng */
.group__deal {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(170px, 19vw, 232px);
  align-items: center;
  gap: clamp(22px, 3vw, 40px);
  margin-top: clamp(30px, 3.6vw, 46px);
  padding: 24px 28px;
  border: 2.5px dashed rgba(246, 239, 223, .45);
}
.group__deal h3 { font-size: 17px; color: var(--yolk); margin-bottom: 6px; }
.group__deal p { font-size: 14.5px; color: rgba(246, 239, 223, .78); max-width: 60ch; }
.group__deal ul { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.group__deal li {
  font-family: var(--font-mono);
  font-size: 11.5px; letter-spacing: .08em;
  border: 2px solid rgba(246, 239, 223, .4);
  padding: 6px 12px;
  color: rgba(246, 239, 223, .82);
}
.group__deal .group__pola {
  width: 100%;
  transform: rotate(2.2deg);
}
.group__deal .group__pola:hover { transform: rotate(0) translateY(-6px); }
.group__deal .group__pola .hand { font-size: 15px; margin-top: 8px; }
.group__actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: clamp(28px, 3.4vw, 40px); }
.group__note { margin-top: 18px; font-size: 11px; letter-spacing: .1em; color: rgba(246, 239, 223, .5); }

/* ─────────── COMBO VĂN PHÒNG ─────────── */
.combos {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.6vw, 32px);
  margin-top: 34px;
}
.combos .polaroid { box-shadow: 6px 8px 0 rgba(20, 16, 8, .18); }
.combos .polaroid:hover { box-shadow: 10px 14px 0 rgba(20, 16, 8, .2); }
.combos .polaroid h3 { font-size: 17px; margin-top: 14px; }
.combo__list { margin: 10px 2px 0; }
.combo__list li {
  font-size: 13.5px; line-height: 1.5;
  color: rgba(30, 26, 21, .72);
  padding-left: 16px; position: relative;
}
.combo__list li::before {
  content: "✱"; position: absolute; left: 0;
  color: var(--red); font-size: 11px; top: 2px;
}
.combos .polaroid__price {
  position: static;
  display: inline-block;
  margin: 14px 2px 2px;
  transform: rotate(-2deg);
}
.combos__note { margin-top: 22px; font-size: 11px; letter-spacing: .1em; color: rgba(30, 26, 21, .5); }

/* ─────────── FAQ ─────────── */
/* 2 cột: danh sách câu hỏi + cột phải sticker Umi, không để trống mảng bên phải */
.faq__wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(200px, 22vw, 290px);
  gap: clamp(24px, 3.4vw, 52px);
  align-items: start;
  margin-top: 34px;
}
.faq { display: grid; gap: 16px; }
.faq__side { position: relative; }
.faq__umi { position: relative; width: 100%; transform: rotate(3deg); }
.faq__umi img { filter: drop-shadow(4px 6px 0 rgba(23, 19, 14, .14)); }
.faq__umi figcaption {
  margin-top: 10px;
  font-size: 18px; line-height: 1.3; text-align: center;
  color: rgba(30, 26, 21, .7);
  transform: rotate(-2deg);
}
.faq__item {
  background: var(--card);
  border: 3px solid var(--ink);
  box-shadow: 5px 6px 0 rgba(23, 19, 14, .85);
  padding: 18px 22px;
  transition: box-shadow .2s ease, transform .2s ease;
}
.faq__item:nth-child(even) { transform: rotate(.4deg); }
.faq__item:nth-child(odd) { transform: rotate(-.35deg); }
.faq__item[open] { box-shadow: 8px 10px 0 rgba(190, 56, 19, .9); transform: rotate(0); }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  cursor: pointer; list-style: none;
  font-family: var(--font-display); font-weight: 800;
  font-size: 16.5px; line-height: 1.35;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+";
  font-family: var(--font-logo); font-weight: 700;
  font-size: 26px; line-height: 1;
  color: var(--red);
  flex: none;
}
.faq__item[open] summary::after { content: "–"; }
.faq__item p {
  margin-top: 14px; padding-top: 14px;
  border-top: 2px dashed rgba(30, 26, 21, .16);
  font-size: 14.5px; color: rgba(30, 26, 21, .76);
}
.faq__aside {
  display: flex; align-items: flex-start; gap: 10px;
  margin-top: 22px;
  font-size: 12.5px; line-height: 1.5; letter-spacing: .05em;
  color: var(--russet);
  border-top: 2px dashed var(--russet);
  padding-top: 12px;
}
.faq__aside .ico { flex: none; margin-top: 2px; }
.faq__aside:hover { color: var(--red); }

/* CTA cuối — hotline nổi */
.ocall {
  display: inline-flex; align-items: center; gap: 12px;
  margin-top: 22px;
  background: var(--card);
  border: 3px solid var(--ink);
  box-shadow: 5px 5px 0 rgba(23, 19, 14, .9);
  padding: 12px 20px;
  transform: rotate(-1.2deg);
}
.ocall .ico { width: 26px; height: 26px; color: var(--red); }
.ocall b { display: block; font-family: var(--font-display); font-size: 15px; letter-spacing: .03em; }
.ocall span { font-size: 11.5px; letter-spacing: .1em; color: rgba(30, 26, 21, .6); }

/* ─────────── RESPONSIVE ─────────── */
@media (max-width: 1024px) {
  .perks, .steps, .combos { grid-template-columns: repeat(2, 1fr); }
  .steps .step:last-child { grid-column: 1 / -1; }
  .group__head { grid-template-columns: 1fr; align-items: start; }
  .group__stamp { top: -46px; right: 0; }
}

@media (max-width: 880px) {
  .ohero { padding-top: 104px; }
  .ohero__wrap { grid-template-columns: 1fr; }
  .ohero__right { order: -1; min-height: clamp(300px, 64vw, 430px); margin-bottom: 12px; }
  .ohero__cut { width: clamp(210px, 44vw, 320px); right: 2%; }
  .ohero__right .ohero__pola { width: clamp(140px, 30vw, 200px); bottom: -2%; }
  .ohero__right .hero__label { font-size: 10px; right: 0; }
  .ohero__note { display: none; }
  .perks, .steps, .combos { grid-template-columns: 1fr; }
  .group__deal { grid-template-columns: 1fr; justify-items: start; }
  .group__deal .group__pola { width: clamp(170px, 42vw, 230px); }
  .faq__wrap { grid-template-columns: 1fr; }
  .faq__side { max-width: 320px; margin: 6px auto 0; }
}

@media (max-width: 540px) {
  .ohero__caption { gap: 7px; font-size: 10.5px; }
  .ohero__right .price-tag { top: 34%; }
  .faq__item summary { font-size: 15px; }
}