/* Bản tin sáng — ảnh bản tin hằng ngày. Chỉ dùng biến trong tokens.css */

.mn-meta { display: flex; flex-direction: column; gap: var(--s2); align-items: flex-start; }
@media (min-width: 640px) { .mn-meta { align-items: flex-end; } }

/* Điều hướng ngày: bản trước / chọn ngày / bản sau */
.mn-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.mn-nav .btn svg { width: 16px; height: 16px; }
.mn-select { width: auto; min-width: 150px; min-height: 36px; padding-top: 6px; padding-bottom: 6px; font-size: 14px; }
@media (max-width: 639px) {
  .mn-meta { width: 100%; }
  .mn-nav { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mn-select { grid-column: 1 / -1; grid-row: 1; width: 100%; min-width: 0; min-height: 44px; }
}

.mn-stale { margin: 0 0 var(--s4); font-size: 13px; color: var(--text-2); }

/* Tab Thế giới / Trong nước: chỉ dùng trên màn hình hẹp */
.mn-grid { display: grid; gap: 0 var(--s6); }
.mn-grid > * { min-width: 0; }
.mn-part .section-head { margin-top: var(--s4); }
@media (max-width: 1023px) { .mn-part.is-off { display: none; } }
@media (min-width: 1024px) {
  .mn-tabs { display: none; }
  .mn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .mn-part .section-head { margin-top: 0; }
}

/* Thẻ ảnh: ảnh giữ màu gốc, đặt trên .card ở cả hai giao diện */
.mn-shot { padding: var(--s2); }
@media (min-width: 640px) { .mn-shot { padding: var(--s2); } }
.mn-shot-link { display: block; border-radius: var(--r-sm); overflow: hidden; background: var(--surface-soft); }
.mn-shot img { width: 100%; height: auto; }
.mn-shot-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2); padding: var(--s2) var(--s2) var(--s1); font-size: 13px; color: var(--text-2); }
.mn-shot-foot .btn svg { width: 16px; height: 16px; }

/* Đăng ký */
.mn-subscribe { display: flex; flex-direction: column; gap: var(--s4); border-top: 3px solid var(--gold); }
.mn-sub-title { font-size: 18px; font-weight: 700; line-height: 1.4; color: var(--ink); margin-bottom: var(--s1); }
.mn-subscribe .btn { align-self: stretch; }
@media (min-width: 640px) {
  .mn-subscribe { flex-direction: row; align-items: center; justify-content: space-between; padding: var(--s6); }
  .mn-subscribe .btn { align-self: auto; flex-shrink: 0; }
}