/* Minification failed. Returning unminified contents.
(7,28): run-time error CSS1039: Token not allowed after unary operator: '-web-white'
(25,25): run-time error CSS1039: Token not allowed after unary operator: '-web-hero-title-max'
(31,17): run-time error CSS1039: Token not allowed after unary operator: '-web-primary'
(48,17): run-time error CSS1039: Token not allowed after unary operator: '-web-yellow'
(69,17): run-time error CSS1039: Token not allowed after unary operator: '-web-gray-600'
(75,65): run-time error CSS1039: Token not allowed after unary operator: '-rv-d'
(79,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(89,28): run-time error CSS1039: Token not allowed after unary operator: '-web-white'
(105,21): run-time error CSS1039: Token not allowed after unary operator: '-web-contact-content'
(110,15): run-time error CSS1039: Token not allowed after unary operator: '-web-space-12'
(116,15): run-time error CSS1039: Token not allowed after unary operator: '-web-space-3'
(117,25): run-time error CSS1039: Token not allowed after unary operator: '-web-space-6'
(121,21): run-time error CSS1039: Token not allowed after unary operator: '-web-section-title'
(122,23): run-time error CSS1039: Token not allowed after unary operator: '-web-section-title-lh'
(128,21): run-time error CSS1039: Token not allowed after unary operator: '-web-text-md'
(129,23): run-time error CSS1039: Token not allowed after unary operator: '-web-text-md-lh'
(130,17): run-time error CSS1039: Token not allowed after unary operator: '-web-gray-600'
(136,15): run-time error CSS1039: Token not allowed after unary operator: '-web-space-4'
(142,15): run-time error CSS1039: Token not allowed after unary operator: '-web-space-2'
(146,21): run-time error CSS1039: Token not allowed after unary operator: '-web-text-lg'
(147,23): run-time error CSS1039: Token not allowed after unary operator: '-web-text-lg-lh'
(149,17): run-time error CSS1039: Token not allowed after unary operator: '-web-gray-700'
(160,15): run-time error CSS1039: Token not allowed after unary operator: '-web-space-4'
(166,15): run-time error CSS1039: Token not allowed after unary operator: '-web-space-4'
(167,19): run-time error CSS1039: Token not allowed after unary operator: '-web-space-4'
(186,15): run-time error CSS1039: Token not allowed after unary operator: '-web-space-3'
(193,15): run-time error CSS1039: Token not allowed after unary operator: '-web-space-2'
(196,29): run-time error CSS1030: Expected identifier, found '.'
(196,44): run-time error CSS1031: Expected selector, found ')'
(196,44): run-time error CSS1025: Expected comma or open brace, found ')'
(204,17): run-time error CSS1039: Token not allowed after unary operator: '-web-gray-600'
(205,35): run-time error CSS1039: Token not allowed after unary operator: '-web-gray-600'
(213,21): run-time error CSS1039: Token not allowed after unary operator: '-web-text-lg'
(214,23): run-time error CSS1039: Token not allowed after unary operator: '-web-text-lg-lh'
(218,17): run-time error CSS1039: Token not allowed after unary operator: '-web-primary'
(239,22): run-time error CSS1039: Token not allowed after unary operator: '-web-gray-100'
(250,24): run-time error CSS1039: Token not allowed after unary operator: '-web-space-8'
(259,19): run-time error CSS1039: Token not allowed after unary operator: '-web-space-8'
(265,15): run-time error CSS1039: Token not allowed after unary operator: '-web-space-8'
(270,15): run-time error CSS1039: Token not allowed after unary operator: '-web-space-8'
(280,15): run-time error CSS1039: Token not allowed after unary operator: '-web-space-2'
(289,19): run-time error CSS1039: Token not allowed after unary operator: '-web-space-2'
(302,21): run-time error CSS1039: Token not allowed after unary operator: '-web-primary-900'
(307,18): run-time error CSS1039: Token not allowed after unary operator: '-web-gray-50'
(308,32): run-time error CSS1039: Token not allowed after unary operator: '-web-gray-200'
(309,29): run-time error CSS1039: Token not allowed after unary operator: '-web-radius-sm'
(330,21): run-time error CSS1039: Token not allowed after unary operator: '-web-primary'
(332,32): run-time error CSS1039: Token not allowed after unary operator: '-web-gray-200'
(333,29): run-time error CSS1039: Token not allowed after unary operator: '-web-radius-sm'
(340,25): run-time error CSS1039: Token not allowed after unary operator: '-web-radius-sm'
(341,21): run-time error CSS1039: Token not allowed after unary operator: '-web-text-lg'
(342,23): run-time error CSS1039: Token not allowed after unary operator: '-web-text-lg-lh'
(343,16): run-time error CSS1039: Token not allowed after unary operator: '-btn-row-zoom'
(368,29): run-time error CSS1039: Token not allowed after unary operator: '-web-space-4'
(372,19): run-time error CSS1039: Token not allowed after unary operator: '-web-space-2'
(393,19): run-time error CSS1039: Token not allowed after unary operator: '-web-space-4'
(415,19): run-time error CSS1039: Token not allowed after unary operator: '-web-space-6'
(420,19): run-time error CSS1039: Token not allowed after unary operator: '-web-space-6'
 */

