/* doc-bao.css — Đọc Báo AI (danh sách bài báo tiếng Trung)
   Dùng --msd-* tokens từ matcha-soft-3d.css làm nền tảng.
   Không load layout.css — page standalone + iframe dashboard. */

/* ── CSS variables cục bộ — định nghĩa 1 lần, dùng var() toàn file ── */
:root {
  /* HSK badge — dark mode */
  --db-hsk12-clr:    #81c784;
  --db-hsk12-bg:     rgba(76, 175, 80, 0.15);
  --db-hsk12-bd:     rgba(76, 175, 80, 0.30);
  --db-hsk34-clr:    #64b5f6;
  --db-hsk34-bg:     rgba(33, 150, 243, 0.15);
  --db-hsk34-bd:     rgba(33, 150, 243, 0.30);
  --db-hsk56-clr:    #ffb74d;
  --db-hsk56-bg:     rgba(255, 152, 0, 0.15);
  --db-hsk56-bd:     rgba(255, 152, 0, 0.30);
  --db-hsk7p-clr:    #ef9a9a;
  --db-hsk7p-bg:     rgba(229, 57, 53, 0.15);
  --db-hsk7p-bd:     rgba(229, 57, 53, 0.30);
  /* Button text trắng trên nền màu */
  --db-btn-text:     #ffffff;
}

/* ── Reset cơ bản (không load base.css/layout.css) ── */
*, *::before, *::after { box-sizing: border-box; }

/* ── Page base ── */
html, body {
  /* 6% matcha tint → dark: ~#141b16 (warm greenish), light: cream-greenish */
  background: color-mix(in srgb, var(--msd-matcha-500) 6%, var(--msd-bg));
  color: var(--msd-text);
  min-height: 100vh;
  font-family: 'Inter', sans-serif;
  margin: 0;
}

/* ── Hero ── */
.db-hero {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--msd-matcha-500) 20%, var(--msd-ink-deep)),
    var(--msd-ink-deep) 70%
  );
  border-bottom: 1px solid var(--msd-border);
  padding: 36px 20px 28px;
  text-align: center;
}
.db-hero__icon {
  font-size: 2.4rem;
  display: block;
  margin-bottom: 8px;
}
.db-hero__title {
  font-size: clamp(1.4rem, 4vw, 2rem);
  font-weight: 700;
  color: var(--msd-paper-primary);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.db-hero__sub {
  font-size: 0.95rem;
  color: var(--msd-paper-secondary);
  margin: 0 auto;
  max-width: 500px;
  line-height: 1.5;
}

/* ── Filters ── */
.db-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 18px 20px 14px;
  justify-content: center;
  max-width: 800px;
  margin-inline: auto;
}
.db-filter-btn {
  padding: 8px 18px;
  min-height: 38px;  /* touch target tối thiểu mobile */
  border-radius: var(--msd-radius-full);
  border: 1px solid var(--msd-border);
  background: var(--msd-surface);
  color: var(--msd-text-soft);
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--msd-dur-fast) var(--msd-ease),
              color var(--msd-dur-fast) var(--msd-ease),
              border-color var(--msd-dur-fast) var(--msd-ease);
}
.db-filter-btn:hover {
  background: var(--msd-surface-2);
  border-color: var(--msd-matcha-500);
  color: var(--msd-text);
}
.db-filter-btn.active {
  background: var(--msd-matcha-500);
  border-color: var(--msd-matcha-500);
  color: var(--db-btn-text);
  font-weight: 600;
}

/* ── Grid ── */
.db-grid-wrap {
  max-width: 1100px;
  margin-inline: auto;
  padding: 8px 20px 0;
}
.db-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  min-height: 200px;
}
@media (max-width: 900px) { .db-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .db-grid { grid-template-columns: 1fr; } }

