/* ═══════════════════════════════════════════════
   UMIDON — page-cua-hang.css
   Trang CỬA HÀNG: album 3 chi nhánh kiểu ảnh dán lệch
   Nạp sau style.css + pages.css
   ═══════════════════════════════════════════════ */

/* ── PAGE HERO ── */
.shops-hero { overflow: hidden; padding-bottom: clamp(30px, 4vw, 54px); }
.shops-hero__wrap {
  position: relative;
  display: grid;
  grid-template-columns: 1.06fr .94fr;
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
}
.shops-hero__jump {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-top: 28px;
}
.shops-hero__jump .cat {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--card);
}

/* collage ảnh cửa hàng bên phải */
.shops-hero__collage {
  position: relative;
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: clamp(10px, 1.4vw, 18px);
  align-items: start;
  padding: 26px 6px 34px 0;
}
.shops-hero__collage .shops-hero__pola--a {
  transform: rotate(-2.6deg);
  box-shadow: 7px 9px 0 rgba(20, 16, 8, .2);
}
.shops-hero__collage .shops-hero__pola--a img { aspect-ratio: 4 / 5; }
.shops-hero__collage .shops-hero__pola--a figcaption {
  font-family: var(--font-hand);
  font-size: 15.5px; line-height: 1.25;
  color: rgba(30, 26, 21, .65);
  margin: 9px 2px 0;
}
.shops-hero__collage .shops-hero__pola--b {
  margin-top: 74px;
  transform: rotate(4deg);
  box-shadow: 6px 8px 0 rgba(20, 16, 8, .18);
  z-index: 3;
}
.shops-hero__count {
  position: absolute; z-index: 4;
  left: 40%; bottom: 118px;
  display: grid; place-items: center;
  width: clamp(88px, 10vw, 116px); height: clamp(88px, 10vw, 116px);
  background: var(--yolk);
  border: 3px solid var(--ink);
  border-radius: 50%;
  box-shadow: 4px 5px 0 rgba(23, 19, 14, .85);
  font-size: 15px; line-height: 1.05; text-align: center;
  transform: rotate(-8deg);
  pointer-events: none;
}
.shops-hero__count b {
  display: block;
  font-family: var(--font-display);
  font-size: 27px; line-height: 1;
}
.shops-hero__barcode {
  position: absolute; z-index: 2;
  right: 4px; bottom: 0;
  width: clamp(74px, 8vw, 100px); height: auto;
  color: rgba(30, 26, 21, .55);
  transform: rotate(3deg);
}
.shops-hero__stamp {
  position: absolute; z-index: 5;
  top: -4px; right: 2px;
  width: clamp(72px, 8vw, 112px); height: auto;
  transform: rotate(-8deg);
  pointer-events: none;
}
.shops-hero__dd {
  top: 42%; left: -14px;
  width: 30px; color: var(--red);
}
.shops-hero__dd2 {
  bottom: 12%; left: 2%;
  width: 62px; color: var(--ink);
  transform: rotate(158deg);
}

/* ── KHỐI CHI NHÁNH ── */
.shops {
  padding-top: clamp(48px, 6vw, 84px);
  padding-bottom: clamp(24px, 3vw, 40px);
}

.branch {
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  margin-bottom: clamp(70px, 10vw, 130px);
  scroll-margin-top: 100px;
}
.branch:last-of-type { margin-bottom: clamp(30px, 4vw, 50px); }
.branch--flip .branch__album { order: 2; }

/* album ảnh dán lệch */
.branch__album {
  display: grid;
  grid-template-columns: 1.12fr .88fr;
  gap: clamp(10px, 1.4vw, 18px);
  align-items: start;
  padding: 18px 10px 26px 0;
}
.branch .branch__main {
  grid-column: 1; grid-row: 1 / span 2;
  transform: rotate(-2.2deg);
  box-shadow: 7px 9px 0 rgba(20, 16, 8, .2);
  z-index: 2;
}
.branch .branch__main:hover { transform: rotate(0) translateY(-7px) scale(1.015); }
.branch .branch__main img { aspect-ratio: 4 / 5; }
.branch .branch__main figcaption {
  font-family: var(--font-hand);
  font-size: 16px; line-height: 1.25;
  color: rgba(30, 26, 21, .65);
  margin: 10px 2px 0;
}

.branch .branch__snap {
  box-shadow: 6px 8px 0 rgba(20, 16, 8, .18);
  z-index: 3;
}
.branch .branch__snap--a {
  grid-column: 2; grid-row: 1;
  margin-top: 20px;
  transform: rotate(3.6deg);
}
.branch .branch__snap--a:hover { transform: rotate(0) scale(1.03); }
.branch .branch__snap--b {
  grid-column: 2; grid-row: 2;
  margin: 8px 0 0 -14%;
  transform: rotate(-4deg);
  z-index: 4;
}
.branch .branch__snap--b:hover { transform: rotate(0) scale(1.03); }