.lh-hero {
    min-height: 573px;
    display: flex;
    align-items: center;
    padding: 56px 0;
    background-color: var(--web-white);
    background-image: linear-gradient(rgba(255, 255, 255, .55), rgba(255, 255, 255, .55)), url(../../../Public/vietasoft/assets/images/backgrounds/lien-he-hero-bg.jpg);
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
}

.lh-hero-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
}

.lh-hero-title {
    display: flex;
    flex-direction: column;
    font-size: min(var(--web-hero-title-max), clamp(32px, 5.6vw, 54px));
    line-height: 1.296;
    font-weight: 800;
}

.lh-hero-title-l1 {
    color: var(--web-primary);
}

/* 🔺 B83 — DÒNG 2 ĐỔI TỪ GRADIENT XANH SANG VÀNG, và đây là đổi có TRẢ GIÁ A11Y,
      phải biết trước khi sửa tiếp.
      B59 cố ý cho dòng 2 màu xanh: lúc đó trang KHÔNG có Figma nên "không có gì
      buộc phải bám", và chọn xanh để khỏi mở thêm một nợ a11y. Nay node có thật và
      cho đúng gradient vàng của Đối tác/Khách hàng.
      ⚠ HỆ QUẢ: dải vàng này ~1,5:1 trên nền sáng -> KHÔNG ĐẠT AA, y hệt 3 hero kia.
      Project nay có HAI chỗ non-AA cố ý thay vì một — ghi chú nội bộ của Designer đã cập nhật.
      Bản port nên dùng `--web-yellow-800` #A18705 (3,52:1) cho cả bốn.
      📌 Điểm giữa #FFDF40, KHÔNG phải #FFE14A của Home/Sản phẩm/Giới thiệu — đúng
      số của node này, trùng số node Đối tác.
      🔺 B112 — thêm LỚP TRÊN là vệt sáng (mục 1b cho nó lướt 1 lần lúc vào trang,
      keyframes `web-glint` ở components.css mục 11). Lúc NGHỈ lớp đó nằm ngoài mép trái
      -> 0 pixel nào đổi so với gradient Figma, kể cả khi giảm chuyển động. */
