:root{
  --bg:#ffffff; --text:#0f172a; --muted:#64748b; --line:rgba(2,6,23,.12);
  --nav:#0b0b0b; --gold:#caa86a; --ink:#0b1320; --radius:22px;
}

/* Page head */
.page-head{padding:22px 0 6px;border-bottom:1px solid var(--line);margin-bottom:12px}
.page-head h1{margin:0 0 4px;font-size:clamp(22px,2.4vw,32px)}
.page-head .muted{margin:0;color:var(--muted)}

/* Grid */
.news-grid{display:grid;gap:22px;margin:22px 0 10px;margin-bottom: 40px; grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:820px){.news-grid{grid-template-columns:1fr}}

/* Card */
.news-card{
  background:#fff;border:1px solid rgba(2,6,23,.06);border-radius:var(--radius);overflow:hidden;
  box-shadow:0 10px 26px rgba(2,6,23,.08);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.news-card:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(2,6,23,.12);border-color:rgba(2,6,23,.10)}
.news-card .card-link{display:block;color:inherit;text-decoration:none}

/* Thumbnail */
.thumb{position:relative;height:260px;overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:820px){.thumb{height:220px}}

.date-badge{
  position:absolute;left:16px;top:16px;background:rgba(255,255,255,.96);color:var(--ink);
  border-radius:12px;padding:6px 10px;font-weight:700;font-size:.9rem;box-shadow:0 4px 12px rgba(2,6,23,.12)
}
.category{
  position:absolute;right:16px;top:16px;background:linear-gradient(180deg,#f1e2be,#caa86a);
  color:#0a1a26;border-radius:999px;padding:6px 12px;font-weight:700;font-size:.85rem;box-shadow:0 4px 12px rgba(2,6,23,.12)
}

/* Body */
.card-body{padding:16px 16px 18px}
.title{margin:2px 0 8px;line-height:1.35;font-size:clamp(18px,2vw,22px)}
.excerpt{margin:0 0 12px;color:#334155}
.meta{display:flex;align-items:center;gap:8px;color:#6b7280;font-size:.95rem}
.meta .dot{opacity:.6}

/* Reveal */
.reveal{opacity:0;transform:translateY(10px)}
.revealed{opacity:1;transform:none;transition:opacity .65s ease, transform .65s ease}

/* ===== iPad (768–1024px) ===== */
@media (min-width: 768px) and (max-width: 1024px) {
  .news-grid {
    grid-template-columns: repeat(2, 1fr); /* iPad 2 คอลัมน์ */
  }
}

/* ===== Mobile (<768px) ===== */
@media (max-width: 767px) {
  .news-grid {
    grid-template-columns: 1fr; /* Mobile 1 คอลัมน์ */
  }
}

#backToTop {
  position: fixed;
  bottom: 40px;
  right: 40px;
  display: none;
  background: #3f3f3f;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 45px;
  height: 45px;
  font-size: 22px;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  transition: background 0.3s;
  z-index: 999;
}
#backToTop:hover {
  background: #555;
}