/* =============================================================================
   SMO CARD — COMPONENT LIBRARY  ·  hướng "Trao tay"
   -----------------------------------------------------------------------------
   Dùng cho _LayoutMarketing (Trang chủ · Giới thiệu · Liên hệ).
   Phụ thuộc: tokens.css (nạp trước).

   QUY ƯỚC ĐẶT TÊN: BEM — .block  .block__element  .block--modifier
   Không trộn với utility-first. Không selector nào sâu quá 2 cấp, không !important.
   Mọi giá trị thị giác đến từ biến trong tokens.css.
   ========================================================================== */

/* =============================================================================
   A. TIỆN ÍCH NỀN
   ========================================================================== */

/* Chỉ đọc được bằng trình đọc màn hình. */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Link "Bỏ qua đến nội dung chính": ẩn cho tới khi nhận focus bằng bàn phím. */
.skip-link {
    position: absolute;
    top: var(--s-2);
    left: var(--s-2);
    z-index: var(--z-modal);
    padding: var(--s-3) var(--s-5);
    background: var(--c-ink);
    color: var(--c-text-onink);
    border-radius: var(--r-sm);
    font-weight: 600;
    text-decoration: none;
    transform: translateY(-200%);
}
.skip-link:focus-visible {
    transform: translateY(0);
    color: var(--c-text-onink);
}

.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* =============================================================================
   B. MỤC (SECTION) — nhịp dọc của cả trang
   ========================================================================== */
.section {
    position: relative;
    padding-block: var(--section-y);
    background: var(--c-smoke);
}
.section--lg { padding-block: var(--section-y-lg); }
.section--paper { background: var(--c-paper); }
.section--ink {
    background: var(--c-ink);
    color: var(--c-text-onink);
}
.section--ink h1,
.section--ink h2,
.section--ink h3 { color: var(--c-text-onink); }
/* :not(.btn) la bat buoc — khong co no, quy tac nay de len mau chu cua
   .btn--primary trong man toi, cho ra chu ho phach tren nen cham: 3,54:1,
   truot WCAG AA. Lighthouse bat dung loi nay. */
.section--ink a:not(.btn) { color: var(--c-amber-bright); }

.section__head {
    max-width: var(--measure);
    margin-bottom: var(--s-12);
}
.section__head > * + * { margin-top: var(--s-4); }

.lede {
    font-size: var(--fs-body-lg);
    color: var(--c-text-muted);
    max-width: var(--measure);
}
.section--ink .lede { color: var(--c-text-onink-mute); }

/* =============================================================================
   C. ĐƯỜNG TRAO (SEAM) — yếu tố ký tên của cả trang
   -----------------------------------------------------------------------------
   Một đường dọc mảnh đặt ở 58% chiều ngang KHUNG NỘI DUNG (không phải 58% màn
   hình). Nó vẽ ở cấp .section chứ không phải cấp lưới, để chạy liên tục qua
   phần padding giữa các mục — nếu vẽ ở cấp lưới thì mỗi mục sẽ có một đoạn
   riêng và người xem thấy đường bị đứt quãng.

   Dưới 900px, đường dọc biến mất và vai trò của nó chuyển sang đường ngang
   giữa hai khối (xem .seam > * + * bên dưới). Trục vẫn còn, chỉ đổi phương.
   ========================================================================== */
@media (min-width: 900px) {
    .section--seam::before {
        content: '';
        position: absolute;
        inset-block: 0;
        width: 1px;
        /* Vi tri = mep trai KHUNG NOI DUNG + 58% be rong khung noi dung.
           --cw-out la be rong ngoai cua .container (da tinh max-width);
           khung noi dung hep hon no dung 2 lan gutter.
           Ban truoc lay 58% cua khung NGOAI nen o 1920px duong trao lech
           6px khoi ranh gioi hai cot — do duoc 58,57% thay vi 58,00%. */
        --cw-out: min(var(--container), 100%);
        left: calc(
            50% - var(--cw-out) / 2
            + var(--gutter)
            + (var(--cw-out) - 2 * var(--gutter)) * 0.58
        );
        background: currentColor;
        opacity: .14;
        z-index: var(--z-seam);
        pointer-events: none;
    }

    .seam {
        display: grid;
        grid-template-columns: 58% 42%;
        align-items: start;
    }
    /* Không dùng column-gap: nó đẩy ranh giới hai cột lệch khỏi đúng 58%,
       khiến đường trao không còn nằm giữa hai cột. Dùng padding thay thế. */
    .seam > :first-child { padding-right: var(--s-12); }
    .seam > :last-child  { padding-left:  var(--s-12); }

    /* Can giua theo chieu doc. Dung o hero de may nguoi nhan nam ngang tam
       tam the ben trai — neo bang mot khoang lech co dinh se vo ngay khi
       tieu de xuong dong khac di o mot co man hinh khac. */
    .seam--center { align-items: center; }
}

@media (max-width: 899.98px) {
    .seam > * + * {
        margin-top: var(--s-10);
        padding-top: var(--s-10);
        border-top: var(--bd-hair);
    }
    .section--ink .seam > * + * { border-top-color: rgba(233, 235, 230, .18); }
}

/* Nhãn hai phía của đường trao. */
.seam__side {
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--c-text-muted);
    margin-bottom: var(--s-6);
}
.seam__side--recipient { color: var(--c-amber); }

/* =============================================================================
   D. NÚT
   ========================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    min-height: 48px;             /* > 44px vùng chạm tối thiểu */
    padding: var(--s-3) var(--s-6);
    border-radius: var(--r-md);
    font-family: var(--ff-body);
    font-size: var(--fs-body);
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--dur-1) var(--ease-out),
                border-color var(--dur-1) var(--ease-out),
                color var(--dur-1) var(--ease-out),
                transform var(--dur-1) var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn[disabled],
.btn[aria-disabled='true'] {
    opacity: .45;
    cursor: not-allowed;
    pointer-events: none;
}

.btn--primary {
    background: var(--c-indigo);
    color: #fff;
}
.btn--primary:hover { background: var(--c-indigo-deep); color: #fff; }

.btn--ghost {
    background: transparent;
    color: var(--c-text);
    box-shadow: inset 0 0 0 1.5px var(--c-ink);
}
.btn--ghost:hover { background: rgba(16, 23, 40, .06); color: var(--c-text); }
.section--ink .btn--ghost {
    color: var(--c-text-onink);
    box-shadow: inset 0 0 0 1.5px rgba(233, 235, 230, .5);
}
.section--ink .btn--ghost:hover { background: rgba(233, 235, 230, .10); }

/* Nút chữ có mũi tên — mũi tên trượt 2px khi rê chuột. */
.btn--link {
    min-height: 44px;
    padding-inline: 0;
    color: var(--c-indigo);
    background: none;
}
.btn--link .btn__arrow { transition: transform var(--dur-1) var(--ease-out); }
.btn--link:hover { color: var(--c-indigo-deep); }
.btn--link:hover .btn__arrow { transform: translateX(2px); }
.section--ink .btn--link { color: var(--c-amber-bright); }

/* Trạng thái đang gửi. Chấm quay thay cho chữ, nhưng giữ nguyên chiều rộng nút
   để layout không nhảy. Kèm aria-busy trên chính nút. */
.btn[aria-busy='true'] { pointer-events: none; }
.btn[aria-busy='true'] .btn__text { opacity: .35; }
.btn[aria-busy='true']::after {
    content: '';
    position: absolute;
    width: 18px; height: 18px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: btn-spin 700ms linear infinite;
}
.btn { position: relative; }
@keyframes btn-spin { to { transform: rotate(360deg); } }

.btn-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-4) var(--s-6);
    margin-top: var(--s-8);
}