/* ── Article card ── */
.db-card {
  background: var(--msd-surface);
  border: 1px solid var(--msd-border);
  border-radius: var(--msd-radius-lg);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: var(--msd-shadow-soft);
  transition: transform var(--msd-dur-base) var(--msd-ease),
              box-shadow var(--msd-dur-base) var(--msd-ease),
              border-color var(--msd-dur-base) var(--msd-ease);
}
.db-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--msd-shadow-md);
  border-color: color-mix(in srgb, var(--msd-matcha-500) 40%, transparent);
}

/* HSK badge */
.db-card__hsk {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--msd-radius-full);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  align-self: flex-start;
}
.db-card__hsk.hsk12 { background: var(--db-hsk12-bg); color: var(--db-hsk12-clr); border: 1px solid var(--db-hsk12-bd); }
.db-card__hsk.hsk34 { background: var(--db-hsk34-bg); color: var(--db-hsk34-clr); border: 1px solid var(--db-hsk34-bd); }
.db-card__hsk.hsk56 { background: var(--db-hsk56-bg); color: var(--db-hsk56-clr); border: 1px solid var(--db-hsk56-bd); }
.db-card__hsk.hsk7p { background: var(--db-hsk7p-bg); color: var(--db-hsk7p-clr); border: 1px solid var(--db-hsk7p-bd); }

/* Titles */
.db-card__title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--msd-paper-primary);
  margin: 0;
  line-height: 1.4;
  font-family: 'Noto Serif SC', serif;
}
.db-card__title-vi {
  font-size: 0.88rem;
  color: var(--msd-paper-secondary);
  margin: 0;
  line-height: 1.4;
}

/* Meta row */
.db-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.82rem;
  color: var(--msd-paper-muted);
}
.db-card__source {
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.db-card__date {
  font-size: 0.78rem;
  color: var(--msd-paper-dim);
}

/* Read button — ghost style, phù hợp dark mode */
.db-card__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: auto;
  padding: 11px 16px;
  min-height: 44px;  /* iOS/Android minimum touch target */
  background: color-mix(in srgb, var(--msd-matcha-500) 10%, transparent);
  color: var(--msd-matcha-500);
  border: 1px solid color-mix(in srgb, var(--msd-matcha-500) 35%, transparent);
  text-decoration: none;
  border-radius: var(--msd-radius-md);
  font-size: 0.88rem;
  font-weight: 600;
  text-align: center;
  transition: background var(--msd-dur-fast) var(--msd-ease),
              border-color var(--msd-dur-fast) var(--msd-ease),
              transform var(--msd-dur-fast) var(--msd-ease);
}
.db-card__btn:hover {
  background: color-mix(in srgb, var(--msd-matcha-500) 18%, transparent);
  border-color: color-mix(in srgb, var(--msd-matcha-500) 60%, transparent);
  transform: translateY(-1px);
}

/* ── Loading state ── */
.db-loading {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 48px 0;
  font-size: 0.95rem;
  color: var(--msd-paper-muted);
}
.db-spin {
  width: 22px;
  height: 22px;
  border: 2px solid var(--msd-border);
  border-top-color: var(--msd-matcha-500);
  border-radius: 50%;
  animation: db-spin 0.7s linear infinite;
  flex-shrink: 0;
}
@keyframes db-spin { to { transform: rotate(360deg); } }

/* ── Empty state ── */
.db-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 56px 20px;
  color: var(--msd-paper-muted);
  text-align: center;
}
.db-empty__icon { font-size: 2.8rem; }
.db-empty p { margin: 0; font-size: 0.95rem; }

/* ── Pagination ── */
.db-pagination {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 24px 20px 32px;
  max-width: 1100px;
  margin-inline: auto;
}
.db-page-btn {
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border-radius: var(--msd-radius-md);
  border: 1px solid var(--msd-border);
  background: var(--msd-surface);
  color: var(--msd-text-soft);
  font-size: 0.9rem;
  cursor: pointer;
  transition: background var(--msd-dur-fast) var(--msd-ease),
              color var(--msd-dur-fast) var(--msd-ease);
}
.db-page-btn:hover { background: var(--msd-surface-2); color: var(--msd-text); }
.db-page-btn.active {
  background: var(--msd-matcha-500);
  border-color: var(--msd-matcha-500);
  color: var(--db-btn-text);
  font-weight: 700;
}