/* thông tin chi nhánh */
.branch__name {
  font-size: clamp(30px, 4.2vw, 52px);
  line-height: 1.02;
  letter-spacing: -.015em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.branch__hand {
  font-size: 20px;
  color: var(--russet);
  margin-bottom: 22px;
}

.branch__list { display: grid; gap: 14px; margin-bottom: 24px; }
.branch__list li {
  display: flex; align-items: flex-start; gap: 14px;
  border-bottom: 2px dashed rgba(30, 26, 21, .16);
  padding-bottom: 13px;
}
.branch__list li:last-child { border-bottom: none; padding-bottom: 0; }
.branch__list .ico {
  width: 26px; height: 26px;
  color: var(--red);
  flex: 0 0 auto;
  margin-top: 2px;
}
.branch__list b {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .14em;
  color: rgba(30, 26, 21, .5);
  margin-bottom: 2px;
}
.branch__list span { font-size: 15px; color: rgba(30, 26, 21, .85); }
.branch__list em {
  font-style: normal;
  background: var(--yolk);
  padding: 0 6px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  white-space: nowrap;
}

.branch__services { display: flex; flex-wrap: wrap; gap: 10px; }
.branch__services .cat {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--card);
}
.branch__services .ico { width: 17px; height: 17px; color: var(--red); }

.branch__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }

.note-line {
  font-size: 11px; letter-spacing: .1em;
  color: rgba(30, 26, 21, .5);
  text-align: center;
  margin-top: clamp(10px, 2vw, 22px);
}

/* ── NỘI DUNG PHỤ (section đen) ── */
.shops-story {
  position: relative;
  padding-top: clamp(34px, 4.4vw, 62px);
  padding-bottom: clamp(40px, 5vw, 74px);
}
/* khoảng thở nền giấy giữa mép xé và dải CTA cam */
.tear + .cta { margin-top: clamp(40px, 5vw, 76px); }
.shops-story__title {
  font-size: clamp(30px, 4.6vw, 56px);
  line-height: 1.06;
  letter-spacing: -.01em;
  text-transform: uppercase;
  margin: 14px 0 26px;
}
.shops-story__title em { font-style: normal; color: var(--yolk); }
.shops-story__cols {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(22px, 3vw, 44px);
  max-width: 900px;
  margin-bottom: clamp(38px, 5vw, 56px);
}
.shops-story__cols p { color: rgba(246, 239, 223, .82); font-size: 16px; }
.shops-story__cols strong { color: var(--yolk); }
.shops-story__points { margin-top: 8px; }
.shops-story__umi {
  position: absolute;
  right: clamp(16px, 5vw, 70px); top: clamp(40px, 6vw, 84px);
  width: clamp(112px, 13vw, 168px);
  text-align: center;
  transform: rotate(5deg);
}
.shops-story__umi img { width: 100%; height: auto; }
.shops-story__umi figcaption {
  font-size: 15px; line-height: 1.2;
  color: rgba(246, 239, 223, .7);
  margin-top: 6px;
}

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .branch { grid-template-columns: 1fr; gap: clamp(24px, 4vw, 40px); }
  .branch--flip .branch__album { order: 0; }
  .branch__album { max-width: 620px; }
  .shops-story__umi { position: static; margin: 30px 0 0; transform: rotate(-3deg); }
}

@media (max-width: 880px) {
  .shops-hero__wrap { grid-template-columns: 1fr; }
  .shops-hero__collage { max-width: 520px; padding-top: 14px; }
  .shops-hero__stamp { width: 68px; }
  .shops-hero__dd, .shops-hero__dd2 { display: none; }
  .shops-story__cols { grid-template-columns: 1fr; }
}

@media (max-width: 540px) {
  .shops-hero__collage .shops-hero__pola--b { margin-top: 46px; }
  .shops-hero__count { width: 78px; height: 78px; font-size: 13px; left: 36%; }
  .shops-hero__count b { font-size: 22px; }
  .shops-hero__barcode { display: none; }

  .branch__album {
    grid-template-columns: 1fr 1fr;
    padding-right: 0;
  }
  .branch .branch__main { grid-column: 1 / -1; grid-row: 1; }
  .branch .branch__snap--a { grid-column: 1; grid-row: 2; transform: rotate(2.6deg); }
  .branch .branch__snap--b { grid-column: 2; grid-row: 2; margin-left: 0; transform: rotate(-3deg); }
  .branch__actions .btn { flex: 1 1 100%; }
  .branch__list span { font-size: 14.5px; }
}