/* =============================================================================
   E. THẺ DANH THIẾP (.smocard) — vật thể trung tâm của trang
   -----------------------------------------------------------------------------
   Tỉ lệ 1,586:1 là tỉ lệ thẻ ID-1 thật (85,6 × 54 mm). Bo góc 14px tương ứng
   3mm trên cạnh 54mm. Bóng ba lớp để thẻ có chiều dày chứ không phải một
   hình chữ nhật dán lên nền.
   ========================================================================== */
.smocard {
    position: relative;
    /* min-width:0 la bat buoc: mac dinh o luoi va o flex co min-width:auto,
       nen chieu rong noi tai cua o <input> ben trong day ca tam the rong ra
       ngoai khung — o 320px the phinh tu 280px len 333px va sinh cuon ngang. */
    min-width: 0;
    z-index: var(--z-card);
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: var(--s-3);
    /* Ti le 1,586:1 la ti le the ID-1 that (85,6 x 54 mm).
       width:100% la bat buoc di kem: khi min-height lon hon chieu cao suy ra
       tu ti le, Chrome tinh NGUOC lai chieu rong = min-height x ti le. O 320px
       dieu do bien tam the tu 280px thanh 333px va sinh cuon ngang. */
    width: 100%;
    aspect-ratio: 1.586;
    min-height: 190px;
    padding: var(--s-6);
    background: var(--c-paper);
    border-radius: var(--r-card);
    box-shadow: var(--sh-card);
}
.smocard > * { min-width: 0; }
.smocard__top {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    min-width: 0;
}
.smocard__avatar {
    flex: 0 0 auto;
    width: 52px; height: 52px;
    border-radius: var(--r-sm);
    background: var(--c-indigo-wash);
    display: grid;
    place-items: center;
    color: var(--c-indigo);
    font-weight: 600;
}
/* Ô gõ trực tiếp trên thẻ. Trông như chữ, hành xử như input. */
.smocard__input {
    width: 100%;
    /* 44px la vung cham toi thieu. Padding doc bu vao chieu cao dong chu,
       margin am keo lai de duong gach chan van om sat chu. */
    min-height: 44px;
    padding: 2px 4px;
    margin: -2px -4px;
    border: 0;
    border-bottom: 1.5px dashed var(--c-smoke-deep);
    border-radius: var(--r-xs);
    background: transparent;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: inherit;
    transition: border-color var(--dur-1) var(--ease-out),
                background-color var(--dur-1) var(--ease-out);
}
.smocard__input:hover { border-bottom-color: var(--c-amber); }
.smocard__input:focus {
    outline: none;
    border-bottom-color: var(--c-amber);
    background: var(--c-amber-wash);
}
.smocard__input:focus-visible {
    outline: 2px solid var(--c-focus);
    outline-offset: 3px;
}

.smocard__name {
    font-family: var(--ff-display);
    font-weight: 800;
    font-size: 1.3125rem;
    line-height: 1.25;
    letter-spacing: -0.015em;
    color: var(--c-text);
    /* Tên dài không được đẩy thẻ giãn ra. */
    overflow-wrap: anywhere;
}
.smocard__role {
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
}
.smocard__bottom {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--s-4);
}
.smocard__url {
    font-size: var(--fs-sm);
    color: var(--c-indigo);
    overflow-wrap: anywhere;
}
.smocard__qr {
    flex: 0 0 auto;
    width: 56px; height: 56px;
    color: var(--c-ink);
}


.smocard-hint {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    margin-top: var(--s-4);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--c-amber);
}
.smocard-hint svg {
    flex: 0 0 auto;
    width: 18px; height: 18px;
    transform: rotate(-90deg);   /* mui ten chi len tam the o ngay tren */
}

/* =============================================================================
   F. MÁY NGƯỜI NHẬN + TIA CHẠM
   ========================================================================== */
.handset {
    position: relative;
    width: min(232px, 100%);
    margin-inline: auto;
    padding: var(--s-3);
    background: var(--c-ink);
    border-radius: 26px;
    box-shadow: var(--sh-card);
}
.handset__screen {
    display: grid;
    gap: var(--s-3);
    padding: var(--s-5) var(--s-4);
    background: var(--c-paper);
    border-radius: 16px;
    min-height: 200px;
    align-content: start;
}
.handset__bar {
    width: 42px; height: 4px;
    border-radius: var(--r-pill);
    background: var(--c-smoke-deep);
    margin: 0 auto var(--s-2);
}
.handset__name {
    font-family: var(--ff-display);
    font-weight: 800;
    font-size: 1.0625rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
}
.handset__role { font-size: var(--fs-label); color: var(--c-text-muted); }
.handset__save {
    margin-top: var(--s-3);
    padding: var(--s-3);
    border-radius: var(--r-sm);
    background: var(--c-indigo);
    color: #fff;
    font-size: var(--fs-label);
    font-weight: 600;
    text-align: center;
}

/* Tia chạm: đúng MỘT chuyển động có chủ đích trên toàn site. Chạy một lần
   mỗi khi người dùng gõ vào thẻ, không lặp vô hạn — chuyển động lặp mãi là
   thứ khiến giao diện trông như do máy sinh. */
.tap-pulse {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}
.tap-pulse::after {
    content: '';
    position: absolute;
    inset-block: 0;
    left: -30%;
    width: 30%;
    background: linear-gradient(90deg, transparent, var(--c-amber-bright), transparent);
}
.tap-pulse.is-running {
    opacity: 1;
}
.tap-pulse.is-running::after {
    animation: tap-travel var(--dur-tap) var(--ease-out) 1;
}
@keyframes tap-travel {
    from { transform: translateX(0); }
    to   { transform: translateX(433%); }
}
@media (prefers-reduced-motion: reduce) {
    /* Không chạy tia. Thay bằng một nhịp sáng tĩnh để vẫn truyền đạt "đã gửi". */
    .tap-pulse.is-running::after { animation: none; left: 35%; }
}

/* =============================================================================
   G. THẺ NỘI DUNG CHUNG
   ========================================================================== */
.card {
    padding: var(--s-8);
    background: var(--c-paper);
    border: var(--bd-solid);
    border-radius: var(--r-lg);
}
.card > * + * { margin-top: var(--s-4); }
.card--link {
    display: block;
    color: inherit;
    text-decoration: none;
    transition: transform var(--dur-2) var(--ease-out),
                box-shadow var(--dur-2) var(--ease-out);
}
.card--link:hover {
    transform: translateY(-2px);
    box-shadow: var(--sh-2);
    color: inherit;
}
.section--ink .card {
    background: var(--c-ink-soft);
    border-color: rgba(233, 235, 230, .16);
}

/* =============================================================================
   H. BA BƯỚC
   ========================================================================== */
.steps { counter-reset: step; }
.steps__item {
    position: relative;
    padding-block: var(--s-6);
    border-top: var(--bd-hair);
}
.steps__item:last-child { border-bottom: var(--bd-hair); }
.steps__item::before {
    counter-increment: step;
    content: counter(step, decimal-leading-zero);
    display: block;
    margin-bottom: var(--s-2);
    font-family: var(--ff-display);
    font-weight: 800;
    font-size: var(--fs-body);
    color: var(--c-amber);
    letter-spacing: var(--ls-label);
}
.steps__title { margin-bottom: var(--s-2); }
.steps__text { color: var(--c-text-muted); max-width: var(--measure); }

@media (min-width: 900px) {
    /* Mỗi bước là một nhánh cắt ngang đường trao. */
    .steps__item { padding-right: var(--s-12); }
}

/* =============================================================================
   I. TÁCH LUỒNG CÁ NHÂN | DOANH NGHIỆP
   ========================================================================== */
