/* ═══════════════════════════════════════════════
   UMIDON — page-uu-dai.css
   Nạp SAU style.css + pages.css. Chỉ style riêng trang ƯU ĐÃI.
   Ngôn ngữ hình: phiếu giảm giá / tem xé zine.
   ═══════════════════════════════════════════════ */

.nav__links a[aria-current="page"]::after { transform: scaleX(1); }
.ico--fill { fill: currentColor; }

/* ═══════════ HERO TRANG ═══════════ */
.uu-hero { overflow: hidden; }
.uu-hero__wrap {
  display: grid;
  grid-template-columns: 1.04fr .96fr;
  gap: clamp(24px, 3.6vw, 60px);
  align-items: center;
}
.uu-hero__scribble { width: clamp(180px, 24vw, 300px); height: 18px; color: var(--yolk); margin: 10px 0 0; }
.uu-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 28px; }
.uu-hero__hand {
  font-size: clamp(19px, 2.2vw, 26px);
  color: var(--russet);
  margin-top: 18px;
  transform: rotate(-1.6deg);
  display: inline-block;
}

.uu-hero__art { position: relative; padding: 26px 0; }
.uu-hero__stamp {
  position: absolute; top: -16px; right: 0;
  width: clamp(58px, 6vw, 88px); height: auto;
  transform: rotate(12deg);
  z-index: 4;
}
/* mèo thần tài chỉ phủ phần cuống vé, không chạm chữ trong thân phiếu */
.uu-hero__cat {
  position: absolute; bottom: -22px; left: -30px;
  width: clamp(72px, 7.4vw, 100px); height: auto;
  transform: rotate(-8deg);
  filter: drop-shadow(4px 6px 0 rgba(23,19,14,.14));
  z-index: 4;
}

/* phiếu mẫu to trong hero */
.coupon--hero { --stub: 86px; box-shadow: 9px 12px 0 rgba(23,19,14,.85); }
.coupon--hero .coupon__body { padding: 32px 28px 32px; }
.coupon--hero .coupon__body h3 { font-size: clamp(19px, 2.2vw, 25px); }
.coupon--hero .coupon__hand { font-size: 18px; }
.coupon--hero .coupon__code { font-size: 15px; }
.coupon--hero .coupon__barcode { width: 110px; }
/* nhãn của phiếu mẫu dời sang trái để không đụng tem 旨 ở góc phải */
.coupon--hero .coupon__status { left: -12px; right: auto; transform: rotate(-5deg); }

/* ═══════════ KHỐI GHI CHÚ "KHUNG CHỜ" ═══════════ */
.disclaim {
  display: flex; align-items: center; gap: clamp(14px, 2vw, 22px);
  background: var(--card);
  border: 3px dashed var(--ink);
  padding: 22px 26px;
  transform: rotate(-.3deg);
}
.disclaim .ico { width: 36px; height: 36px; color: var(--red); flex: none; }
.disclaim p { font-size: 14.5px; color: rgba(30,26,21,.78); }
.disclaim strong { color: var(--ink); }

/* ═══════════ PHIẾU ƯU ĐÃI ═══════════ */
.coupons__kicker { margin-top: clamp(34px, 4vw, 52px); }

.coupons {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 3.2vw, 40px);
  margin-top: clamp(36px, 4.4vw, 52px);
}

.coupon {
  --stub: 72px;
  position: relative;
  display: grid; grid-template-columns: var(--stub) 1fr;
  background: var(--card);
  border: 3px solid var(--ink);
  box-shadow: 7px 9px 0 rgba(23,19,14,.85);
  transition: transform .2s ease, box-shadow .2s ease;
}
.coupon:nth-child(odd) { transform: rotate(-.9deg); }
.coupon:nth-child(even) { transform: rotate(.9deg); }
.coupon:hover { transform: rotate(0) translateY(-6px); box-shadow: 10px 14px 0 rgba(23,19,14,.85); }

/* viền răng cưa mép dưới — kiểu tem xé */
.coupon__teeth {
  position: absolute; left: -3px; right: -3px; bottom: -11px;
  height: 12px;
  background: conic-gradient(from -45deg at 50% 100%, var(--ink) 0 90deg, rgba(0,0,0,0) 90deg) 0 0 / 24px 12px repeat-x;
  pointer-events: none;
}

