/* ══════════════════════════════════════════════════════════════════
   TÌM HIỂU VNETRUST — /tim-hieu-vnetrust (Views/Landing/TimHieuVneTrust)
   ------------------------------------------------------------------
   Giao diện viết bằng utility Tailwind ngay trong markup. File này chỉ giữ:
     1) token phạm vi trang (font Inter của bản thiết kế, màu thanh footer),
     2) vá cascade của theme vne-v3 — luật ngoài @layer luôn thắng utility,
     3) bốn primitive lặp nhiều chỗ, đặt TRONG @layer components để utility
        ở chỗ gọi vẫn ghi đè được (primitive ngoài layer sẽ nuốt utility).
   ══════════════════════════════════════════════════════════════════ */

/* Header dính cao 84px: bấm mục nav thì tiêu đề section không bị header che. */
html { scroll-behavior: smooth; scroll-padding-top: 110px; }

body.thv-page {
    /* Đổi ở token nên menu người dùng, popup "Bắt đầu", footer dùng chung cũng chạy Inter như bản thiết kế. */
    --font-display: "Inter", Arial, sans-serif;
    --font-body: "Inter", Arial, sans-serif;
    /* Thanh footer cố định (_FooterTailwind, bg-brand-900) lấy đúng màu của bản thiết kế. */
    --brand-900: #172e3b;
}

/* base.css khai `.vne-v3 a { color: inherit; text-decoration: none }` NGOÀI @layer nên mọi utility
   màu chữ / gạch chân đặt trên thẻ <a> đều mất tác dụng. revert-layer trả quyền quyết định về lớp utilities. */
body.thv-page a { color: revert-layer; text-decoration: revert-layer; }

/* Cùng lý do: `.vne-v3 img { max-width: 100% }` khoá ảnh thiết bị trong bìa video, mà thiết kế cho ảnh tràn 112%. */
body.thv-page img.thv-img-overflow { max-width: none; }

@media (max-width: 760px) {
    html { scroll-padding-top: 85px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

@layer components {
    /* Khung nội dung 1200px, lề hai bên 48px → 32px → 20px theo bề ngang màn hình. */
    .thv-wrap { width: calc(100% - 96px); max-width: 1200px; margin-inline: auto; }

    @media (max-width: 960px) {
        .thv-wrap { width: calc(100% - 64px); }
    }

    @media (max-width: 760px) {
        .thv-wrap { width: calc(100% - 40px); }
    }

    /* Icon nét lấy từ _Sprite.cshtml; cỡ riêng từng chỗ đặt bằng utility size-[…]. */
    .thv-icon {
        width: 22px;
        height: 22px;
        flex-shrink: 0;
        vertical-align: middle;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    /* Nút chữ nhật 54px của bản thiết kế — mặc định nền navy; nút cam/nhạt đổi màu bằng utility. */
    .thv-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 16px;
        min-height: 54px;
        padding: 13px 25px;
        border: 1px solid #294657;
        border-radius: 7px;
        background: #294657;
        color: #fff;
        font-size: 16px;
        font-weight: 600;
        line-height: 1.4;
        cursor: pointer;
        transition: background-color .18s, border-color .18s, box-shadow .18s, transform .18s;
    }

    .thv-btn:hover { background: #1e3544; box-shadow: 0 5px 14px #2946571c; transform: translateY(-2px); }
    .thv-btn .thv-icon { width: 20px; height: 20px; }

    /* Liên kết chữ gạch chân màu đồng ("Tìm hiểu Trust Verified™", "Đến Trung tâm trợ giúp"…). */
    .thv-text-link {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding-bottom: 5px;
        border-bottom: 1px solid #bd7548;
        color: #294657;
        font-size: 14px;
        font-weight: 700;
    }

    .thv-text-link:hover { color: #e87500; }
}