.split__title { margin-bottom: var(--s-2); }
.split__who {
    color: var(--c-text-muted);
    font-size: var(--fs-sm);
    margin-bottom: var(--s-6);
}
.bullets { display: grid; gap: var(--s-4); }
.bullets li {
    position: relative;
    padding-left: var(--s-6);
}
.bullets li::before {
    content: '';
    position: absolute;
    left: 0; top: 0.66em;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--c-indigo);
}
.split--recipient .bullets li::before { background: var(--c-amber); }
.bullets--spaced { margin-bottom: var(--s-8); }

/* =============================================================================
   J. DẢI MẪU THẺ (DECK) — trượt ngang, cuộn được bằng bàn phím
   ========================================================================== */
.deck {
    display: flex;
    gap: var(--s-6);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* Chừa chỗ cho bóng của thẻ, nếu không bóng bị cắt cụt ở mép vùng cuộn. */
    padding: var(--s-4) var(--s-1) var(--s-10);
    margin-inline: calc(-1 * var(--s-1));
    scrollbar-width: thin;
}
.deck__item {
    display: block;
    color: inherit;
    text-decoration: none;
}
/* Chieu rong co dinh chi ap khi the nam trong dai truot; dung mot minh
   (trang chu hien chi co MOT the mau that) thi the theo chieu rong cot. */
.deck .deck__item {
    flex: 0 0 min(340px, 82vw);
    scroll-snap-align: start;
}
.deck__label {
    display: inline-block;
    margin-bottom: var(--s-3);
    padding: 2px var(--s-3);
    border-radius: var(--r-pill);
    background: var(--c-amber-wash);
    color: var(--c-amber);
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
}
.deck__trade {
    margin-top: var(--s-4);
    font-weight: 600;
}
.deck__note { color: var(--c-text-muted); font-size: var(--fs-sm); }
.deck__item:hover .smocard { box-shadow: var(--sh-lift); }
.deck__item .smocard { transition: box-shadow var(--dur-2) var(--ease-out); }

.deck-empty {
    padding: var(--s-10);
    border: 1px dashed var(--c-smoke-deep);
    border-radius: var(--r-lg);
    text-align: center;
    color: var(--c-text-muted);
}

/* =============================================================================
   K. BẢNG SO SÁNH
   ========================================================================== */
.compare { display: grid; gap: var(--s-10); }
@media (min-width: 760px) {
    .compare { grid-template-columns: 1fr 1fr; gap: var(--s-16); }
}
.compare__head {
    padding-bottom: var(--s-4);
    margin-bottom: var(--s-6);
    border-bottom: var(--bd-strong);
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
}
.compare__list { display: grid; gap: var(--s-5); }
.compare__list li { color: var(--c-text-muted); }
.compare__note {
    margin-top: var(--s-10);
    padding-top: var(--s-6);
    border-top: var(--bd-hair);
    font-size: var(--fs-body-lg);
}

/* =============================================================================
   L. BẢNG GIÁ
   ========================================================================== */
.pricing {
    display: grid;
    gap: var(--s-6);
}
@media (min-width: 860px) {
    .pricing { grid-template-columns: repeat(3, 1fr); }
}

/* Bố cục hai cột thật của .pricing--single nằm ở khối U bên dưới file này
   (giá trái, danh sách phải). Rule cũ ở đây ép max-width 480px + 1 cột, đè
   mất grid-template-columns 2 cột đã khai báo bên dưới. */
.pricing__col {
    display: flex;
    flex-direction: column;
    padding: var(--s-8);
    background: var(--c-paper);
    border: var(--bd-solid);
    border-radius: var(--r-lg);
}
.pricing__name { margin-bottom: var(--s-1); }
.pricing__who {
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
    margin-bottom: var(--s-6);
}
.pricing__price {
    font-family: var(--ff-display);
    font-weight: 800;
    font-size: 1.75rem;
    line-height: 1.2;
    letter-spacing: -0.02em;
}
.pricing__period {
    font-family: var(--ff-body);
    font-weight: 400;
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
}
.pricing__list {
    display: grid;
    gap: var(--s-3);
    margin: var(--s-6) 0 var(--s-8);
    font-size: var(--fs-sm);
}
.pricing__list li {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: var(--s-3);
    align-items: start;
}
.pricing__list svg { width: 18px; height: 18px; margin-top: 3px; }
.pricing__list .is-yes { color: var(--c-success); }
.pricing__list .is-no  { color: var(--c-text-muted); }
.pricing__list li[data-state='no'] { color: var(--c-text-muted); }
.pricing__cta { margin-top: auto; }
.pricing__foot {
    margin-top: var(--s-8);
    color: var(--c-text-muted);
    font-size: var(--fs-sm);
    max-width: var(--measure);
}

/* =============================================================================
   M. CÂU HỎI — <details>/<summary> thuần, không một dòng JS
   ========================================================================== */
/* Bề rộng: 68rem cho ra dòng ~110 ký tự — gấp rưỡi ngưỡng đọc thoải mái, và
   đẩy dấu cộng ra xa chữ tới mức khó ghép cặp câu hỏi ↔ nút mở. */
.faq { border-top: var(--bd-hair); max-width: 58rem; }
.faq__item { border-bottom: var(--bd-hair); }

/* Câu hỏi từng dùng ĐÚNG chất liệu của tiêu đề mục — Be Vietnam Pro 800, chỉ
   khác cỡ (40px so với 22px). Hậu quả: sáu câu xếp chồng thành một mảng chữ
   đậm cạnh tranh với chính tiêu đề, và hai cấp không có bậc nghỉ.

   Về vai trò, câu hỏi FAQ không phải tiêu đề mục — nó là NHÃN CỦA MỘT NÚT
   mở/đóng. Nên nó có bậc riêng: body face đậm vừa. Ba bậc giờ tách bạch —

       tiêu đề mục   Be Vietnam Pro 800 · 40px
       câu hỏi       Inter 600          · 19px
       câu trả lời   Inter 400          · 17px

   Câu hỏi và câu trả lời dùng chung họ chữ nên mắt đọc liền mạch từ cái này
   sang cái kia, thay vì nhảy qua hai thế giới chữ khác nhau. */
.faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-6);
    padding-block: var(--s-6);
    font-family: var(--ff-body);
    font-weight: 600;
    font-size: var(--fs-body-lg);
    line-height: 1.45;
    letter-spacing: normal;
    cursor: pointer;
    list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--c-indigo); }
/* Dấu cộng vẽ bằng hai gạch; khi mở, gạch dọc xoay thành trùng gạch ngang. */
.faq__sign {
    position: relative;
    flex: 0 0 auto;
    width: 18px; height: 18px;
}
.faq__sign::before,
.faq__sign::after {
    content: '';
    position: absolute;
    inset: 8px 0 auto;
    height: 2px;
    background: currentColor;
    transition: transform var(--dur-2) var(--ease-out);
}
.faq__sign::after { transform: rotate(90deg); }
.faq__item[open] .faq__sign::after { transform: rotate(0deg); }
.faq__a {
    padding-bottom: var(--s-6);
    color: var(--c-text-muted);
    max-width: var(--measure);
}
.faq__a > * + * { margin-top: var(--s-4); }

/* =============================================================================
   N. BIỂU MẪU
   ========================================================================== */
.form { display: grid; gap: var(--s-6); }
.form__row { display: grid; gap: var(--s-6); }
@media (min-width: 640px) {
    .form__row--2 { grid-template-columns: 1fr 1fr; }
}

.field { display: grid; gap: var(--s-2); }
.field__label { font-weight: 600; font-size: var(--fs-sm); }
.field__req { color: var(--c-amber); margin-left: 2px; }
.field__hint { font-size: var(--fs-sm); color: var(--c-text-muted); }