/* cuống vé + mã phiếu dọc */
.coupon__stub {
  position: relative;
  display: grid; place-items: center;
  background: var(--red); color: var(--card);
  border-right: 3px dashed var(--ink);
  padding: 20px 0 46px;
}
.coupon__stub::after {
  content: "";
  position: absolute; left: 50%; bottom: 16px;
  width: 15px; height: 15px;
  transform: translateX(-50%);
  border: 2.5px solid rgba(255,253,246,.75);
  border-radius: 50%;
}
.coupon__code {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 13px; font-weight: 600;
  letter-spacing: .3em;
}
.coupon:nth-child(3n+2) .coupon__stub { background: var(--yolk); color: var(--ink); }
.coupon:nth-child(3n+2) .coupon__stub::after { border-color: rgba(23,19,14,.35); }
.coupon:nth-child(3n+3) .coupon__stub { background: var(--ink); color: var(--paper); }

/* thân phiếu */
.coupon__body { position: relative; padding: 26px 22px 24px; }
.coupon__status {
  position: absolute; top: -13px; right: -10px;
  background: var(--yolk); color: var(--ink);
  border: 2.5px solid var(--ink);
  padding: 5px 11px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .1em;
  transform: rotate(-4deg);
  box-shadow: 2px 3px 0 rgba(23,19,14,.8);
  z-index: 3;
}
.coupon__status--soon { background: var(--red); color: var(--card); }
.coupon__body h3 { font-size: 17px; line-height: 1.22; margin-bottom: 5px; padding-right: 18px; }
.coupon__hand { font-size: 16px; color: rgba(30,26,21,.6); margin-bottom: 10px; }
.coupon__body p { font-size: 14px; color: rgba(30,26,21,.75); }
.coupon__foot {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 12px; margin-top: 18px;
}
.coupon__barcode { width: 92px; color: rgba(23,19,14,.42); flex: none; }

/* 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);
}

.coupons__note {
  margin-top: clamp(28px, 3.4vw, 40px);
  font-size: 11px; letter-spacing: .1em;
  color: rgba(30,26,21,.55);
  text-align: center;
}

/* ═══════════ THEO DÕI UMIDON (section đen) ═══════════ */
/* mép xé đã chiếm chỗ trên/dưới → thu gọn padding cho khỏi trống */
.follow-sec { padding: clamp(34px, 4vw, 58px) 0 clamp(40px, 4.6vw, 66px); }

.follow {
  display: grid; grid-template-columns: 1.08fr .92fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
.follow__title {
  font-size: clamp(30px, 4.4vw, 54px);
  line-height: 1.02; letter-spacing: -.015em; text-transform: uppercase;
  margin: 12px 0 16px;
}
.follow__title em { font-style: normal; color: var(--yolk); }
.follow__text p { color: rgba(246,239,223,.8); font-size: 15.5px; max-width: 480px; }
.follow__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }

.social-ph { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.social-ph span {
  display: inline-flex; align-items: center; gap: 8px;
  border: 2px dashed rgba(246,239,223,.42);
  padding: 9px 14px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em;
  color: rgba(246,239,223,.72);
}
.social-ph .ico { width: 16px; height: 16px; }
.social-ph .ico--fill { fill: currentColor; }

.follow__art { position: relative; }
.follow__art .polaroid { max-width: 320px; margin: 0 auto; }
.follow__onigiri {
  position: absolute; bottom: -34px; right: 4%;
  width: clamp(70px, 7.5vw, 108px); height: auto;
  transform: rotate(-11deg);
  z-index: 4;
}

/* ═══════════ NHỊP THỞ GIỮA MÉP XÉ VÀ CTA CAM ═══════════ */
.uu-outro {

  padding: clamp(52px, 6.4vw, 92px) 0 clamp(56px, 7vw, 100px);
  text-align: center;
}
.uu-outro__star { width: 30px; height: 30px; color: var(--red); margin: 0 auto 14px; }
.uu-outro__line {
  display: inline-block;
  font-size: clamp(20px, 2.4vw, 30px);
  line-height: 1.35;
  color: var(--russet);
  transform: rotate(-1.2deg);
  max-width: 620px;
}
.uu-outro__note { margin-top: 16px; font-size: 11px; letter-spacing: .12em; color: rgba(30,26,21,.5); }

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

@media (max-width: 880px) {
  .uu-hero__wrap { grid-template-columns: 1fr; }
  .uu-hero__art { order: -1; margin-bottom: 34px; }
  .uu-hero__cat { bottom: -14px; left: auto; right: 4%; }
  .coupons { grid-template-columns: 1fr; }
  .follow { grid-template-columns: 1fr; }
  .follow__art { order: -1; }
  .disclaim { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 540px) {
  .coupon { --stub: 56px; }
  .coupon__code { letter-spacing: .22em; font-size: 12px; }
  .coupon__status { right: -6px; }
}