/* ── Login wall ── */
.db-login-wall {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 48px 20px;
  text-align: center;
  max-width: 480px;
  margin: 40px auto;
  background: var(--msd-surface);
  border: 1px solid var(--msd-border);
  border-radius: var(--msd-radius-xl);
  box-shadow: var(--msd-shadow-soft);
}
.db-login-wall[hidden] { display: none; }
.db-login-wall__icon { font-size: 2.8rem; }
.db-login-wall__title {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--msd-paper-primary);
  margin: 0;
}
.db-login-wall__sub {
  font-size: 0.9rem;
  color: var(--msd-paper-secondary);
  margin: 0;
  line-height: 1.5;
}
.db-login-wall__btn {
  display: inline-block;
  padding: 10px 28px;
  background: var(--msd-matcha-500);
  color: var(--db-btn-text);
  border: none;
  border-radius: var(--msd-radius-md);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--msd-dur-fast) var(--msd-ease);
}
.db-login-wall__btn:hover { background: var(--msd-matcha-700); }

/* ── Light mode overrides ── */
html[data-theme="light"] {
  /* Surface + border */
  --msd-bg:        #f5f3ee;
  --msd-surface:   #ffffff;
  --msd-surface-2: #f0ede7;
  --msd-border:    #ddd9d0;
  /* Semantic aliases dùng trong CSS generic */
  --msd-text:      #2c2419;
  --msd-text-soft: #5c5043;
  --msd-text-mute: #8a7d6b;
  /* Paper tokens — matcha-soft-3d chỉ định nghĩa dark values trong :root
     PHẢI override toàn bộ vì doc-bao.css dùng trực tiếp --msd-paper-* */
  --msd-paper-primary:   #1a1209;   /* dark warm brown — thay #f0e4cc cream */
  --msd-paper-secondary: #4a3d2e;   /* medium brown — thay #cfc2a3 tan */
  --msd-paper-muted:     #7d6e57;   /* muted brown — thay #9b8e76 */
  --msd-paper-dim:       #a09180;   /* dim — thay #6b5f4d */
  /* Shadows nhẹ hơn trên nền sáng */
  --msd-shadow-soft: 0 2px 0 rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.10);
  --msd-shadow-md:   0 4px 0 rgba(0,0,0,0.10), 0 8px 18px rgba(0,0,0,0.12);
  /* HSK badge — darker text for contrast on light backgrounds */
  --db-hsk12-clr: #2e7d32;
  --db-hsk34-clr: #1565c0;
  --db-hsk56-clr: #e65100;
  --db-hsk7p-clr: #c62828;
  /* Hero gradient light */
  --db-hero-lt-start: #e8f0df;   /* xanh matcha nhạt, chỉ dùng light mode hero */
}
html[data-theme="light"] .db-hero {
  background: linear-gradient(135deg, var(--db-hero-lt-start), var(--msd-bg) 70%);
  border-bottom-color: var(--msd-border);
}

/* ══════════════════════════════════════════════════════════════════
   DETAIL PAGE — doc-bao-detail.html
   ════════════════════════════════════════════════════════════════== */

.db-detail-wrap {
  max-width: 820px;
  margin-inline: auto;
  padding: 0 20px 56px;
}

/* Back button row */
.db-back-row {
  padding: 16px 0 4px;
}
.db-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 1px solid var(--msd-border);
  color: var(--msd-text-soft);
  border-radius: var(--msd-radius-full);
  padding: 6px 14px;
  font-size: 0.87rem;
  cursor: pointer;
  transition: border-color var(--msd-dur-fast) var(--msd-ease),
              color var(--msd-dur-fast) var(--msd-ease);
}
.db-back-btn:hover {
  border-color: var(--msd-matcha-500);
  color: var(--msd-matcha-500);
}

