/* ═══════════════════════════════════════════════
   UMIDON — page-tin-tuc.css
   Trang TIN TỨC: pill chuyên mục + lưới card polaroid / scrap giấy
   Nạp sau style.css + pages.css
   ═══════════════════════════════════════════════ */

/* ── PAGE HERO ── */
.news-hero { overflow: hidden; padding-bottom: clamp(30px, 4vw, 54px); }
.news-hero__wrap {
  position: relative;
  display: grid;
  grid-template-columns: 1.04fr .96fr;
  gap: clamp(24px, 4vw, 62px);
  align-items: center;
}
.news-hero .page-hero__desc strong { color: var(--red); }

/* collage bên phải */
.news-hero__collage {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(10px, 1.4vw, 18px);
  align-items: start;
  padding: 24px 4px 30px 0;
}
.news-hero__collage .news-hero__pola {
  transform: rotate(-2.4deg);
  box-shadow: 7px 9px 0 rgba(20, 16, 8, .2);
}
.news-hero__collage .news-hero__pola img { aspect-ratio: 4 / 5; }
.news-hero__collage .news-hero__pola figcaption {
  font-family: var(--font-hand);
  font-size: 15.5px; line-height: 1.25;
  color: rgba(30, 26, 21, .65);
  margin: 9px 2px 0;
}
.news-hero__umi {
  position: relative;
  margin-top: 58px;
  z-index: 3;
  text-align: center;
  background: var(--card);
  border: 3px solid var(--ink);
  box-shadow: 6px 8px 0 rgba(20, 16, 8, .2);
  padding: 12px 12px 10px;
  transform: rotate(3.4deg);
}
.news-hero__umi img { width: 100%; height: auto; }
.news-hero__umi figcaption {
  font-size: 15px; line-height: 1.2;
  color: rgba(30, 26, 21, .66);
  margin-top: 6px;
}
.news-hero__label {
  position: absolute; z-index: 4;
  left: 34%; bottom: -4px;
  background: var(--ink); color: var(--paper);
  font-size: 10px; letter-spacing: .16em; line-height: 1.5;
  text-align: center;
  padding: 8px 14px;
  transform: rotate(-2.5deg);
  box-shadow: 3px 4px 0 rgba(190, 56, 19, .9);
}
.news-hero__dd {
  top: 6%; left: 6px;
  width: 26px; color: var(--red);
}
.news-hero__dd2 {
  top: 34%; right: -10px;
  width: 96px; color: var(--yolk);
  transform: rotate(12deg);
}

/* ── ĐẦU MỤC + PILL CHUYÊN MỤC ── */
.news__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 28px;
  margin-bottom: 26px;
}
.news__head .section__title { margin-bottom: 0; }
.news__hint {
  font-size: 19px;
  color: var(--russet);
  transform: rotate(-2deg);
  white-space: nowrap;
}

.news__cats {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-bottom: clamp(32px, 4vw, 48px);
}
.pill {
  font-size: 11.5px; font-weight: 600; letter-spacing: .1em;
  background: var(--card);
  color: var(--ink);
  border: 2.5px solid var(--ink);
  border-radius: var(--r-hand);
  padding: 10px 18px;
  transform: rotate(-1deg);
  transition: background .18s, color .18s, transform .18s, box-shadow .18s;
}
.pill:nth-child(even) { transform: rotate(1.4deg); }
.pill:hover { background: var(--yolk); transform: rotate(0) scale(1.04); }
.pill.is-active {
  background: var(--red); color: var(--card);
  transform: rotate(0);
  box-shadow: 3px 4px 0 rgba(23, 19, 14, .85);
}

/* ── LƯỚI BÀI VIẾT ── */
.news__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 40px);
  align-items: stretch;
}
.newscard {
  position: relative;
  height: 100%;
  display: flex; flex-direction: column;
  color: var(--ink);
  transition: box-shadow .2s ease;
}
/* tiêu đề 2 dòng → đáy các thẻ trong cùng hàng thẳng nhau */
.newscard h3 { min-height: 2.5em; }
.newscard[hidden] { display: none; }
.newscard:focus-visible { outline: 3px solid var(--red); outline-offset: 5px; }

.newscard--polaroid {
  background: var(--card) url("../assets/img/props/tex-paper.jpg");
  background-size: 430px;
  background-blend-mode: multiply;
  padding: 12px 12px 18px;
  box-shadow: 6px 8px 0 rgba(20, 16, 8, .2);
  transform: rotate(-1.4deg);
}
.newscard--polaroid:hover { box-shadow: 9px 12px 0 rgba(20, 16, 8, .24); }
.newscard--scrap {
  background: url("../assets/img/props/scrap-cream.png") center / 100% 100% no-repeat;
  padding: 26px 24px 32px;
  filter: drop-shadow(5px 7px 0 rgba(20, 16, 8, .14));
  transform: rotate(1.6deg);
}

.newscard img {
  width: 100%; aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 2px solid rgba(23, 19, 14, .12);
  background: var(--paper2);
}
.newscard--scrap img { border: 2.5px solid var(--ink); }

.newscard__tem {
  position: absolute; z-index: 3;
  top: 16px; left: -9px;
  background: var(--yolk); color: var(--ink);
  font-size: 10.5px; font-weight: 600; letter-spacing: .1em;
  padding: 5px 10px;
  transform: rotate(-5deg);
  box-shadow: 2px 3px 0 rgba(0, 0, 0, .32);
}
.newscard__tem--red { background: var(--red); color: var(--card); }

