/* ========== GLOBAL FONT ========== */
/* Body font */
body {
    font-family: 'Poppins', sans-serif;
    color: #333;
    line-height: 1.7;
    background-color: #fff;
}

/* H1 (hero / decor) */
h1.font-decor {
    font-family: 'Great Vibes', cursive;
    color: #b91c1c; /* đỏ Noel */
    font-size: 3rem; /* 48px */
    margin-bottom: 1rem;
}

/* H2 */
h2 {
    font-family: 'Poppins', sans-serif;
    font-size: 1.875rem; /* 30px */
    font-weight: 700;
    color: #dc2626; /* đỏ đậm nổi bật */
    margin-top: 2rem;
    margin-bottom: 1rem;
    border-left: 4px solid #dc2626;
    padding-left: 0.75rem;
    position: relative;
}

/* Thêm icon nhỏ nếu muốn */
h2::before {
    content: "🎄"; 
    position: absolute;
    left: -1.5rem;
}

/* H3 */
h3 {
    font-family: 'Poppins', sans-serif;
    font-size: 1.5rem; /* 24px */
    font-weight: 600;
    color: #b91c1c; /* đỏ nhạt hơn H2 */
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    border-left: 3px solid #f87171; /* đỏ hồng nhẹ */
    padding-left: 0.5rem;
}

/* Paragraph spacing */
p {
    margin-bottom: 1rem;
}

/* Link style */
a {
    color: #dc2626;
    text-decoration: underline;
}
a:hover {
    color: #b91c1c;
}

/* Images responsive */
.postdetail img {
    max-width: 100%;
    height: auto;
    margin: 1rem 0;
}

/* Unordered list */
.postdetail ul {
    list-style: disc inside;
    margin: 1rem 0 1rem 1.5rem;
    padding: 0;
    color: #333;
}

.postdetail ul li {
    position: relative;
    margin-bottom: 0.75rem;
    padding-left: 0.5rem;
    font-size: 1rem;
}

/* Custom bullet: đỏ Noel */
.postdetail ul li::marker {
    color: #b91c1c; /* đỏ đậm Noel */
    font-size: 1.2rem;
}

/* Ordered list */
.postdetail ol {
    list-style: decimal inside;
    margin: 1rem 0 1rem 1.5rem;
    padding: 0;
    color: #333;
}

.postdetail ol li {
    margin-bottom: 0.75rem;
    font-size: 1rem;
}

/* Optional: hover effect cho li */
.postdetail ul li:hover,
.postdetail ol li:hover {
    color: #dc2626;
}

/* ========== COLORS ========== */
:root {
    --christmas-red: #b91c1c;
    --christmas-green: #166534;
    --christmas-gold: #fbbf24;
    --snow-white: #ffffff;
}

/* ========== BUTTONS ========== */
.btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border-radius: 9999px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}
.btn-red {
    background: var(--christmas-red);
    color: var(--snow-white);
}
.btn-red:hover {
    background: #dc2626;
}
.btn-green {
    background: var(--christmas-green);
    color: var(--snow-white);
}
.btn-green:hover {
    background: #15803d;
}
.btn-gold {
    background: var(--christmas-gold);
    color: #000;
}
.btn-gold:hover {
    background: #facc15;
}

/* ========== CARDS ========== */
.card {
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    overflow: hidden;
    transition: transform 0.3s ease;
}
.card:hover {
    transform: translateY(-5px);
}

/* ========== SECTION TITLES ========== */
.section-title {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    text-align: center;
    color: var(--christmas-red);
}

/* ========== HERO SECTION ========== */
.hero {
    background: url('../images/hero-bg.jpg') center/cover no-repeat;
    padding: 6rem 1rem;
    text-align: center;
    color: var(--snow-white);
}
.hero h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
}
.hero p {
    font-size: 1.25rem;
    margin-bottom: 2rem;
}

/* ========== FOOTER ========== */
footer {
    background: var(--christmas-green);
    color: var(--snow-white);
    padding: 2rem 1rem;
    font-size: 0.9rem;
}
footer a {
    color: var(--christmas-gold);
    text-decoration: none;
}
footer a:hover {
    text-decoration: underline;
}

/* Card full height */
.card-blog {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Giới hạn dòng cho title/excerpt */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

/* Ảnh luôn cố định chiều cao */
.card-blog img {
  height: 160px;
  object-fit: cover;
}

.postdetail .content {
  line-height: 1.7;
  font-size: 1rem;
}

.postdetail .content h2, .postdetail .content h3 {
  margin-top: 1.5rem;
  margin-bottom: 0.8rem;
  font-weight: bold;
}

.postdetail .content img {
  max-width: 100%;
  height: auto;
  margin: 1rem 0;
}

.postdetail p {
  margin-bottom: 1rem;
}