.lh-hero-title-l2 {
    color: var(--web-yellow);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .lh-hero-title-l2 {
        background-image: linear-gradient(100deg, transparent 44%, rgba(255, 255, 255, .7) 50%, transparent 56%), linear-gradient(90deg, #FFD400 0%, #FFDF40 33.654%, #FFD400 100%);
        background-size: 250% 100%, 100% 100%;
        background-position: 100% 0, 0 0;
        background-repeat: no-repeat;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
    }
}

.lh-hero-lead {
    max-width: 821px;
    font-size: clamp(18px, 2.5vw, 24px);
    line-height: 1.333;
    font-weight: 400;
    color: var(--web-gray-600);
}

@media (prefers-reduced-motion: no-preference) {
    .lh-hero-title-l1,
    .lh-hero-lead {
        animation: web-in .8s cubic-bezier(.22, 1, .36, 1) var(--rv-d, 0ms) both;
    }

    .lh-hero-lead {
        --rv-d: 200ms;
    }

    .lh-hero-title-l2 {
        animation: web-in .8s cubic-bezier(.22, 1, .36, 1) 100ms both, web-glint 1.2s ease-in-out 1.1s both;
    }
}


.lh-info {
    background-color: var(--web-white);
    background-image: radial-gradient(62% 42% at 100% 0%, #FFFBF3 0%, rgba(255, 251, 243, 0) 100%), radial-gradient(46% 34% at 14% 0%, #FAF9FE 0%, rgba(250, 249, 254, 0) 100%), radial-gradient(36% 52% at 100% 92%, #F2F7FE 0%, #F2F7FE 30%, rgba(242, 247, 254, 0) 100%);
}

/* 🔴 KHE NGANG NỘI SUY BẰNG `clamp()`, KHÔNG PHẢI BẬC THANG THEO MỐC — và đây là
      bản SỬA MỘT LỖI ĐO ĐƯỢC ở B83, không phải chuộng cú pháp.
      Bản đầu để `94px` rồi override xuống 32 ở mốc 1200. Đo 10 viewport thì lưới
      thẻ trong cột trái ra: 2·2·2·2·2·**1**·2·2·2·1 — tức 1200 CHỈ CÓ 1 CỘT trong
      khi 1024 lại có 2. Đúng bệnh "màn rộng hơn mà ít cột hơn" của ghi chú nội bộ của Designer, và đúng biến thể mà mục đó cảnh báo: nguyên nhân là KHE NHẢY BẬC 94 -> 32
      ngay tại mốc, làm cột trái ĐỘT NGỘT RỘNG RA khi màn hẹp đi.
      Mục 3.7 chỉ định rõ cách chữa: nội suy tuyến tính bằng `clamp()`, KHÔNG phải
      thêm một mốc override nữa.
        nội suy: 32px tại vw 1100  ->  94px tại vw 1440
        công thức 18.235vw − 168.6px (dốc 62/340)
      Đo lại sau khi sửa: 2 cột ở MỌI viewport trên 375. */
.lh-connect-grid {
    max-width: var(--web-contact-content);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 760fr) minmax(0, 530fr);
    align-items: start;
    gap: var(--web-space-12) clamp(32px, calc(18.235vw - 168.6px), 94px);
}

.lh-col-head {
    display: flex;
    flex-direction: column;
    gap: var(--web-space-3);
    margin-bottom: var(--web-space-6);
}

.lh-col-title {
    font-size: var(--web-section-title);
    line-height: var(--web-section-title-lh);
    font-weight: 600;
    letter-spacing: -.72px;
}

.lh-col-desc {
    font-size: var(--web-text-md);
    line-height: var(--web-text-md-lh);
    color: var(--web-gray-600);
}

.lh-groups {
    display: flex;
    flex-direction: column;
    gap: var(--web-space-4);
}

.lh-group {
    display: flex;
    flex-direction: column;
    gap: var(--web-space-2);
}

.lh-group-label {
    font-size: var(--web-text-lg);
    line-height: var(--web-text-lg-lh);
    font-weight: 600;
    color: var(--web-gray-700);
}

.lh-group-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(256px, 100%), 1fr));
    gap: 12px;
    align-items: start;
}

.lh-group--map .lh-group-grid {
    gap: var(--web-space-4);
}

.lh-info .lh-card {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--web-space-4);
    padding: var(--web-space-4);
    margin: 0;
    border-radius: 24px;
}

@media (hover: hover) and (pointer: fine) and (min-width: 1025px) {
    .lh-info .lh-card:hover {
        transform: none;
        box-shadow: none;
    }
}

.lh-info .contact-icon {
    flex-shrink: 0;
}

.lh-card-body {
    display: flex;
    flex-direction: column;
    gap: var(--web-space-3);
    min-width: 0;
}

.lh-card-values {
    display: flex;
    flex-direction: column;
    gap: var(--web-space-2);
}

.lh-info .contact-value:has(.lh-value-owner) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.lh-info .lh-value-owner {
    font-weight: 400;
    color: var(--web-gray-600);
    -webkit-text-fill-color: var(--web-gray-600);
}

.lh-info .contact-text {
    gap: 4px;
}

.lh-info .contact-title {
    font-size: var(--web-text-lg);
    line-height: var(--web-text-lg-lh);
}