.newscard__body { padding: 15px 3px 0; flex: 1 1 auto; }
.newscard__date {
  font-size: 10.5px; letter-spacing: .14em;
  color: rgba(30, 26, 21, .5);
}
.newscard h3 {
  font-size: 17.5px; line-height: 1.24;
  margin: 6px 0 8px;
}
.newscard__hand { font-size: 16px; line-height: 1.3; color: rgba(30, 26, 21, .66); }

.newscard__soon {
  align-self: flex-start;
  margin: 16px 3px 0;
  font-size: 10px; letter-spacing: .16em;
  color: var(--red);
  border: 2px dashed var(--red);
  padding: 4px 10px;
}

.newscard__veil {
  position: absolute; inset: 0; z-index: 6;
  display: grid; place-items: center;
  text-align: center; padding: 22px;
  background: rgba(190, 56, 19, .92);
  color: var(--paper);
  font-size: 21px; line-height: 1.25;
  opacity: 0;
  transition: opacity .22s ease;
  pointer-events: none;
}
.newscard--scrap .newscard__veil { inset: 12px; border-radius: var(--r-hand); }
.newscard:hover .newscard__veil,
.newscard:focus-visible .newscard__veil { opacity: 1; }

.news__empty {
  text-align: center;
  font-size: 21px;
  color: var(--russet);
  margin-top: 34px;
}
.news__empty[hidden] { display: none; }
.news__note {
  margin-top: clamp(30px, 4vw, 46px);
  text-align: center;
  font-size: 11px; letter-spacing: .1em;
  color: rgba(30, 26, 21, .5);
}

/* ── ĐĂNG KÝ THEO DÕI (section đen) ── */
.news-sub {
  padding-top: clamp(34px, 4.4vw, 62px);
  padding-bottom: clamp(40px, 5vw, 74px);
}
.news-sub__wrap {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
.news-sub__side {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 12px;
  align-items: center;
}
.news-sub__side .news-sub__pola {
  transform: rotate(-2.6deg);
  box-shadow: 7px 9px 0 rgba(20, 16, 8, .45);
}
.news-sub__side .news-sub__pola img { aspect-ratio: 4 / 5; }
.news-sub__side .news-sub__pola figcaption {
  font-family: var(--font-hand);
  font-size: 15.5px; line-height: 1.25;
  color: rgba(30, 26, 21, .65);
  margin: 9px 2px 0;
}
.news-sub__scrap {
  background: url("../assets/img/props/scrap-cream.png") center / 100% 100% no-repeat;
  color: var(--ink);
  font-size: 19px; line-height: 1.15; text-align: center;
  padding: 26px 18px;
  transform: rotate(4deg);
  filter: drop-shadow(4px 5px 0 rgba(0, 0, 0, .35));
}
.news-sub__scrap b {
  display: block;
  font-family: var(--font-display);
  font-size: .72em; letter-spacing: .04em;
  margin-top: 4px;
}
.news-sub__perks {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 22px;
}
.news-sub__perks li {
  font-size: 10.5px; letter-spacing: .12em;
  color: rgba(246, 239, 223, .75);
  border: 2px dashed rgba(246, 239, 223, .35);
  padding: 6px 12px;
}
.news-sub__title {
  font-size: clamp(30px, 4.6vw, 56px);
  line-height: 1.06;
  letter-spacing: -.01em;
  text-transform: uppercase;
  margin: 14px 0 18px;
}
.news-sub__title em { font-style: normal; color: var(--yolk); }
.news-sub__desc {
  max-width: 560px;
  color: rgba(246, 239, 223, .8);
  font-size: 16px;
  margin-bottom: 30px;
}
.news-sub__form label {
  display: block;
  font-size: 11px; letter-spacing: .14em;
  color: var(--yolk);
  margin-bottom: 10px;
}
.news-sub__row { display: flex; flex-wrap: wrap; gap: 14px; max-width: 660px; }
.news-sub__row input {
  flex: 1 1 260px;
  padding: 15px 20px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--paper);
  background: rgba(255, 242, 223, .07);
  border: 3px solid rgba(246, 239, 223, .55);
  border-radius: var(--r-hand);
  transition: border-color .18s, background .18s;
}
.news-sub__row input::placeholder { color: rgba(246, 239, 223, .42); }
.news-sub__row input:focus {
  outline: none;
  border-color: var(--yolk);
  background: rgba(255, 242, 223, .13);
}
.news-sub__msg {
  margin-top: 18px;
  font-size: 19px; line-height: 1.35;
  color: var(--yolk);
  min-height: 1px;
}
.news-sub__msg.is-warn { color: #FFC0AE; }

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

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .news__grid { grid-template-columns: repeat(2, 1fr); }
  .news__head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .news__hint { white-space: normal; }
}

@media (max-width: 880px) {
  .news-hero__wrap { grid-template-columns: 1fr; }
  .news-hero__collage { max-width: 520px; padding-top: 12px; }
  .news-hero__umi { margin-top: 40px; }
  .news-hero__dd, .news-hero__dd2 { display: none; }

  .news-sub__wrap { grid-template-columns: 1fr; }
  .news-sub__side { max-width: 440px; margin-top: 8px; }
}

@media (max-width: 540px) {
  .news__grid { grid-template-columns: 1fr; }
  .newscard h3 { min-height: 0; }
  .newscard--scrap { padding: 22px 20px 28px; }
  .news-hero__label { left: 26%; font-size: 9px; }
  .news-sub__row .btn { width: 100%; }
  .news-sub__scrap { font-size: 16px; padding: 22px 12px; }
}