/* ═══════════════════════════════════════════════
   UMIDON — page-ve-umidon.css
   Style riêng trang "Về Umidon". Nạp SAU style.css + pages.css
   ═══════════════════════════════════════════════ */

/* ═══════════ BANNER TRANG ═══════════ */
.about-hero { overflow: hidden; }
.about-hero__wrap {
  display: grid;
  grid-template-columns: 1.06fr .94fr;
  gap: clamp(20px, 3vw, 46px);
  align-items: center;
  position: relative;
}
.about-hero__left { position: relative; z-index: 2; }
.about-hero .crumb { margin-bottom: 18px; }
.about-hero .crumb span[aria-hidden] { color: var(--red); }

/* chữ lớn kiểu collage — cùng ngôn ngữ với hero trang chủ */
.ph-display {
  max-width: none;
  font-size: clamp(62px, 10.4vw, 138px);
  line-height: .86;
  letter-spacing: -.03em;
  transform: rotate(-2deg);
  margin-bottom: 22px;
}
.ph-display__line { display: block; }
.ph-display__line--outline {
  color: transparent;
  -webkit-text-stroke: clamp(2.2px, .32vw, 4.5px) var(--red);
}
.ph-display__line--fill { color: var(--red); margin-left: .3em; }
.ph-display i { color: var(--ink); font-style: normal; }

.about-hero__headline {
  font-family: var(--font-display);
  font-size: clamp(19px, 2vw, 27px);
  line-height: 1.35;
  max-width: 520px;
  margin-bottom: 6px;
}
.about-hero .page-hero__desc { margin-top: 14px; }

.about-hero__actions {
  display: flex; flex-wrap: wrap; gap: 16px;
  margin-top: 30px;
}
.about-hero__barcode {
  width: clamp(96px, 10vw, 130px);
  color: rgba(30, 26, 21, .55);
  margin-top: 32px;
}

/* cột phải: ảnh tách nền dán kiểu sticker */
.about-hero__right { position: relative; min-height: clamp(340px, 42vw, 560px); }
.about-hero__cut {
  position: absolute;
  top: 50%; right: 6%;
  width: clamp(210px, 24vw, 330px);
  transform: translateY(-50%) rotate(4deg);
  z-index: 2;
}
.about-hero__cut img {
  width: 100%;
  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));
}
/* chú thích viết tay: mẩu giấy dán đè LÊN ảnh — luôn nằm trên cùng */
.about-hero__note {
  position: absolute;
  bottom: 7%; left: -24%;
  z-index: 8;
  max-width: 178px;
  padding: 8px 13px;
  font-size: 17px; line-height: 1.25;
  text-align: center;
  color: var(--ink);
  background: var(--card);
  border: 2.5px solid var(--ink);
  box-shadow: 3px 4px 0 rgba(23, 19, 14, .85);
  transform: rotate(-4deg);
}
.about-hero__umi {
  position: absolute;
  bottom: -1%; right: -2%;
  width: clamp(92px, 11vw, 150px);
  transform: rotate(-8deg);
  z-index: 3;
  filter: drop-shadow(4px 6px 0 rgba(23, 19, 14, .14));
}
.about-hero__label {
  position: absolute;
  top: 0; right: -1%;
  background: var(--black); color: var(--paper);
  font-size: 11px; line-height: 1.7; letter-spacing: .08em;
  padding: 11px 15px;
  transform: rotate(2.4deg);
  box-shadow: 4px 4px 0 rgba(190, 56, 19, .9);
  z-index: 4;
}
.about-hero__dd-star { top: 34%; left: 2%; width: 32px; color: var(--red); }

/* ═══════════ CÂU CHUYỆN ═══════════ */
.story { position: relative; }
.story__stamp {
  position: absolute;
  top: clamp(40px, 6vw, 92px); right: clamp(14px, 5vw, 70px);
  width: clamp(62px, 7vw, 100px);
  transform: rotate(11deg);
  opacity: .92;
  pointer-events: none;
}
.story__tagline {
  font-size: clamp(30px, 4.8vw, 62px);
  line-height: 1.05;
  letter-spacing: -.015em;
  text-transform: uppercase;
  max-width: 900px;
}
.story__tagline em { font-style: normal; color: var(--red); }
.story__scribble { width: clamp(190px, 24vw, 320px); height: 18px; color: var(--yolk); margin: 14px 0 38px; }