.field__input,
.field__textarea {
    width: 100%;
    min-height: 48px;
    padding: var(--s-3) var(--s-4);
    background: var(--c-paper);
    border: 1px solid var(--c-smoke-deep);
    border-radius: var(--r-sm);
    color: var(--c-text);
    transition: border-color var(--dur-1) var(--ease-out),
                box-shadow var(--dur-1) var(--ease-out);
}
.field__textarea { min-height: 132px; resize: vertical; }
.field__input::placeholder,
.field__textarea::placeholder { color: #8A90A0; }
.field__input:hover,
.field__textarea:hover { border-color: #B9BEC9; }
.field__input:focus,
.field__textarea:focus {
    border-color: var(--c-indigo);
    box-shadow: 0 0 0 3px var(--c-indigo-wash);
}
.field__input[disabled],
.field__textarea[disabled] {
    background: var(--c-smoke);
    color: var(--c-text-muted);
    cursor: not-allowed;
}

.field.is-error .field__input,
.field.is-error .field__textarea { border-color: var(--c-danger); }
.field.is-error .field__input:focus,
.field.is-error .field__textarea:focus { box-shadow: 0 0 0 3px var(--c-danger-wash); }

/* Lỗi đặt ngay dưới trường lỗi, không gom lên đầu form. */
.field__error {
    display: none;
    align-items: flex-start;
    gap: var(--s-2);
    font-size: var(--fs-sm);
    color: var(--c-danger);
}
.field.is-error .field__error { display: flex; }
.field__error svg { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 3px; }

/* Chọn Cá nhân / Doanh nghiệp: hai thẻ bấm được, không phải radio tí hon. */
.choice { display: grid; gap: var(--s-3); }
@media (min-width: 520px) { .choice { grid-template-columns: 1fr 1fr; } }
.choice__option {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    min-height: 52px;
    padding: var(--s-3) var(--s-4);
    background: var(--c-paper);
    border: 1px solid var(--c-smoke-deep);
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: border-color var(--dur-1) var(--ease-out),
                background-color var(--dur-1) var(--ease-out);
}
.choice__option:hover { border-color: #B9BEC9; }
.choice__option input { width: 20px; height: 20px; accent-color: var(--c-indigo); }
.choice__option:has(input:checked) {
    border-color: var(--c-indigo);
    background: var(--c-indigo-wash);
}
.choice__option:has(input:focus-visible) {
    outline: 2px solid var(--c-focus);
    outline-offset: 3px;
}

/* =============================================================================
   O. THÔNG BÁO
   ========================================================================== */
.alert {
    display: flex;
    gap: var(--s-3);
    padding: var(--s-5);
    border-radius: var(--r-md);
    border: 1px solid transparent;
}
.alert svg { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 3px; }
.alert--error {
    background: var(--c-danger-wash);
    border-color: rgba(163, 35, 29, .30);
    color: var(--c-danger);
}
.alert--success {
    background: var(--c-success-wash);
    border-color: rgba(20, 102, 60, .30);
    color: var(--c-success);
}
.alert__title { font-weight: 600; }
.alert__body { color: var(--c-text); }
.alert__body > * + * { margin-top: var(--s-2); }

/* =============================================================================
   P. THẺ KÊNH LIÊN HỆ
   ========================================================================== */
.channels {
    display: grid;
    gap: var(--s-4);
    margin-bottom: var(--s-12);
}
@media (min-width: 700px) { .channels { grid-template-columns: repeat(3, 1fr); } }
.channel {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    min-height: 76px;
    padding: var(--s-5);
    background: var(--c-paper);
    border: var(--bd-solid);
    border-radius: var(--r-lg);
    color: inherit;
    text-decoration: none;
    transition: transform var(--dur-2) var(--ease-out),
                box-shadow var(--dur-2) var(--ease-out),
                border-color var(--dur-2) var(--ease-out);
}
.channel:hover {
    transform: translateY(-2px);
    box-shadow: var(--sh-2);
    border-color: var(--c-indigo);
    color: inherit;
}
.channel__icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    border-radius: var(--r-sm);
    background: var(--c-indigo-wash);
    color: var(--c-indigo);
}
.channel__icon svg { width: 22px; height: 22px; }
.channel__label { font-size: var(--fs-sm); color: var(--c-text-muted); }
.channel__value { font-weight: 600; overflow-wrap: anywhere; }

/* =============================================================================
   Q. ĐẦU TRANG
   ========================================================================== */
.site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-nav);
    background: var(--c-smoke);
    transition: box-shadow var(--dur-2) var(--ease-out),
                background-color var(--dur-2) var(--ease-out);
}
.site-header.is-scrolled {
    background: rgba(230, 232, 226, .92);
    backdrop-filter: blur(8px);
    box-shadow: 0 1px 0 rgba(16, 23, 40, .10);
}
.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-6);
    min-height: 72px;
}
.site-header__brand { display: flex; align-items: center; }
.site-header__brand img { height: 34px; width: auto; }

.site-nav { display: none; }
@media (min-width: 1000px) {
    .site-nav { display: flex; align-items: center; gap: var(--s-8); }
}
.site-nav__link {
    color: var(--c-text);
    text-decoration: none;
    font-weight: 500;
    padding-block: var(--s-2);
    border-bottom: 2px solid transparent;
    transition: border-color var(--dur-1) var(--ease-out),
                color var(--dur-1) var(--ease-out);
}
.site-nav__link:hover { color: var(--c-indigo); }
.site-nav__link[aria-current='page'] {
    border-bottom-color: var(--c-amber);
    color: var(--c-text);
}

.site-header__actions { display: flex; align-items: center; gap: var(--s-3); }

/* Liên kết đăng nhập ở thanh trên. Trước đây khai báo trong home-v2.css, mà
   /lien-he và /gioi-thieu không nạp file đó — ở hai trang ấy nó hiện ra như
   liên kết mặc định của trình duyệt. Header dùng chung thì kiểu phải nằm ở
   file layout luôn nạp.
   min-height 44px: liên kết đứng riêng, WCAG 2.5.8 không miễn trừ vùng chạm. */
.site-header__login {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--c-text);
    text-decoration: none;
    transition: color var(--dur-1) var(--ease-out);
    white-space: nowrap;
}
.site-header__login:hover { color: var(--c-indigo); }
.site-header__cta { display: none; }
@media (min-width: 640px) { .site-header__cta { display: inline-flex; } }

.burger {
    display: grid;
    place-items: center;
    width: 48px; height: 48px;
    border-radius: var(--r-sm);
    cursor: pointer;
    color: var(--c-text);
}
.burger:hover { background: rgba(16, 23, 40, .06); }
@media (min-width: 1000px) { .burger { display: none; } }

/* --- Menu trượt --------------------------------------------------------- */
.drawer {
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay);
    visibility: hidden;
}
.drawer[data-open='true'] { visibility: visible; }
.drawer__scrim {
    position: absolute;
    inset: 0;
    background: rgba(16, 23, 40, .5);
    opacity: 0;
    transition: opacity var(--dur-3) var(--ease-out);
}
.drawer[data-open='true'] .drawer__scrim { opacity: 1; }
.drawer__panel {
    position: absolute;
    inset-block: 0;
    right: 0;
    width: min(360px, 88vw);
    padding: var(--s-6);
    background: var(--c-paper);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform var(--dur-3) var(--ease-out);
    display: flex;
    flex-direction: column;
    gap: var(--s-6);
}
.drawer[data-open='true'] .drawer__panel { transform: translateX(0); }
.drawer__head { display: flex; align-items: center; justify-content: space-between; }
.drawer__close {
    display: grid;
    place-items: center;
    width: 48px; height: 48px;
    border-radius: var(--r-sm);
    cursor: pointer;
}
.drawer__close:hover { background: rgba(16, 23, 40, .06); }
.drawer__nav { display: grid; gap: var(--s-1); }
.drawer__link {
    display: block;
    padding: var(--s-4) var(--s-3);
    border-radius: var(--r-sm);
    color: var(--c-text);
    text-decoration: none;
    font-size: var(--fs-body-lg);
    font-weight: 500;
}
.drawer__link:hover { background: var(--c-smoke); color: var(--c-text); }
.drawer__link[aria-current='page'] { color: var(--c-indigo); }