/* Detail hero — tiêu đề + meta */
.db-detail-hero {
  padding: 20px 0 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.db-detail-title {
  font-family: 'Noto Serif SC', serif;
  font-size: clamp(1.25rem, 3.5vw, 1.75rem);
  font-weight: 700;
  color: var(--msd-paper-primary);
  margin: 0;
  line-height: 1.45;
}
.db-detail-subtitle {
  font-size: 0.97rem;
  color: var(--msd-paper-secondary);
  margin: 0;
  line-height: 1.5;
}
.db-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.83rem;
  color: var(--msd-paper-muted);
  padding-top: 2px;
}

/* YouTube embed — 16:9 responsive */
.db-video-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--msd-radius-lg);
  overflow: hidden;
  margin: 8px 0 28px;
  background: #000;
  box-shadow: var(--msd-shadow-md);
}
.db-video-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* Article body — Chinese serif, generous line-height */
.db-article-body {
  font-size: 1.08rem;
  line-height: 2.1;
  color: var(--msd-paper-primary);
  padding: 0 0 28px;
  font-family: 'Noto Serif SC', 'Inter', serif;
  word-break: break-word;
}

/* Vocab word — dotted underline + HSK color */
.db-vocab-word {
  cursor: pointer;
  border-radius: 2px;
  padding: 0 1px;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
  transition: background var(--msd-dur-fast) var(--msd-ease);
}
.db-vocab-word.hsk12 { color: var(--db-hsk12-clr); text-decoration-color: var(--db-hsk12-clr); }
.db-vocab-word.hsk34 { color: var(--db-hsk34-clr); text-decoration-color: var(--db-hsk34-clr); }
.db-vocab-word.hsk56 { color: var(--db-hsk56-clr); text-decoration-color: var(--db-hsk56-clr); }
.db-vocab-word.hsk7p { color: var(--db-hsk7p-clr); text-decoration-color: var(--db-hsk7p-clr); }
.db-vocab-word:hover,
.db-vocab-word:focus-visible {
  background: rgba(255,255,255,0.09);
  outline: none;
  border-radius: 3px;
}
html[data-theme="light"] .db-vocab-word:hover,
html[data-theme="light"] .db-vocab-word:focus-visible { background: rgba(0,0,0,0.07); }

/* Word popup (position:fixed — nằm ngoài wrap) */
.db-word-popup {
  position: fixed;
  z-index: 9999;
  width: 230px;
  background: var(--msd-surface);
  border: 1px solid var(--msd-border);
  border-radius: var(--msd-radius-lg);
  box-shadow: var(--msd-shadow-md);
  padding: 14px 16px;
  animation: db-popup-in 0.12s var(--msd-ease);
}
.db-word-popup[hidden] { display: none; }
@keyframes db-popup-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.db-popup-hanzi {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.5rem;
  font-family: 'Noto Serif SC', serif;
  font-weight: 700;
  color: var(--msd-paper-primary);
  margin-bottom: 5px;
}
.db-popup-py {
  font-size: 0.9rem;
  color: var(--msd-matcha-500);
  margin-bottom: 5px;
  font-weight: 500;
}
.db-popup-vi {
  font-size: 0.88rem;
  color: var(--msd-paper-secondary);
  margin-bottom: 12px;
  line-height: 1.45;
}
.db-popup-actions { display: flex; gap: 6px; }
.db-popup-dict-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 11px;
  border-radius: var(--msd-radius-md);
  border: 1px solid var(--msd-border);
  background: var(--msd-surface-2);
  color: var(--msd-text-soft);
  font-size: 0.79rem;
  cursor: pointer;
  transition: border-color var(--msd-dur-fast) var(--msd-ease),
              color var(--msd-dur-fast) var(--msd-ease);
}
.db-popup-dict-btn:hover {
  border-color: var(--msd-matcha-500);
  color: var(--msd-matcha-500);
}