.story__cols {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(22px, 3.4vw, 46px);
  font-size: 16px;
  color: rgba(30, 26, 21, .8);
}
.story__cols strong {
  color: var(--ink);
  background: linear-gradient(100deg, transparent 2%, rgba(255,197,61,.55) 3%, rgba(255,197,61,.55) 97%, transparent 98%);
}

.story__space { margin-top: clamp(48px, 6vw, 78px); }
.story__space .stores { margin-bottom: 18px; }
.story__note { font-size: 11px; letter-spacing: .1em; color: rgba(30, 26, 21, .5); }

/* ═══════════ SỨ MỆNH ═══════════ */
.mission { padding-bottom: clamp(56px, 7vw, 96px); }
.mission__inner { position: relative; text-align: center; }
.mission__inner .kicker { display: block; }

.mission__scrap {
  display: block;
  max-width: 720px;
  margin: 8px auto 0;
  padding: clamp(38px, 5vw, 62px) clamp(30px, 5vw, 66px);
  background: url("../assets/img/props/scrap-cream.png") center / 100% 100% no-repeat;
  filter: drop-shadow(5px 7px 0 rgba(20, 16, 8, .14));
  transform: rotate(-1.6deg);
}
.mission__label {
  font-size: 11px; letter-spacing: .22em;
  color: var(--red);
  margin-bottom: 12px;
}
.mission__text {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(21px, 2.9vw, 34px);
  line-height: 1.25;
  color: var(--ink);
}
.mission__text em { font-style: normal; color: var(--red); }
.mission__seal {
  display: inline-block;
  margin-top: 16px;
  font-size: 10.5px; letter-spacing: .2em;
  color: rgba(30, 26, 21, .5);
  border: 2px dashed rgba(30, 26, 21, .35);
  padding: 5px 12px;
  transform: rotate(1.8deg);
}
.mission__hand {
  margin-top: 26px;
  font-size: 20px;
  color: rgba(30, 26, 21, .62);
  transform: rotate(-1.2deg);
}
.mission__egg {
  position: absolute;
  top: -14px; right: clamp(0px, 6vw, 90px);
  width: clamp(58px, 7vw, 96px);
  transform: rotate(14deg);
}
.mission__dd { bottom: -6px; left: clamp(0px, 6vw, 80px); width: 30px; color: var(--yolk); }

/* ═══════════ TINH THẦN THƯƠNG HIỆU (đen) ═══════════ */
/* padding gọn hơn .section mặc định — mép giấy xé đã ăn sẵn khoảng trống */
.spirit {
  padding-top: clamp(44px, 5vw, 72px);
  padding-bottom: clamp(38px, 4.4vw, 60px);
}
.spirit__head {
  position: relative;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 30px;
  margin-bottom: clamp(38px, 5vw, 58px);
}
.spirit__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(32px, 5vw, 64px);
  line-height: .98; letter-spacing: -.015em;
  text-transform: uppercase;
  margin-top: 14px;
}
.spirit__title em { font-style: normal; color: var(--yolk); }
.spirit__desc { max-width: 400px; position: relative; }
.spirit__desc p { color: rgba(246, 239, 223, .8); font-size: 15.5px; }
/* tem おいしい nằm HẲN phía trên khối chữ, không đè lên dòng nào */
.spirit__oishii {
  position: absolute;
  bottom: calc(100% - 6px); right: -4px;
  width: clamp(74px, 7.6vw, 112px);
  transform: rotate(-7deg);
  z-index: 3;
  pointer-events: none;
}
.spirit__cta { text-align: center; margin-top: clamp(32px, 3.6vw, 46px); }