/* Khoá cuộn nền khi menu mở. */
body.is-locked { overflow: hidden; }

/* =============================================================================
   R. CHÂN TRANG
   ========================================================================== */
.site-footer {
    background: var(--c-ink);
    color: var(--c-text-onink);
    padding-block: var(--s-16) var(--s-8);
}
.site-footer a { color: var(--c-text-onink-mute); text-decoration: none; }
.site-footer a:hover { color: var(--c-text-onink); text-decoration: underline; }
.site-footer__grid {
    display: grid;
    gap: var(--s-10);
}
@media (min-width: 760px) {
    .site-footer__grid { grid-template-columns: 1.6fr 1fr 1fr; gap: var(--s-12); }
}
.site-footer__brand img { height: 34px; width: auto; margin-bottom: var(--s-5); }
.site-footer__about {
    color: var(--c-text-onink-mute);
    font-size: var(--fs-sm);
    max-width: 44ch;
}
.site-footer__title {
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--c-text-onink);
    margin-bottom: var(--s-5);
}
.site-footer__list { display: grid; gap: var(--s-3); font-size: var(--fs-sm); }
.site-footer__legal {
    margin-top: var(--s-12);
    padding-top: var(--s-6);
    border-top: 1px solid rgba(233, 235, 230, .16);
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3) var(--s-6);
    justify-content: space-between;
    font-size: var(--fs-sm);
    color: var(--c-text-onink-mute);
}

/* =============================================================================
   S. NỘI DUNG DÀI (trang Giới thiệu)
   ========================================================================== */
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: var(--s-5); }
.prose p { color: var(--c-text-muted); }
.section--ink .prose p { color: var(--c-text-onink-mute); }

.principles { display: grid; gap: var(--s-6); }
@media (min-width: 860px) { .principles { grid-template-columns: repeat(3, 1fr); } }
.principle__name { margin-bottom: var(--s-3); }
.principle__proof {
    padding-top: var(--s-4);
    border-top: var(--bd-hair);
    color: var(--c-text-muted);
    font-size: var(--fs-sm);
}

.people { display: grid; gap: var(--s-5); }
@media (min-width: 700px) { .people { grid-template-columns: 1fr 1fr; } }
.person {
    display: grid;
    gap: var(--s-1);
    padding-block: var(--s-4);
    border-top: var(--bd-hair);
}
.person__name { font-weight: 600; }
.person__role { color: var(--c-text-muted); font-size: var(--fs-sm); }

/* Ghi chú TODO cho chỗ còn thiếu dữ liệu thật. Cố tình xấu để không ai quên. */
.todo {
    padding: var(--s-5);
    border: 1px dashed var(--c-amber);
    border-radius: var(--r-md);
    background: var(--c-amber-wash);
    color: var(--c-amber);
    font-size: var(--fs-sm);
}

/* =============================================================================
   T. IN GIẤY
   ========================================================================== */