/* Vocabulary panel */
.db-vocab-panel {
  background: var(--msd-surface);
  border: 1px solid var(--msd-border);
  border-radius: var(--msd-radius-lg);
  margin-bottom: 24px;
  overflow: hidden;
}
.db-vocab-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--msd-paper-primary);
  user-select: none;
  transition: background var(--msd-dur-fast) var(--msd-ease);
}
.db-vocab-panel__header:hover { background: var(--msd-surface-2); }
.db-vocab-panel__arrow {
  font-size: 1rem;
  transition: transform var(--msd-dur-base) var(--msd-ease);
}
.db-vocab-panel.open .db-vocab-panel__arrow { transform: rotate(180deg); }
.db-vocab-panel__body {
  display: none;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 8px;
  padding: 12px 16px 16px;
  border-top: 1px solid var(--msd-border);
}
.db-vocab-panel.open .db-vocab-panel__body { display: grid; }

.db-vocab-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  background: var(--msd-surface-2);
  border-radius: var(--msd-radius-md);
  min-width: 0;
}
.db-vocab-item__hanzi {
  font-size: 1.05rem;
  font-weight: 700;
  font-family: 'Noto Serif SC', serif;
  flex-shrink: 0;
}
.db-vocab-item__hanzi.hsk12 { color: var(--db-hsk12-clr); }
.db-vocab-item__hanzi.hsk34 { color: var(--db-hsk34-clr); }
.db-vocab-item__hanzi.hsk56 { color: var(--db-hsk56-clr); }
.db-vocab-item__hanzi.hsk7p { color: var(--db-hsk7p-clr); }
.db-vocab-item__py  { font-size: 0.78rem; color: var(--msd-matcha-500); flex-shrink: 0; }
.db-vocab-item__vi  { font-size: 0.78rem; color: var(--msd-paper-secondary); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-vocab-item__hsk {
  font-size: 0.63rem; font-weight: 600;
  padding: 2px 6px; border-radius: var(--msd-radius-full); flex-shrink: 0;
}
.db-vocab-item__hsk.hsk12 { background: var(--db-hsk12-bg); color: var(--db-hsk12-clr); border: 1px solid var(--db-hsk12-bd); }
.db-vocab-item__hsk.hsk34 { background: var(--db-hsk34-bg); color: var(--db-hsk34-clr); border: 1px solid var(--db-hsk34-bd); }
.db-vocab-item__hsk.hsk56 { background: var(--db-hsk56-bg); color: var(--db-hsk56-clr); border: 1px solid var(--db-hsk56-bd); }
.db-vocab-item__hsk.hsk7p { background: var(--db-hsk7p-bg); color: var(--db-hsk7p-clr); border: 1px solid var(--db-hsk7p-bd); }

/* Detail footer — source attribution */
.db-detail-footer {
  font-size: 0.84rem;
  color: var(--msd-paper-muted);
  border-top: 1px solid var(--msd-border);
  padding-top: 16px;
  line-height: 1.6;
}
.db-detail-footer a {
  color: var(--msd-matcha-500);
  text-decoration: none;
}
.db-detail-footer a:hover { text-decoration: underline; }

/* Mobile */
@media (max-width: 580px) {
  .db-detail-wrap { padding: 0 14px 48px; }
  .db-article-body { font-size: 1rem; line-height: 1.95; }
  .db-vocab-panel__body { grid-template-columns: 1fr; }
  .db-word-popup { width: calc(100vw - 32px); max-width: 280px; }
}

/* ── Cover image — trang chi tiết ─────────────────────────── */
.db-cover-img {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  border-radius: var(--msd-radius-lg);
  display: block;
  margin-bottom: 20px;
}

/* ── Cover thumbnail — card danh sách ─────────────────────── */
.db-card-cover {
  /* negative margin để ảnh chạm đến cạnh card (card padding = 18px) */
  width: calc(100% + 36px);
  height: 160px;
  object-fit: cover;
  display: block;
  border-radius: var(--msd-radius-lg) var(--msd-radius-lg) 0 0;
  margin: -18px -18px 14px -18px;
}