/* ═══════════ GIÁ TRỊ CỐT LÕI — 5 con tem ═══════════ */
.core { position: relative; overflow: hidden; }
.core__list {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: clamp(14px, 1.8vw, 22px);
  margin-top: 12px;
}
.core__item {
  position: relative;
  background: var(--card);
  border: 3px solid var(--ink);
  padding: 26px 18px 22px;
  text-align: center;
  box-shadow: 6px 7px 0 rgba(23, 19, 14, .85);
  transition: transform .2s ease, box-shadow .2s ease;
}
.core__item::before {
  content: "";
  position: absolute; inset: 6px;
  border: 2px dashed rgba(30, 26, 21, .3);
  pointer-events: none;
}
.core__item:nth-child(odd) { transform: rotate(-2deg); }
.core__item:nth-child(even) { transform: rotate(1.8deg); }
.core__item:nth-child(3) { transform: rotate(-.6deg); }
.core__item:hover { transform: rotate(0) translateY(-6px); box-shadow: 9px 12px 0 rgba(23, 19, 14, .85); }

.core__num {
  display: inline-block;
  font-size: 10.5px; font-weight: 600; letter-spacing: .2em;
  color: rgba(30, 26, 21, .72);
  margin-bottom: 8px;
}
.core__word {
  font-family: var(--font-display);
  font-size: clamp(26px, 2.9vw, 38px);
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--red);
  margin-bottom: 10px;
}
.core__word--sm { font-size: clamp(20px, 2.1vw, 27px); }
.core__item p { font-size: 13.5px; color: rgba(30, 26, 21, .75); }

.core__item--red { background: var(--red); }
.core__item--red .core__word { color: var(--card); }
.core__item--red p { color: rgba(255, 253, 246, .88); }
.core__item--red .core__num { color: var(--yolk); }
.core__item--red::before { border-color: rgba(255, 253, 246, .45); }

.core__item--yolk { background: var(--yolk); }
.core__item--yolk .core__word { color: var(--russet); }
.core__item--yolk .core__num { color: var(--russet); }
.core__item--yolk p { color: rgba(30, 26, 21, .82); }

.core__item--ink { background: var(--black); }
.core__item--ink .core__word { color: var(--yolk); }
.core__item--ink p { color: rgba(246, 239, 223, .82); }
.core__item--ink .core__num { color: var(--yolk); }
.core__item--ink::before { border-color: rgba(246, 239, 223, .35); }

.core__smile {
  position: absolute;
  top: clamp(28px, 5vw, 70px); right: clamp(10px, 4vw, 60px);
  width: clamp(52px, 6vw, 84px);
  transform: rotate(11deg);
}

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width: 1024px) {
  .core__list { grid-template-columns: repeat(3, 1fr); }
  .story__cols { grid-template-columns: 1fr 1fr; }
  .story__cols p:last-child { grid-column: 1 / -1; max-width: 620px; }
  .about-hero__note { left: -14%; max-width: 160px; font-size: 16px; }
}

@media (max-width: 880px) {
  .about-hero__wrap { grid-template-columns: 1fr; }
  .about-hero__right {
    order: -1;
    min-height: clamp(280px, 58vw, 400px);
    margin-bottom: 12px;
  }
  .about-hero__cut { width: clamp(190px, 42vw, 290px); right: 6%; }
  .about-hero__umi { width: clamp(84px, 20vw, 120px); bottom: -2%; right: 0; }
  .about-hero__note {
    left: -12%; bottom: 8%;
    max-width: 148px;
    font-size: 15px;
    padding: 7px 10px;
  }
  .story__stamp { display: none; }
  .about-hero__label { font-size: 10px; right: 0; }
  .ph-display { font-size: clamp(58px, 15vw, 104px); }

  .story__cols { grid-template-columns: 1fr; }
  .story__cols p:last-child { max-width: none; }
  .story__space .stores { grid-template-columns: repeat(2, 1fr); }
  .spirit__head { flex-direction: column; align-items: flex-start; }
  .core__list { grid-template-columns: repeat(2, 1fr); }
  .core__smile { display: none; }
  .mission__scrap { padding: 34px 26px; }
  .mission__egg { display: none; }
}

@media (max-width: 540px) {
  .core__list { grid-template-columns: 1fr; }
  .story__space .stores { grid-template-columns: 1fr; }
  .about-hero__actions .btn { width: 100%; }
  .about-hero__umi { width: 76px; }
}