@media print {
    .site-header, .drawer, .btn, .tap-pulse { display: none !important; }
    .section--seam::before { display: none; }
    .section { padding-block: var(--s-8); background: #fff; }
    .section--ink { background: #fff; color: #000; }
}

/* =============================================================================
   U. LỚP BỐ CỤC THEO TRANG
   -----------------------------------------------------------------------------
   Những chỗ này từng được viết bằng thuộc tính style nội tuyến trong view.
   Dù giá trị vẫn lấy từ token, style nội tuyến rải rác khiến không ai sửa
   được nhịp của một mục mà không mở view ra tìm — nên gom hết về đây.
   ========================================================================== */

/* --- Hero -----------------------------------------------------------------
   Hero dung nhip rieng chu khong dung --section-y-lg: voi tieu de 3 dong +
   the song + hai CTA, padding 168px day nut chinh xuong duoi man hinh dau
   tren may 1440x900. Do la thu tra gia bang chuyen doi, khong phai bang
   cam giac cao cap.                                                        */
.section--hero {
    padding-top: clamp(2.5rem, 1.4rem + 3vw, 4.5rem);
    padding-bottom: var(--section-y);
}
.section--hero h1 { font-size: clamp(2.25rem, 1.6rem + 2.8vw, 3.5rem); }
.hero__lede { margin-top: var(--s-5); }
.hero__cardwrap {
    margin-top: var(--s-8);
    max-width: 420px;
}
.hero__trust {
    margin-top: var(--s-8);
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
}
/* Cột phải của hero là gốc toạ độ của tia chạm. */
.hero__recipient { position: relative; }

/* Vùng chứa hai ô gõ trên thẻ. min-width:0 để tên dài không phá vỡ flex. */
.smocard__fields { min-width: 0; flex: 1; }
.smocard__fields .smocard__input + .smocard__input { margin-top: var(--s-2); }

/* --- Mục mẫu thẻ --------------------------------------------------------- */
.samples__title { margin-bottom: var(--s-4); }

/* --- Bảng giá ------------------------------------------------------------ */
.pricing__cta .btn { width: 100%; }

/* --- Màn đóng trang ------------------------------------------------------ */
.closing__body { max-width: 34ch; }
.closing__body .lede { margin-top: var(--s-5); }

/* --- Trang liên hệ ------------------------------------------------------- */
.contact__aside > * + * { margin-top: var(--s-8); }
.contact__map {
    display: block;
    border-radius: var(--r-lg);
    border: var(--bd-solid);
    overflow: hidden;
}
.contact__map img { width: 100%; height: auto; }
.contact__meta { display: grid; gap: var(--s-5); }
.contact__meta-item { display: flex; gap: var(--s-3); }
.contact__meta-item svg { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 3px; color: var(--c-amber); }
.contact__form-note { font-size: var(--fs-sm); color: var(--c-text-muted); }

/* --- Trang giới thiệu ---------------------------------------------------- */
.about__quote {
    margin-top: var(--s-8);
    padding-left: var(--s-6);
    border-left: 2px solid var(--c-amber);
    font-size: var(--fs-body-lg);
}
.about__quote > * + * { margin-top: var(--s-4); }
.contact__form-note { margin-top: var(--s-3); }

/* Tieu de phu cap h2. Giu the <h2> cho dung thu bac tai lieu, nhung ha co
   chu ve muc h3 — mot "Van phong" to 40px canh mot khoi noi dung nho la sai
   trong so thi giac, khong phai sai ngu nghia. */
.subhead {
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
    letter-spacing: var(--ls-h3);
    margin-bottom: var(--s-4);
}

/* Logo o dau trang la mot lien ket bam duoc, khong phai anh trang tri —
   phai dat vung cham 44px du anh chi cao 34px. */
.site-header__brand {
    min-height: 44px;
    padding-inline: var(--s-1);
    margin-inline: calc(-1 * var(--s-1));
}

/* Vung cham tren thiet bi cam ung.
   WCAG 2.5.8 mien tru lien ket nam trong mot cau van (vi du so hotline trong
   doan chu o hero) — o do chi can dam bao chu du to. Nhung lien ket dung
   rieng thanh danh sach o chan trang thi khong duoc mien: ngon tay khong
   nham duoc muc tieu cao 18px. Chi ap cho con tro tho de chan trang tren
   may tinh giu duoc do gon. */
@media (pointer: coarse) {
    .site-footer__list { gap: 0; }
    .site-footer__list a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
    .site-footer__legal a { display: inline-block; padding-block: var(--s-3); }
}

/* =============================================================================
   R. CARDSHOT — ảnh thu nhỏ của MỘT TẤM THẺ THẬT
   -----------------------------------------------------------------------------
   Khối "Xem một tấm thẻ hoàn chỉnh" trước đây dùng lại .smocard: một hình chữ
   nhật ngang tỉ lệ thẻ giấy, bên trong đúng một cái tên, một dòng chức danh,
   rồi 200px trống. Chỗ duy nhất trên trang chủ hứa cho xem sản phẩm lại không
   cho xem gì — và còn vẽ sai hình: SmoCard là một TRANG cuộn trên điện thoại,
   không phải tấm thẻ giấy nằm ngang.

   .cardshot dựng lại đúng phần đầu tấm thẻ thật: dải bìa có màu, ảnh đại diện
   đè lên, tên, chức danh · công ty, hàng mục lục, hàng con số, thanh thao tác
   dưới cùng. Ba bảng màu lấy ĐÚNG giá trị của 3 mẫu giao diện trong
   smocard-templates.css, nên cái người xem thấy ở đây là cái họ nhận được.
   ========================================================================== */

.cardshot {
    --cs-brand: #1e3a5f;                    /* tpl-classic */
    --cs-brand-soft: rgba(30, 58, 95, .10);

    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    aspect-ratio: 9 / 14;
    overflow: hidden;
    background: var(--c-paper);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-card);
    text-decoration: none;
    color: var(--c-text);
    transition: transform var(--dur-2) var(--ease-out),
                box-shadow var(--dur-2) var(--ease-out);
}
.cardshot--teal   { --cs-brand: #0f766e; --cs-brand-soft: rgba(15, 118, 110, .10); }
.cardshot--violet { --cs-brand: #7c3aed; --cs-brand-soft: rgba(124, 58, 237, .10); }

a.cardshot:hover,
a.cardshot:focus-visible { transform: translateY(-4px); box-shadow: var(--sh-lift); }

/* Dải bìa: chỗ DUY NHẤT trên trang chủ có mảng màu lớn. Trước đây toàn trang
   chỉ có hai sắc trắng ngà + đen, màu nhấn thương hiệu phủ 0,0% diện tích. */
.cardshot__cover {
    height: 23%;
    background:
        radial-gradient(120% 140% at 78% 8%, rgba(255, 255, 255, .30), transparent 62%),
        linear-gradient(146deg, var(--cs-brand), color-mix(in srgb, var(--cs-brand) 62%, #000));
}

.cardshot__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    padding: 0 var(--s-4) 52px;
    margin-top: -26px;
    overflow: hidden;
}

.cardshot__avatar {
    width: 52px; height: 52px;
    border-radius: var(--r-pill);
    border: 3px solid var(--c-paper);
    background: color-mix(in srgb, var(--cs-brand) 14%, #fff);
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: var(--fs-body-lg);
    color: var(--cs-brand);
}

.cardshot__name {
    margin: var(--s-2) 0 0;
    font-size: var(--fs-sm);
    font-weight: 700;
    line-height: 1.25;
}
.cardshot__role {
    margin: 0;
    font-size: 11px;
    line-height: 1.35;
    color: var(--c-text-muted);
}
.cardshot__role strong { color: var(--c-text); font-weight: 600; }

/* Hàng mục lục — chi tiết khiến người xem nhận ra đây là trang cuộn được,
   không phải một tấm ảnh tĩnh. */
.cardshot__chips {
    display: flex;
    gap: 4px;
    margin-top: var(--s-1);
    overflow: hidden;
}
.cardshot__chip {
    flex: none;
    padding: 3px 8px;
    border-radius: var(--r-pill);
    background: var(--c-smoke);
    font-size: 9px;
    font-weight: 600;
    color: var(--c-text-muted);
    white-space: nowrap;
}
.cardshot__chip--on { background: var(--cs-brand-soft); color: var(--cs-brand); }

.cardshot__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    margin-top: var(--s-2);
    padding: var(--s-2) 0;
    border-top: 1px solid var(--c-smoke-deep);
    border-bottom: 1px solid var(--c-smoke-deep);
}
.cardshot__stat b {
    display: block;
    font-size: var(--fs-sm);
    line-height: 1.1;
    color: var(--cs-brand);
}
.cardshot__stat span {
    font-size: 9px;
    color: var(--c-text-muted);
}

/* Khối nội dung: gợi ra phần còn lại của thẻ vẫn cuộn tiếp bên dưới. */
.cardshot__tile {
    display: flex;
    gap: var(--s-2);
    align-items: center;
    margin-top: var(--s-2);
    padding: var(--s-2);
    border: 1px solid var(--c-smoke-deep);
    border-radius: var(--r-sm);
}
.cardshot__thumb {
    flex: none;
    width: 34px; height: 34px;
    border-radius: var(--r-xs);
    background: linear-gradient(135deg, var(--cs-brand-soft), var(--c-smoke));
}
.cardshot__tiletext { min-width: 0; }
.cardshot__tiletext b {
    display: block;
    font-size: 10px;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cardshot__tiletext span { font-size: 9px; color: var(--c-amber); font-weight: 600; }

/* Thanh thao tác dính đáy — thứ biến trang thành "trao được". */
.cardshot__bar {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    display: flex;
    gap: 4px;
    padding: var(--s-3) var(--s-4);
    background: linear-gradient(to top,
        var(--c-paper) 0, var(--c-paper) 62%, transparent 100%);
}
.cardshot__act {
    flex: 1;
    padding: 6px 0;
    border-radius: var(--r-sm);
    background: var(--cs-brand);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    text-align: center;
}
.cardshot__act--ghost {
    flex: 0 0 40%;
    background: var(--cs-brand-soft);
    color: var(--cs-brand);
}

/* Chú thích dưới mỗi thẻ */
.cardshot-cap { margin: var(--s-3) 0 0; }
.cardshot-cap b {
    display: block;
    font-size: var(--fs-sm);
    font-weight: 700;
}
.cardshot-cap span {
    display: block;
    margin-top: 2px;
    font-size: var(--fs-label);
    line-height: var(--lh-label);
    color: var(--c-text-muted);
}

/* Ba tấm nằm ngang trên desktop, cuộn ngang trên điện thoại. */
.cardshot-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-6);
    align-items: start;
}
@media (max-width: 720px) {
    .cardshot-row {
        grid-auto-flow: column;
        grid-auto-columns: 62%;
        grid-template-columns: none;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding-bottom: var(--s-3);
        scrollbar-width: none;
    }
    .cardshot-row::-webkit-scrollbar { display: none; }
    .cardshot-row > * { scroll-snap-align: start; }
}

@media (prefers-reduced-motion: reduce) {
    .cardshot { transition: none; }
    a.cardshot:hover, a.cardshot:focus-visible { transform: none; }
}

/* Dòng dẫn sau ba tấm thẻ: gộp nội dung của cột phải cũ, đặt ngang thay vì
   nhồi vào một cột hẹp bên cạnh. */
.sample__after {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--s-4) var(--s-8);
    margin-top: var(--s-10);
    padding-top: var(--s-6);
    border-top: 1px solid var(--c-smoke-deep);
}
.sample__more {
    flex: 1 1 34rem;
    max-width: 58ch;
    margin: 0;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--c-text-muted);
}
.sample__more strong { color: var(--c-text); font-weight: 600; }

/* =============================================================================
   S. THẺ Ở HERO — thôi trông như cái biểu mẫu
   -----------------------------------------------------------------------------
   Tấm thẻ này gõ được thật, đó là ý hay. Nhưng nó đang hiện ra là: ô vuông xám
   chữ "N", hai dòng gạch chấm, nền trắng trên nền khói — tức là một cái form,
   hoặc một khung xương đang tải. Trên toàn trang chủ, màu nhấn hổ phách phủ
   đúng 0,0% diện tích trong khi tokens.css định nghĩa nó là màu thương hiệu.
   ========================================================================== */

/* Dải bìa: thẻ thật có ảnh bìa, thẻ ở hero cũng phải có mảng màu ở đúng chỗ đó. */
.smocard::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 8px;
    border-radius: var(--r-card) var(--r-card) 0 0;
    background: linear-gradient(90deg,
        var(--c-indigo) 0%, var(--c-indigo-deep) 62%, var(--c-amber-bright) 100%);
}

