/* Khối riêng của trang chủ */

/* Nền ảnh đặt ở section để tràn hết chiều ngang màn hình, không bị bó trong khung 1240px của .shell.
   Thứ tự lớp từ trên xuống: hai vầng sáng trang trí, màn phủ tối, ảnh, cuối cùng là màu nền.

   Cỡ ảnh dùng "auto 100%" chứ KHÔNG dùng cover: ảnh 1239x848 cao hơn section nhiều, cover sẽ phóng
   theo bề ngang màn hình rồi cắt mất hơn nửa chiều cao — nhìn như bị zoom sát vào màn laptop.
   "auto 100%" cho ảnh vừa đúng chiều cao section, không cắt tí nào, và thu nhỏ lại khi section thấp.

   Ảnh căn GIỮA section theo cả hai chiều, nên khi màn rộng hơn ảnh thì hai bên đều hở nền base.
   Vì vậy màn phủ phải đối xứng: đậm ở hai mép để hòa mép ảnh vào nền (dùng đúng màu của --bg-base
   qua --bg-base-rgb nên chuyển tiếp không lộ đường viền, và tự đổi theo chế độ sáng/tối), nhạt dần
   vào giữa cho thấy ảnh. Riêng nửa trái vẫn giữ đậm hơn nửa phải vì tiêu đề nằm ở cột trái, cần
   nền tương phản để chữ dễ đọc.

   Thiếu file ảnh thì trình duyệt chỉ bỏ qua lớp url (404), các lớp còn lại vẫn vẽ nên không vỡ. */
.hero {
    position: relative;
    padding: 72px 0 48px;
    background:
        radial-gradient(900px 420px at 15% 0%, rgb(var(--accent-rgb) / .16), transparent 65%),
        radial-gradient(700px 380px at 85% 10%, rgba(35, 120, 190, .14), transparent 60%),
        linear-gradient(90deg, rgb(var(--bg-base-rgb) / .96) 0%, rgb(var(--bg-base-rgb) / .88) 28%, rgb(var(--bg-base-rgb) / .5) 55%, rgb(var(--bg-base-rgb) / .72) 82%, rgb(var(--bg-base-rgb) / .96) 100%),
        url("/img/hero-bg.jpg") center center / auto 100% no-repeat,
        var(--bg-base);
    overflow: hidden;
}

/* CHỈ .shell đầu tiên (khối chữ + ảnh minh họa) mới chia 2 cột.
   Hero có hai .shell: cái thứ hai chứa dải chỉ số và phải chiếm trọn chiều ngang. Nếu đặt grid
   cho ".hero .shell" chung thì dải chỉ số bị coi là ô đầu của lưới 1.05fr và co còn nửa trang. */
.hero > .shell:first-child {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 3rem;
    align-items: center;
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .3rem .75rem;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    font-size: .78rem;
    color: var(--text-muted);
    margin-bottom: 1.4rem;
}

.hero h1 {
    font-size: 3rem;
    margin-bottom: 1.1rem;
}

.hero-lead {
    color: var(--text-muted);
    font-size: 1.02rem;
    max-width: 34rem;
    margin-bottom: 1.8rem;
}

.hero-actions {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
}

/* Tấm kính chứa danh sách điểm nổi bật. Nền để bán trong suốt để ảnh nền của section
   xuyên qua được — nếu tô đặc thì nó che mất laptop trong ảnh.
   width:fit-content để khối co đúng bằng dòng chữ dài nhất thay vì kéo hết bề rộng cột
   (max-width:100% giữ nó không tràn khi chữ dài hơn cột), margin-left:auto đẩy sát lề phải. */
.hero-visual {
    position: relative;
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    border: 1px solid var(--border-strong);
    border-radius: 16px;
    background: rgb(var(--bg-elevated-rgb) / .55);
    backdrop-filter: blur(6px);
    padding: 1.35rem 1.5rem;
    box-shadow: var(--shadow-lift);
}

.hero-highlights {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .55rem;
}

.hero-highlights li {
    display: flex;
    align-items: center;
    gap: .55rem;
    color: var(--text);
    font-size: .92rem;
}

.hero-highlights svg { color: var(--accent); flex: 0 0 auto; }

/* Dải chỉ số */

.stat-bar {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    margin-top: 2.5rem;
}

.stat {
    background: var(--bg-surface);
    padding: 1.1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: .75rem;
}

.stat svg { color: var(--accent); flex: 0 0 auto; }

.stat-value {
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.1;
}

.stat-label {
    font-size: .78rem;
    color: var(--text-muted);
}

/* Lưới công cụ */

.tool-card {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.tool-card .icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--accent-soft);
    border: 1px solid rgb(var(--accent-rgb) / .25);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    margin-bottom: .35rem;
}

.tool-card h3 {
    font-size: 1rem;
    margin: 0;
}

.tool-card p {
    color: var(--text-muted);
    font-size: .85rem;
    margin: 0;
    flex: 1;
}

/* Vì sao chọn */

.feature-card {
    text-align: center;
    padding: 1.5rem 1.1rem;
}

.feature-card .icon {
    width: 44px;
    height: 44px;
    margin: 0 auto .8rem;
    border-radius: 50%;
    background: var(--accent-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
}

.feature-card h3 { font-size: .95rem; }

.feature-card p {
    color: var(--text-muted);
    font-size: .82rem;
    margin: 0;
}

/* Video demo */

.video-card {
    padding: 0;
    overflow: hidden;
}

.video-thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    background:
        repeating-linear-gradient(115deg, rgb(var(--accent-rgb) / .10) 0 2px, transparent 2px 22px),
        repeating-linear-gradient(65deg, rgba(80, 160, 220, .10) 0 2px, transparent 2px 26px),
        linear-gradient(150deg, var(--bg-surface-2), var(--bg-base));
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-thumb .play {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgb(var(--bg-base-rgb) / .75);
    border: 1px solid var(--border-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text);
}

.video-card .caption {
    padding: .8rem 1rem;
    font-size: .88rem;
}

/* Khối kêu gọi tải xuống */

.download-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding: 1.5rem;
    border-radius: var(--radius);
    border: 1px solid rgb(var(--accent-rgb) / .3);
    background: linear-gradient(120deg, rgb(var(--accent-rgb) / .10), rgb(var(--accent-rgb) / 0) 60%), var(--bg-surface);
}

@media (max-width: 980px) {
    .hero > .shell:first-child { grid-template-columns: 1fr; }
    .stat-bar { grid-template-columns: repeat(2, 1fr); }
    /* Đã về 1 cột thì không còn cột phải để căn lề phải — trả khối về trọn chiều ngang. */
    .hero-visual { width: auto; max-width: none; margin-left: 0; }
    /* Về 1 cột thì chữ chiếm trọn bề ngang: màn phủ phải chuyển sang chiều DỌC, phủ ngang sẽ để
       lọt vùng sáng phía phải ngay dưới chữ. Ảnh lúc này dùng cover cho kín khung — dù bị cắt
       nhưng đã tối đi nhiều nên chỉ còn vai trò vân nền. */
    .hero {
        background:
            linear-gradient(180deg, rgb(var(--bg-base-rgb) / .93) 0%, rgb(var(--bg-base-rgb) / .84) 55%, rgb(var(--bg-base-rgb) / .74) 100%),
            url("/img/hero-bg.jpg") center 42% / cover no-repeat,
            var(--bg-base);
    }
}

@media (max-width: 760px) {
    .hero h1 { font-size: 2.1rem; }
    .stat-bar { grid-template-columns: 1fr; }
}