/* =========================================================================
   Component: _why-choose-us-spotlight.css
   Chức năng: Hiệu ứng Đèn Pin Toàn Ảnh (Holographic Spotlight)
   ========================================================================= */

.spotlight-trust-section {
    padding: 120px 0;
    background-color: #050505; /* Nền đen sâu */
    font-family: var(--font-primary);
}

.text-gray {
    color: #8892b0;
}

.tracking-widest {
    letter-spacing: 4px;
}

.fs-7 {
    font-size: 0.8rem;
}

/* --- Cấu trúc Lưới Spotlight --- */
.spotlight-grid {
    position: relative;
}

    /* Áp dụng hiệu ứng hover toàn cục cho lưới: 
   Khi trỏ chuột vào lưới, tất cả các thẻ mới bắt đầu tính toán ánh sáng */
    .spotlight-grid:hover > .col-lg-6 > .spotlight-card::before {
        opacity: 1;
    }

/* --- Khối Thẻ Nhám (Spotlight Card) --- */
.spotlight-card {
    background-color: rgba(255, 255, 255, 0.02); /* Xám mờ cực mỏng */
    border-radius: 20px;
    position: relative;
    height: 100%;
    cursor: default;
    /* Dành ra 1px cho đường viền phát sáng */
    padding: 1px;
}

    /* Lớp ánh sáng Spotlight chạy trên ĐƯỜNG VIỀN của thẻ */
    .spotlight-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: inherit;
        opacity: 0; /* Ẩn cho đến khi di chuột vào khối Grid */
        transition: opacity 0.4s ease;
        z-index: 1;
        /* Ánh sáng vàng/đỏ tỏa ra từ tọa độ chuột */
        background: radial-gradient( 600px circle at var(--mouse-x) var(--mouse-y), rgba(255, 193, 7, 0.3), transparent 40% );
    }

/* Lớp lõi chứa nội dung bên trong thẻ */
.spotlight-inner {
    background-color: #111113; /* Đen nhám của lõi thẻ */
    border-radius: 19px; /* Nhỏ hơn viền thẻ 1px để lộ đường viền */
    position: relative;
    height: 100%;
    padding: 40px;
    z-index: 2; /* Nằm trên lớp ánh sáng viền */
    overflow: hidden;
}

    /* Lớp ánh sáng Spotlight chạy BÊN TRONG thẻ */
    .spotlight-inner::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0; /* Ẩn cho đến khi di chuột trực tiếp vào thẻ này */
        transition: opacity 0.4s ease;
        z-index: 1;
        /* Ánh sáng mờ soi rọi lớp lưới chấm bi */
        background: radial-gradient( 800px circle at var(--mouse-x) var(--mouse-y), rgba(255, 255, 255, 0.06), transparent 40% );
    }

.spotlight-card:hover .spotlight-inner::before {
    opacity: 1;
}

/* Tạo lớp lưới chấm bi (Dot pattern) chìm bên trong lõi thẻ */
.spotlight-inner::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 20px 20px;
    z-index: 0;
    pointer-events: none;
}

/* --- Nội dung (Typography) --- */
.trust-number {
    position: absolute;
    top: -15px;
    right: 20px;
    font-size: 8rem;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.03);
    line-height: 1;
    z-index: 2;
    pointer-events: none;
    transition: color 0.5s ease;
}

.spotlight-card:hover .trust-number {
    color: rgba(255, 193, 7, 0.08); /* Số nổi màu vàng nhẹ khi hover */
}

    /* Fix riêng cho thẻ có số 02 màu đỏ */
    .spotlight-card:hover .trust-number.text-brand-red {
        color: rgba(211, 47, 47, 0.08);
    }

.trust-icon {
    font-size: 2.5rem;
    margin-bottom: 25px;
    position: relative;
    z-index: 3;
}

.trust-title {
    color: white;
    font-size: 1.4rem;
    font-weight: 800;
    margin-bottom: 15px;
    position: relative;
    z-index: 3;
}

.trust-desc {
    color: #8892b0;
    line-height: 1.7;
    margin-bottom: 0;
    position: relative;
    z-index: 3;
}