/* Ảnh đại diện đặc, không phải ô xám nhạt. */
.smocard__avatar {
    background: var(--c-indigo);
    color: #fff;
    border-radius: var(--r-pill);
    font-size: var(--fs-body-lg);
    font-weight: 700;
}

/* Gạch chân "gõ được" đổi sang hổ phách: vừa là dấu hiệu mời gõ rõ hơn, vừa là
   chỗ duy nhất màu nhấn thương hiệu xuất hiện ở nửa trên màn hình. */
.smocard__input { border-bottom-color: var(--c-amber); }
.smocard__input:hover { border-bottom-color: var(--c-amber-bright); }
.smocard__input:focus-visible {
    border-bottom-style: solid;
    background-color: var(--c-amber-wash);
}

/* Dấu QR là đồ hoạ — đúng công dụng token amber-bright được đặt ra. */
.smocard__qr { color: var(--c-indigo); }

/* =============================================================================
   T. CTA ĐÓNG TRANG — dải ngang thay vì cột hẹp
   -----------------------------------------------------------------------------
   .closing__body giới hạn 34ch khiến một băng cao 664px chỉ dùng 25% bề ngang:
   nhìn như trang bị cắt dở chứ không như khoảng thở có chủ ý.
   ========================================================================== */
.closing {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: var(--s-10) var(--s-16);
    align-items: center;
}
.closing__body { max-width: 30ch; }
.closing__act {
    display: flex;
    flex-direction: column;
    gap: var(--s-5);
    align-items: flex-start;
}
/* Gạch hổ phách: chốt lại màu nhấn ở đúng dòng cuối cùng người đọc nhìn thấy. */
.closing__note {
    margin: 0;
    padding-left: var(--s-4);
    border-left: 2px solid var(--c-amber-bright);
    font-size: var(--fs-label);
    line-height: var(--lh-label);
    color: var(--c-text-onink-mute);
}
@media (max-width: 860px) {
    .closing { grid-template-columns: 1fr; }
    .closing__body { max-width: none; }
}

/* =============================================================================
   U. BẢNG GIÁ — giá bên trái, thứ nhận được bên phải
   ========================================================================== */
.pricing--single {
    display: grid;
    grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
    gap: var(--s-10) var(--s-16);
    align-items: start;
    padding: var(--s-10);
    background: var(--c-smoke);
    border: 1px solid var(--c-smoke-deep);
    border-radius: var(--r-lg);
}
/* Giá là con số quan trọng nhất khối này — cho nó cỡ chữ tương xứng. */
.pricing--single .pricing__price {
    font-size: var(--fs-h2);
    line-height: 1.05;
    letter-spacing: -0.02em;
}
.pricing__reassure {
    margin: var(--s-5) 0 0;
    padding-left: var(--s-4);
    border-left: 2px solid var(--c-amber-bright);
    font-size: var(--fs-label);
    line-height: var(--lh-label);
    color: var(--c-text-muted);
}
.pricing__whathead {
    margin: 0 0 var(--s-5);
    font-size: var(--fs-label);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--c-amber);
}
/* Bảy dòng xếp hai cột: hết cột trống bên phải, khối cũng thấp xuống. */
.pricing--single .pricing__list {
    columns: 2;
    column-gap: var(--s-10);
}
.pricing--single .pricing__list > li { break-inside: avoid; }

@media (max-width: 900px) {
    .pricing--single { grid-template-columns: 1fr; padding: var(--s-6); }
    .pricing--single .pricing__list { columns: 1; }
}

/* =============================================================================
   V. HERO — hướng navy + hổ phách
   -----------------------------------------------------------------------------
   Tham khảo phong cách của một trang đối thủ (nền sáng, huy hiệu vàng, mockup
   điện thoại nổi khối, thẻ NFC + QR trôi nổi). Giữ đúng cấu trúc luận điểm
   "Bạn / Người nhận" đã có — chỉ đổi cách tô màu và thêm mockup nổi.
   ========================================================================== */

.hero__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    margin: 0 0 var(--s-5);
    padding: 6px var(--s-4);
    border-radius: var(--r-pill);
    background: var(--c-amber-wash);
    color: var(--c-amber);
    font-size: var(--fs-label);
    font-weight: 700;
}
.hero__badge svg { flex: none; }

.hero__accent { color: var(--c-amber); }

/* Ba đặc điểm cốt lõi dưới hàng nút — đọc được trong ba giây. */
.hero__features {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2) var(--s-6);
    margin: var(--s-6) 0 0;
    padding: 0;
    list-style: none;
}
.hero__features li {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
}
.hero__features svg {
    flex: none;
    width: 16px; height: 16px;
    color: var(--c-amber);
}

/* Sân khấu bên phải: điện thoại + hai thẻ nổi, có quầng sáng hổ phách phía sau
   thay cho nền trống — gần với cảm giác "nổi khối" của ảnh tham khảo mà không
   cần ảnh dựng 3D thật. */
.hero__stage {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 420px;
}
.hero__stage::before {
    content: "";
    position: absolute;
    inset: -10% -10% -10% 10%;
    background:
        radial-gradient(closest-side, var(--c-amber-wash) 0%, transparent 72%),
        radial-gradient(closest-side at 78% 20%, var(--c-indigo-wash) 0%, transparent 60%);
    opacity: .9;
    z-index: 0;
}
.hero__stage > * { position: relative; z-index: 1; }
.hero__stage .tap-pulse,
.hero__stage .handset { z-index: 1; }

.hero__float {
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-3) var(--s-4);
    background: var(--c-ink);
    color: var(--c-text-onink);
    border-radius: var(--r-md);
    box-shadow: var(--sh-lift);
    font-size: var(--fs-label);
    font-weight: 700;
    white-space: nowrap;
}
.hero__float svg { flex: none; color: var(--c-amber-bright); }
.hero__float--nfc { top: 8%; right: -2%; }
.hero__float--qr {
    bottom: 6%; right: -6%;
    background: var(--c-paper);
    color: var(--c-text);
    border: 1px solid var(--c-smoke-deep);
}
.hero__float-qr { width: 22px; height: 22px; color: var(--c-ink); }

@media (max-width: 860px) {
    .hero__stage { min-height: 320px; }
    .hero__float--nfc { right: 2%; }
    .hero__float--qr { right: 0; }
}
@media (max-width: 640px) {
    .hero__float { display: none; }   /* Không đủ chỗ nổi mà không đè lên máy chính. */
}

/* =============================================================================
   W. HÀNG BA BƯỚC KIỂU VÒNG TRÒN NỐI NHAU
   ========================================================================== */
.stepsrow {
    display: flex;
    align-items: flex-start;
    gap: var(--s-6);
    margin: 0;
    padding: 0;
    list-style: none;
}
.stepsrow__item {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
}
.stepsrow__icon {
    display: grid;
    place-items: center;
    width: 56px; height: 56px;
    margin: 0 auto var(--s-4);
    border-radius: var(--r-pill);
    background: var(--c-ink);
    color: var(--c-amber-bright);
}
.stepsrow__title { margin: 0 0 var(--s-2); font-size: var(--fs-h3); }
.stepsrow__text {
    margin: 0;
    max-width: 26ch;
    margin-inline: auto;
    color: var(--c-text-muted);
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
}
.stepsrow__arrow {
    flex: 0 0 auto;
    align-self: center;
    width: var(--s-8);
    height: 1.5px;
    margin-top: 28px;
    background: repeating-linear-gradient(90deg,
        var(--c-smoke-deep) 0 6px, transparent 6px 11px);
}
.stepsrow__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4) var(--s-8);
    margin-top: var(--s-10);
    padding-top: var(--s-8);
    border-top: var(--bd-hair);
}
.stepsrow__foot .lede { margin: 0; max-width: 46ch; }

