/* Trang chủ V2 (Views/V2/Home/IndexContent.cshtml) - bổ sung cho style.css của template, dùng biến màu của template để chạy đúng chế độ tối */

.home-min0 { min-width: 0; }
.home-anchor { scroll-margin-top: 96px; }

/* Hero: chú thích dưới khung minh họa */
.home-showcase-note { margin-top: 12px; text-align: center; font-family: var(--font-mono); font-size: .6875rem; color: var(--text-muted); }

/* Ghi chú dưới sơ đồ 3 tầng */
.home-note { margin-top: 40px; display: flex; align-items: center; justify-content: center; gap: 8px; text-align: center; font-family: var(--font-mono); font-size: .875rem; color: var(--text-light-sub); }
.home-note svg { color: var(--cz-blue-primary); flex-shrink: 0; }

.home-center-action { text-align: center; margin-top: 48px; }

/* Link chữ có mũi tên */
.home-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--cz-blue-primary); }
.home-link:hover { color: var(--cz-blue-hover); }
.home-inline-link { font-weight: 600; color: var(--cz-blue-primary); }
.home-inline-link:hover { text-decoration: underline; }

/* 4 lợi ích: 4 cột trên màn rộng */
.features-grid.home-benefits { grid-template-columns: repeat(4, 1fr); gap: 24px; }

/* Ai nên dùng */
.home-audience-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.home-audience-card .feature-title { margin-bottom: 0; }
.home-audience-head { display: flex; align-items: center; gap: 16px; }
.home-audience-head .feature-icon-square { flex-shrink: 0; }
.home-audience-dl { margin: 20px 0 24px; flex-grow: 1; }
.home-audience-dl dt { font-family: var(--font-mono); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.home-audience-dl dd { margin: 4px 0 16px; line-height: 1.65; color: var(--text-body); }
.home-audience-dl dt.home-audience-get { color: var(--cz-blue-primary); }
.home-audience-dl dd.home-audience-get { margin-bottom: 0; color: var(--text-heading); }

/* Hành trình: ảnh màn hình thật dưới các bước */

/* Ví dụ ước tính lợi nhuận */

/* Bài viết mới (CMS) */
.home-news-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }
.home-news-head .eyebrow { margin-bottom: 0; }
.home-news-nav { display: flex; align-items: center; gap: 10px; }
.home-news-nav .home-link { margin-left: 8px; }
.home-news-btn { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--bg-card-border); background: var(--bg-card); color: var(--cz-blue-primary); box-shadow: var(--shadow-sm); cursor: pointer; transition: all var(--transition-normal); }
.home-news-btn:hover:not(:disabled) { background: var(--cz-blue-primary); border-color: var(--cz-blue-primary); color: #fff; }
.home-news-btn:disabled { opacity: .4; cursor: default; }
/* Slide tin: 3 thẻ/khung trên desktop, 2 trên tablet, mobile hiện 1 thẻ và ló một phần thẻ sau để gợi ý vuốt */
.home-news-slider { --news-gap: 28px; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * var(--news-gap)) / 3); gap: var(--news-gap); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain; scrollbar-width: none; padding: 8px 2px 14px; margin: -8px -2px -14px; }
.home-news-slider::-webkit-scrollbar { display: none; }
.home-news-slider:focus-visible { outline: 2px solid var(--cz-blue-primary); outline-offset: 4px; border-radius: var(--radius-lg); }
.home-news-slider .home-news-card { scroll-snap-align: start; }
.home-news-card { display: flex; flex-direction: column; overflow: hidden; background: var(--bg-card); border: 1px solid var(--bg-card-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transition: all var(--transition-normal); }
.home-news-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--bg-card-hover-border); }
.home-news-thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: linear-gradient(135deg, var(--cz-blue-primary), var(--cz-blue-dark)); }
.home-news-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); }
.home-news-card:hover .home-news-thumb img { transform: scale(1.05); }
.home-news-placeholder { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255, 255, 255, .85); }
.home-news-body { display: flex; flex-direction: column; flex-grow: 1; padding: 20px 22px 22px; }
.home-news-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: .75rem; color: var(--text-muted); }
.home-news-cat { font-family: var(--font-mono); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--cz-blue-primary); }
.home-news-title { margin-top: 10px; font-size: 1.0625rem; font-weight: 700; line-height: 1.45; color: var(--text-heading); }
.home-news-title a:hover { color: var(--cz-blue-primary); }
.home-news-excerpt { margin-top: 8px; font-size: .875rem; line-height: 1.6; color: var(--text-body); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Lời mời cuối trang */
.home-cta { text-align: center; max-width: 800px; }
.home-cta-title { font-size: 2.5rem; line-height: 1.25; color: var(--text-heading); margin-bottom: 20px; }
.home-cta-desc { font-size: 1.125rem; line-height: 1.7; color: var(--text-light-sub); margin-bottom: 36px; }
.home-cta-actions { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
.home-cta-sub { margin-top: 20px; font-size: .875rem; color: var(--text-muted); }

@media (max-width: 1100px) {
  .features-grid.home-benefits { grid-template-columns: repeat(2, 1fr); }
  .home-news-slider { grid-auto-columns: calc((100% - var(--news-gap)) / 2); }
}

@media (max-width: 768px) {
  .home-audience-grid { grid-template-columns: 1fr; }
  /* Mỗi lần một thẻ trọn khung (không lộ góc thẻ sau), chuyển bài bằng nút trước/sau hoặc vuốt ngang */
  .home-news-slider { --news-gap: 16px; grid-auto-columns: 100%; }
  .home-news-head { margin-bottom: 20px; }
  .home-news-btn { width: 36px; height: 36px; }
  .home-news-nav { gap: 8px; }
  .home-news-nav .home-link { margin-left: 4px; }
  .home-cta-title { font-size: 1.875rem; }
  .compare-box { padding: 32px 22px; }
}

@media (max-width: 640px) {
  .features-grid.home-benefits { grid-template-columns: 1fr; }
  .home-cta-actions .btn { width: 100%; justify-content: center; }
  .compare-popular-tag { right: 20px; }
}