.page-khuyen-mai { background-color: #0D0E12; color: #FFF3E6; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }

/* Hero Section */
.page-khuyen-mai__hero-section { padding-top: 10px; padding-bottom: 30px; }
.page-khuyen-mai__hero-image-wrapper { width: 100%; max-width: 1020px; margin: 0 auto; }
.page-khuyen-mai__hero-image { width: 100%; aspect-ratio: 17 / 5; object-fit: cover; display: block; border-radius: 12px; }
.page-khuyen-mai__hero-content { max-width: 1020px; margin: 20px auto 0; text-align: center; }
.page-khuyen-mai__hero-title { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 800; line-height: 1.2; letter-spacing: -0.5px; color: #FF8C1A; max-width: 800px; margin: 0 auto 12px; }
.page-khuyen-mai__hero-description { font-size: 1rem; line-height: 1.6; color: #FFF3E6; max-width: 720px; margin: 0 auto 24px; opacity: 0.9; }
.page-khuyen-mai__btn-cta { display: inline-block; padding: 14px 32px; background: linear-gradient(180deg, #FFA53A 0%, #D96800 100%); color: #17191F; font-weight: 700; font-size: 1rem; text-decoration: none; border-radius: 999px; border: 1px solid #A84F0C; box-shadow: 0 4px 20px rgba(255, 176, 77, 0.3); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.page-khuyen-mai__btn-cta:hover { transform: translateY(-2px); box-shadow: 0 6px 25px rgba(255, 176, 77, 0.5); }

/* Promo Grid */
.page-khuyen-mai__promo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1200px; margin: 0 auto 48px; padding: 0 16px; }
.page-khuyen-mai__promo-card { background-color: #17191F; border: 1px solid #A84F0C; border-radius: 16px; padding: 20px; display: flex; flex-direction: column; align-items: center; text-align: center; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.page-khuyen-mai__promo-card:hover { transform: translateY(-5px); box-shadow: 0 8px 30px rgba(255, 176, 77, 0.2); }
.page-khuyen-mai__promo-image { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; border-radius: 12px; margin-bottom: 16px; }
.page-khuyen-mai__promo-title { font-size: 1.4rem; font-weight: 700; color: #FF8C1A; margin: 0 0 12px; }
.page-khuyen-mai__promo-desc { font-size: 0.95rem; line-height: 1.5; color: #FFF3E6; opacity: 0.85; margin: 0 0 20px; }
.page-khuyen-mai__promo-link { display: inline-block; padding: 10px 24px; background: linear-gradient(180deg, #FFA53A 0%, #D96800 100%); color: #17191F; font-weight: 700; font-size: 0.9rem; text-decoration: none; border-radius: 999px; border: 1px solid #A84F0C; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.page-khuyen-mai__promo-link:hover { transform: translateY(-2px); box-shadow: 0 4px 15px rgba(255, 176, 77, 0.4); }

/* Blog Section */
.page-khuyen-mai__blog-section { max-width: 1200px; margin: 0 auto 48px; padding: 0 16px; }
.page-khuyen-mai__blog-title { text-align: center; color: #FF8C1A; font-size: 2rem; font-weight: 800; margin: 0 0 12px; }
.page-khuyen-mai__blog-intro { text-align: center; color: #FFF3E6; opacity: 0.9; max-width: 750px; margin: 0 auto 30px; line-height: 1.6; }
.page-khuyen-mai__blog-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.page-khuyen-mai__blog-card { background-color: #17191F; border-radius: 12px; border: 1px solid #A84F0C; overflow: hidden; display: flex; flex-direction: column; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.page-khuyen-mai__blog-card:hover { transform: translateY(-5px); box-shadow: 0 8px 30px rgba(255, 176, 77, 0.2); }
.page-khuyen-mai__blog-image { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; }
.page-khuyen-mai__blog-post-title { font-size: 1.1rem; font-weight: 700; padding: 16px 16px 0; margin: 0; }
.page-khuyen-mai__blog-post-title a { color: #FF8C1A; text-decoration: none; }
.page-khuyen-mai__blog-post-title a:hover { text-decoration: underline; }
.page-khuyen-mai__blog-post-desc { font-size: 0.9rem; color: #FFF3E6; opacity: 0.85; line-height: 1.5; padding: 8px 16px 16px; margin: 0; }
.page-khuyen-mai__blog-archive { text-align: center; margin-top: 40px; }
.page-khuyen-mai__blog-view-all { display: inline-block; padding: 12px 32px; background: linear-gradient(180deg, #FFA53A 0%, #D96800 100%); color: #17191F; font-weight: 700; text-decoration: none; border-radius: 999px; border: 1px solid #A84F0C; box-shadow: 0 4px 20px rgba(255, 176, 77, 0.3); transition: transform 0.2s ease; }
.page-khuyen-mai__blog-view-all:hover { transform: translateY(-2px); }

@media (max-width: 1024px) {
  .page-khuyen-mai__promo-grid { grid-template-columns: repeat(2, 1fr); }
  .page-khuyen-mai__blog-list { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .page-khuyen-mai { overflow-x: hidden; }
  .page-khuyen-mai__hero-section { padding-top: 10px; padding-bottom: 20px; }
  .page-khuyen-mai__hero-image { aspect-ratio: 2 / 1; max-width: 100%; height: auto; }
  .page-khuyen-mai__hero-title { font-size: clamp(1.5rem, 5vw, 2rem); line-height: 1.3; }
  .page-khuyen-mai__btn-cta { max-width: 100%; box-sizing: border-box; white-space: normal; word-wrap: break-word; }
  .page-khuyen-mai__promo-grid { grid-template-columns: 1fr; gap: 20px; }
  .page-khuyen-mai__promo-card { max-width: 100%; }
  .page-khuyen-mai__promo-image { max-width: 100%; height: auto; }
  .page-khuyen-mai__promo-link { max-width: 100%; box-sizing: border-box; white-space: normal; word-wrap: break-word; }
  .page-khuyen-mai__blog-list { grid-template-columns: 1fr; gap: 20px; }
  .page-khuyen-mai__blog-image { max-width: 100%; height: auto; }
  .page-khuyen-mai__blog-view-all { max-width: 100%; box-sizing: border-box; white-space: normal; word-wrap: break-word; }
  .page-khuyen-mai img { max-width: 100% !important; height: auto !important; }
}