@media (max-width: 760px) {
    .stepsrow { flex-direction: column; align-items: stretch; }
    .stepsrow__arrow { display: none; }
    .stepsrow__item { text-align: left; display: flex; gap: var(--s-4); align-items: flex-start; }
    .stepsrow__icon { margin: 0; flex: none; }
    .stepsrow__text { margin-inline: 0; max-width: none; }
}

/* =============================================================================
   X. BẢNG GIÁ — viền vàng, huy hiệu
   ========================================================================== */
.pricing--gold {
    position: relative;
    background: var(--c-paper);
    border: 1.5px solid var(--c-amber-bright);
    box-shadow: 0 0 0 4px var(--c-amber-wash);
}
.pricing__badge {
    display: inline-block;
    margin-bottom: var(--s-3);
    padding: 4px var(--s-3);
    border-radius: var(--r-pill);
    background: var(--c-ink);
    color: var(--c-amber-bright);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* =============================================================================
   Y. HAI THỂ LOẠI THẺ — trục phân nhánh thật (SmoCardKind), không phải giá
   -----------------------------------------------------------------------------
   Tham khảo bố cục "2 card cạnh nhau, 1 card nổi bật viền vàng" của ảnh mẫu,
   nhưng đổi trục: không phải Basic/Premium theo GIÁ, mà là Thường/BNI theo
   BỘ KHỐI — đúng với SmoCardKind đã có trong SectionRegistry. Cùng giá 500k.
   ========================================================================== */
.kindpick { margin-top: var(--s-16); }
.kindpick__head { margin: 0 0 var(--s-2); font-size: var(--fs-h3); text-align: center; }
.kindpick__lead {
    max-width: 52ch;
    margin: 0 auto var(--s-8);
    text-align: center;
    color: var(--c-text-muted);
    font-size: var(--fs-sm);
}
.kindpick__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-6);
}
.kindcard {
    padding: var(--s-6);
    background: var(--c-smoke);
    border: 1px solid var(--c-smoke-deep);
    border-radius: var(--r-lg);
}
.kindcard--bni {
    background: var(--c-paper);
    border: 1.5px solid var(--c-amber-bright);
    box-shadow: 0 0 0 4px var(--c-amber-wash);
}
.kindcard__badge {
    display: inline-block;
    padding: 4px var(--s-3);
    border-radius: var(--r-pill);
    background: var(--c-ink);
    color: var(--c-text-onink);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.kindcard__badge--gold { color: var(--c-amber-bright); }
.kindcard__price {
    margin: var(--s-4) 0 var(--s-2);
    font-size: var(--fs-h3);
    font-weight: 800;
}
.kindcard__price span { font-size: var(--fs-sm); font-weight: 400; color: var(--c-text-muted); }
.kindcard__who {
    margin: 0 0 var(--s-5);
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
    min-height: 2.6em;
}
.kindcard__list {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    margin: 0 0 var(--s-6);
    padding: 0;
    list-style: none;
}
.kindcard__list li { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-sm); }
.kindcard__list .is-yes { flex: none; width: 16px; height: 16px; color: var(--c-success); }
.kindcard .btn { width: 100%; }

@media (max-width: 720px) {
    .kindpick__row { grid-template-columns: 1fr; }
}

/* =============================================================================
   Z. "MỘT CHẠM LÀ ĐỦ" — chuỗi thẻ NFC → điện thoại → 5 việc xảy ra
   -----------------------------------------------------------------------------
   Bản tham khảo dùng ảnh chụp tay cầm thẻ NFC thật. Không có công cụ tạo ảnh
   nên đổi sang thẻ nghiêng dựng bằng CSS (giữ cảm giác "vật thể", không phẳng
   như icon) — chuỗi hành động (chạm → mở thẻ → 5 việc) giữ nguyên như tham khảo.
   ========================================================================== */
.touch { background: var(--c-ink); color: var(--c-text-onink); overflow: hidden; }
.touch__head { text-align: center; max-width: 40rem; margin: 0 auto var(--s-12); }
.touch__eyebrow {
    margin: 0 0 var(--s-2);
    font-size: var(--fs-label);
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--c-amber-bright);
}
.touch__head h2 { color: var(--c-text-onink); margin: 0; }

.touch__chain {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--s-6) var(--s-4);
}

/* Thẻ NFC nghiêng nhẹ, như đang cầm trên tay để chạm. */
.touch__nfc {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    width: 148px;
    aspect-ratio: 1.586;
    padding: var(--s-4);
    border-radius: var(--r-md);
    background: linear-gradient(155deg, var(--c-ink-soft), var(--c-ink) 70%);
    border: 1px solid rgba(217, 154, 34, .35);
    box-shadow: var(--sh-lift);
    color: var(--c-amber-bright);
    transform: rotate(-6deg);
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    line-height: 1.4;
}

.touch__phone {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-2);
    width: 76px;
    height: 148px;
    padding: var(--s-3) var(--s-2);
    border-radius: 20px;
    background: var(--c-ink-soft);
    border: 2px solid rgba(233, 235, 230, .18);
}
.touch__phone-bar { width: 28px; height: 4px; border-radius: var(--r-pill); background: rgba(233, 235, 230, .3); }
.touch__phone-name { margin-top: auto; margin-bottom: var(--s-2); font-size: 11px; color: var(--c-text-onink-mute); }

.touch__link {
    flex: 1 1 32px;
    max-width: 56px;
    height: 1.5px;
    background: repeating-linear-gradient(90deg,
        rgba(233, 235, 230, .35) 0 6px, transparent 6px 11px);
}

.touch__acts {
    display: flex;
    gap: var(--s-6);
    margin: 0;
    padding: 0;
    list-style: none;
}
.touch__acts li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-2);
    font-size: 11px;
    color: var(--c-text-onink-mute);
    max-width: 74px;
    text-align: center;
}
.touch__icon {
    display: grid;
    place-items: center;
    width: 48px; height: 48px;
    border-radius: var(--r-pill);
    background: var(--c-ink-soft);
    border: 1px solid rgba(233, 235, 230, .14);
    color: var(--c-text-onink);
}

@media (max-width: 900px) {
    .touch__chain { flex-direction: column; }
    .touch__link { width: 1.5px; height: 24px; max-width: none;
        background: repeating-linear-gradient(180deg,
            rgba(233, 235, 230, .35) 0 6px, transparent 6px 11px); }
    .touch__acts { flex-wrap: wrap; justify-content: center; }
}

/* =============================================================================
   AA. CHIP LỌC TRÊN DẢI MẪU THẺ
   -----------------------------------------------------------------------------
   Bản tham khảo có 7 tab danh mục cạnh dải carousel. Ở đây chỉ có 3 ví dụ minh
   hoạ thật nên dùng đúng 3 chip, cuộn-tới thay vì lọc ẩn/hiện — không bịa thêm
   nhân vật cho tab rỗng.
   ========================================================================== */
.cardshot-filter {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    margin-bottom: var(--s-6);
}
.cardshot-filter__chip {
    padding: 8px var(--s-4);
    border-radius: var(--r-pill);
    background: var(--c-smoke);
    border: 1px solid var(--c-smoke-deep);
    color: var(--c-text-muted);
    font-size: var(--fs-sm);
    font-weight: 600;
    text-decoration: none;
    transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.cardshot-filter__chip:hover { background: var(--c-amber-wash); color: var(--c-amber); }
.cardshot-filter__chip.is-active { background: var(--c-ink); color: var(--c-text-onink); border-color: var(--c-ink); }

/* Neo cuộn-tới không bị khuất dưới thanh điều hướng dính đầu trang. */
.cardshot[id] { scroll-margin-top: calc(var(--s-16) + var(--s-8)); }