.lh-info .contact-value {
    color: var(--web-primary);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .lh-info .contact-value {
        background-image: linear-gradient(92.67deg, var(--web-primary-900) 0.62%, var(--web-primary) 112.33%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
    }
}

.lh-office {
    display: flex;
    flex-direction: column;
}

.lh-map-frame {
    aspect-ratio: 380 / 200;
    overflow: hidden;
    background: var(--web-gray-100);
}

    .lh-map-frame iframe {
        display: block;
        width: 100%;
        height: 100%;
        border: 0;
    }

.lh-form-card {
    padding: 38px var(--web-space-8);
    background: rgba(255, 255, 255, .5);
    backdrop-filter: blur(5.25px);
    -webkit-backdrop-filter: blur(5.25px);
    border-radius: 20px;
    box-shadow: 0 .555px 1.625px rgba(0, 0, 0, .2);
}

    .lh-form-card .web-form {
        gap: var(--web-space-8);
    }

.lh-form-fields {
    display: flex;
    flex-direction: column;
    gap: var(--web-space-8);
}

.lh-form-card .web-form-row {
    flex-direction: column;
    gap: var(--web-space-8);
}

    .lh-form-card .web-form-row > .web-field {
        flex: 0 0 auto;
    }

.lh-captcha {
    display: flex;
    flex-direction: column;
    gap: var(--web-space-2);
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}
    /* CAPTCHA nội bộ: mã ký tự méo + nền nhiễu + gạch đè (HTML/CSS/JS thuần). */
    .lh-captcha .captcha-box {
        display: flex;
        align-items: stretch;
        gap: var(--web-space-2);
    }
    .lh-captcha .captcha-code {
        flex: 1 1 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        min-height: 58px;
        padding: 10px 12px;
        font-size: 28px;
        font-weight: 800;
        letter-spacing: 6px;
        color: var(--web-primary-900, #05174E);
        user-select: none;
        background:
            repeating-linear-gradient(115deg, rgba(44, 71, 158, .10) 0 2px, transparent 2px 9px),
            repeating-linear-gradient(25deg, rgba(44, 71, 158, .08) 0 2px, transparent 2px 11px),
            var(--web-gray-50, #F9FAFB);
        border: 1px solid var(--web-gray-200, #EAECF0);
        border-radius: var(--web-radius-sm, 8px);
        position: relative;
        overflow: hidden;
    }
    .lh-captcha .captcha-code::after {
        content: "";
        position: absolute;
        left: -10%;
        right: -10%;
        top: 50%;
        height: 2px;
        background: rgba(162, 135, 5, .55);
        transform: rotate(-4deg);
        pointer-events: none;
    }
    .lh-captcha .captcha-code span { display: inline-block; }
    .lh-captcha .captcha-refresh {
        flex: 0 0 52px;
        display: grid;
        place-items: center;
        font-size: 20px;
        color: var(--web-primary, #2C479E);
        background: #fff;
        border: 1px solid var(--web-gray-200, #EAECF0);
        border-radius: var(--web-radius-sm, 8px);
        cursor: pointer;
    }

.lh-form-card .lh-form-submit {
    width: 100%;
    padding: 14px 24px;
    border-radius: var(--web-radius-sm);
    font-size: var(--web-text-lg);
    line-height: var(--web-text-lg-lh);
    zoom: var(--btn-row-zoom);
}

/* CTA header "Đăng ký tư vấn" trỏ tới #contact: neo cách mép top đúng 100px
   (trừ hao header cố định). Trình duyệt tự áp khi nhảy anchor.
   Animation khi scroll tới dùng convention sẵn có web-rv/is-in
   (keyframes web-in trong components.css), class do JS tự thêm. */
#contact {
    scroll-margin-top: 100px;
}

    .lh-form-card .lh-form-submit:disabled {
        opacity: .55;
        cursor: not-allowed;
    }

@media (hover: hover) and (pointer: fine) and (min-width: 1025px) {
    .lh-form-card .lh-form-submit:disabled:hover {
        transform: none;
        box-shadow: none;
    }
}

@media (min-width: 1025px) and (max-width: 1560px) {
    .lh-col-head {
        margin-bottom: var(--web-space-4);
    }

    .lh-groups {
        gap: var(--web-space-2);
    }

    .lh-map-frame {
        aspect-ratio: 380 / 200;
    }

    .lh-form-card {
        padding: 28px;
    }

        .lh-form-card .web-form {
            gap: 20px;
        }

    .lh-form-fields {
        gap: 20px;
    }

    .lh-form-card .web-form-row {
        flex-direction: row;
        gap: var(--web-space-4);
    }

        .lh-form-card .web-form-row > .web-field {
            flex: 1 1 0;
        }

    .lh-form-card .web-textarea {
        min-height: 96px;
        height: 96px;
    }
}


@media (max-width: 1024px) {
    .lh-connect-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .lh-form-fields {
        gap: var(--web-space-6);
    }

    .lh-form-card .web-form-row {
        flex-direction: row;
        gap: var(--web-space-6);
    }

        .lh-form-card .web-form-row > .web-field {
            flex: 1 1 0;
            min-width: 0;
        }
}

@media (max-width: 768px) {
    .lh-form-card {
        padding: 20px;
    }

    .lh-hero {
        min-height: 420px;
    }
}