/* =============================================================================
   SMO CARD — HOMEPAGE V2  ·  Warm golden redesign
   -----------------------------------------------------------------------------
   CSS riêng cho trang chủ, nạp qua @section Styles trong Index.cshtml.
   Phụ thuộc: tokens.css + marketing.css (nạp trước bởi _LayoutMarketing).
   ========================================================================== */

/* --- Scoped color overrides cho trang chủ --------------------------------- */
/* Bảng màu lấy bằng cách ĐO PIXEL trên ảnh thiết kế
   (reference/landing-page-reference.png), không ước lượng bằng mắt.

   Phát hiện quan trọng nhất: thiết kế gốc gần như là một trang TRẮNG.
   Đo nền từng mục ở lề trái cho ra:

       hero        #FCF9F6 → #FDFAF7   (ấm rất nhẹ, gần trắng)
       đáy hero    #FEF8EE            (chỉ một vệt ấm mỏng ở đây)
       một chạm    #FEFEFE            (trắng)
       mẫu thẻ     #FBFAFB            (gần trắng, hơi lạnh)
       bảng giá    #FAF8F5
       dải logo    #FEFEFE

   Bản trước phủ be #FCFAF8 / #F9F5ED lên toàn trang nên nhìn đục. Ảnh gốc
   sang là nhờ NỀN TRẮNG SẠCH + vàng đồng đậm + ảnh sản phẩm có màu, chứ
   không phải nhờ nền be.

       vàng nhấn   #B88028   (bản trước #B88028 — nhạt và ngả chanh hơn hẳn)
       navy        #101830   (bản trước #101028 — sát, chỉnh nhẹ)            */
#page-home {
    --c-smoke: #FCFAF8;
    --c-smoke-deep: #ECE6DF;
    --c-gold: #B88028;
    --c-gold-deep: #8F621C;
    --c-gold-light: #F3E7D9;
    --c-gold-wash: #FDF7EF;

    /* Vệt ấm chỉ dùng ở đáy hero, không phải nền mặc định của mọi mục. */
    --c-warm: #FEF8EE;
    --c-ink: #101830;
}

/* --- Shared: eyebrow ------------------------------------------------------- */
.eyebrow {
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--c-gold, #B8860B);
}

/* --- Button variants ------------------------------------------------------- */
.btn--outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    min-height: 48px;
    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-decoration: none;
    cursor: pointer;
    background: transparent;
    color: var(--c-text);
    border: 1.5px solid var(--c-ink);
    transition: background var(--dur-1), color var(--dur-1);
}
.btn--outline:hover {
    background: rgba(16, 23, 40, 0.06);
    color: var(--c-text);
}

.btn--gold {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    min-height: 48px;
    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-decoration: none;
    cursor: pointer;
    background: linear-gradient(135deg, #B88028 0%, #C08A2E 100%);
    color: #fff;
    border: none;
    transition: background var(--dur-1), transform var(--dur-1);
}
.btn--gold:hover {
    background: linear-gradient(135deg, #8F621C 0%, #9A6C20 100%);
    color: #fff;
}
.btn--gold:active { transform: translateY(1px); }

/* =============================================================================
   HERO WARM
   ========================================================================== */
.hero-warm {
    position: relative;
    padding: clamp(3rem, 1.6rem + 4vw, 5.5rem) 0 clamp(4rem, 2rem + 5vw, 7rem);
    /* Đo trên ảnh thiết kế: hero gần như trắng (#FCF9F6 → #FDFAF7), chỉ ấm
       lên ở sát đáy (#FEF8EE). Bản trước dừng ở #FEF8EE — be đậm gấp nhiều
       lần thiết kế, và đó là lý do chính khiến cả trang nhìn đục. */
    background: linear-gradient(178deg, #FCF9F6 0%, #FDFAF7 46%, #FEF8EE 100%);
    overflow: hidden;
}

/* Warm golden glow effects */
.hero-warm__glow {
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(184, 128, 40, 0.18) 0%, rgba(184, 128, 40, 0.06) 40%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}
.hero-warm__glow:first-child {
    top: 20%;
    right: 5%;
}
.hero-warm__glow--2 {
    top: 60%;
    right: 25%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(184, 128, 40, 0.12) 0%, transparent 60%);
}

.hero-warm__grid {
    display: grid;
    grid-template-columns: 55% 45%;
    gap: var(--s-10);
    align-items: center;
    position: relative;
    z-index: 1;
}

.hero-warm__content {
    max-width: 560px;
}

/* Badge */
.hero-warm__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    background: rgba(184, 128, 40, 0.12);
    border: 1px solid rgba(184, 128, 40, 0.25);
    border-radius: var(--r-pill);
    padding: var(--s-2) var(--s-4);
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--c-text);
    margin-bottom: var(--s-6);
}
.hero-warm__star {
    color: #C08A2E;
    font-size: 1rem;
}

/* Headline */
.hero-warm h1 {
    font-size: var(--fs-display);
    line-height: var(--lh-display);
    letter-spacing: var(--ls-display);
    color: var(--c-ink);
    margin-bottom: var(--s-6);
}

.hero-warm__desc {
    font-size: var(--fs-body-lg);
    color: var(--c-text-muted);
    margin-bottom: var(--s-8);
    max-width: 44ch;
    line-height: var(--lh-body);
}

/* CTA buttons */
.hero-warm__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-4);
    margin-bottom: var(--s-10);
}

/* Feature pills */
.hero-warm__pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-6);
    list-style: none;
    padding: 0;
}
.hero-warm__pills li {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
}
.hero-warm__pills svg {
    color: var(--c-indigo);
    flex-shrink: 0;
}

/* --- Hero visual (right) -------------------------------------------------- */
.hero-warm__visual {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 560px;
}

/* Golden decorative orbs */
.hero-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}
.hero-orb--lg {
    width: 340px;
    height: 340px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(184, 128, 40, 0.18) 0%, rgba(184, 128, 40, 0.04) 60%, transparent 80%);
    filter: blur(20px);
}
.hero-orb--md {
    width: 120px;
    height: 120px;
    top: 10%;
    left: 15%;
    background: radial-gradient(circle, rgba(184, 128, 40, 0.25) 0%, transparent 70%);
    filter: blur(15px);
    animation: orb-float 6s ease-in-out infinite;
}
.hero-orb--sm {
    width: 70px;
    height: 70px;
    bottom: 18%;
    left: 10%;
    background: radial-gradient(circle, rgba(184, 128, 40, 0.30) 0%, transparent 70%);
    filter: blur(10px);
    animation: orb-float 5s ease-in-out infinite 1.5s;
}
@keyframes orb-float {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-12px) scale(1.08); }
}

/* Phone mockup — larger, more detailed */
.phone-hero__frame {
    width: 320px;
    background: #fff;
    border-radius: 40px;
    padding: 8px;
    box-shadow:
        0 4px 12px rgba(0,0,0,0.06),
        0 20px 50px rgba(0,0,0,0.12),
        0 40px 100px rgba(0,0,0,0.10);
    position: relative;
    z-index: 2;
}
.phone-hero__notch {
    position: absolute;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    width: 56px;
    height: 5px;
    background: rgba(16, 24, 48, .28);
    border-radius: 999px;
}
.phone-hero__scroll {
    border-radius: 0 0 32px 32px;
    overflow: hidden;
    background: #fff;
}

/* Cover — golden gradient with skyline silhouette */
.phone-hero__cover {
    height: 90px;
    background: linear-gradient(135deg, #1B2438 0%, #2F4A83 40%, #4A6BAF 70%, #C08A2E 100%);
    position: relative;
    overflow: hidden;
}
.phone-hero__skyline {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 45px;
    background:
        linear-gradient(90deg,
            transparent 0%,
            transparent 5%,
            rgba(255,255,255,0.08) 5%,
            rgba(255,255,255,0.08) 8%,
            transparent 8%,
            transparent 12%,
            rgba(255,255,255,0.06) 12%,
            rgba(255,255,255,0.06) 14%,
            transparent 14%,
            transparent 20%,
            rgba(255,255,255,0.10) 20%,
            rgba(255,255,255,0.10) 25%,
            transparent 25%,
            transparent 30%,
            rgba(255,255,255,0.07) 30%,
            rgba(255,255,255,0.07) 33%,
            transparent 33%,
            transparent 40%,
            rgba(255,255,255,0.12) 40%,
            rgba(255,255,255,0.12) 48%,
            transparent 48%,
            transparent 55%,
            rgba(255,255,255,0.06) 55%,
            rgba(255,255,255,0.06) 58%,
            transparent 58%,
            transparent 65%,
            rgba(255,255,255,0.09) 65%,
            rgba(255,255,255,0.09) 70%,
            transparent 70%,
            transparent 78%,
            rgba(255,255,255,0.08) 78%,
            rgba(255,255,255,0.08) 82%,
            transparent 82%,
            transparent 88%,
            rgba(255,255,255,0.11) 88%,
            rgba(255,255,255,0.11) 95%,
            transparent 95%
        );
    mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, transparent 100%);
    -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, transparent 100%);
}

/* Profile */
.phone-hero__profile {
    text-align: center;
    padding: 0 20px;
    margin-top: -28px;
    margin-bottom: 10px;
}
.phone-hero__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--c-indigo), #4A6BAF);
    color: #fff;
    font-weight: 700;
    font-size: 1.4rem;
    margin-bottom: 8px;
    border: 4px solid #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.phone-hero__name {
    font-family: var(--ff-display);
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--c-ink);
    margin: 0;
}
.phone-hero__role {
    font-size: 0.75rem;
    color: var(--c-text-muted);
    margin: 3px 0 0;
}
.phone-hero__org {
    font-size: 0.75rem;
    color: var(--c-gold);
    font-weight: 600;
    margin: 2px 0 0;
}

/* Quote */
.phone-hero__quote {
    font-size: 0.7rem;
    color: var(--c-text-muted);
    font-style: italic;
    margin: 10px 20px;
    padding: 10px 12px;
    background: rgba(184, 128, 40, 0.08);
    border-radius: var(--r-sm);
    text-align: center;
    line-height: 1.5;
    border-left: 3px solid rgba(184, 128, 40, 0.3);
}

/* Action buttons */
.phone-hero__actions {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 12px 20px;
}
.phone-hero__act {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-size: 0.65rem;
    color: var(--c-text-muted);
}
.phone-hero__act svg {
    width: 34px;
    height: 34px;
    padding: 7px;
    background: var(--c-indigo-wash, #E4E9F3);
    border-radius: 50%;
    color: var(--c-indigo);
}

/* Save button */
.phone-hero__save {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 10px 20px;
    padding: 10px 0;
    background: var(--c-indigo);
    color: #fff;
    border-radius: var(--r-sm);
    font-size: 0.8rem;
    font-weight: 600;
}
.phone-hero__save svg { color: #fff; }

/* Social links */
.phone-hero__socials {
    display: flex;
    justify-content: center;
    gap: 16px;
    padding: 12px 20px 22px;
    font-size: 0.6rem;
    color: var(--c-text-muted);
}
.phone-hero__socials span {
    display: flex;
    align-items: center;
    gap: 3px;
}

/* --- Floating badges ------------------------------------------------------ */
.hero-warm__float {
    position: absolute;
    display: flex;
    align-items: center;
    gap: var(--s-3);
    background: #fff;
    border-radius: var(--r-lg);
    padding: var(--s-3) var(--s-5);
    box-shadow:
        0 4px 8px rgba(0,0,0,0.06),
        0 12px 32px rgba(0,0,0,0.10);
    z-index: 3;
    animation: float-gentle 4s ease-in-out infinite;
}
.hero-warm__float strong {
    display: block;
    font-weight: 700;
    font-size: var(--fs-sm);
    color: var(--c-ink);
}
.hero-warm__float span {
    font-size: var(--fs-label);
    color: var(--c-text-muted);
    display: block;
    line-height: 1.3;
}

/* NFC badge — round icon with signal */
.hero-warm__nfc-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--c-indigo);
    flex-shrink: 0;
}
.hero-warm__nfc-icon svg {
    color: #fff;
    width: 20px;
    height: 20px;
}

/* QR badge */
.hero-warm__qr-icon {
    color: var(--c-ink);
    flex-shrink: 0;
}

.hero-warm__float--nfc {
    top: 5%;
    right: -12%;
}
.hero-warm__float--qr {
    bottom: 8%;
    right: -15%;
    animation-delay: -2s;
}

@keyframes float-gentle {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* =============================================================================
   TOUCH V2
   ========================================================================== */
.touch-v2__head {
    text-align: center;
    margin-bottom: var(--s-12);
}
.touch-v2__head .eyebrow {
    margin-bottom: var(--s-3);
}

.touch-v2__chain {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-6);
}

.touch-v2__nfc {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-6) var(--s-8);
    background: var(--c-ink);
    color: var(--c-text-onink);
    border-radius: var(--r-md);
    text-align: center;
    min-width: 110px;
}
.touch-v2__nfc svg { color: var(--c-amber-bright, #D99A22); }
.touch-v2__nfc strong {
    font-size: var(--fs-body);
    color: #fff;
}
.touch-v2__nfc span {
    font-size: var(--fs-label);
    color: var(--c-text-onink-mute, #A8AEBC);
    line-height: 1.3;
}

.touch-v2__connector {
    display: flex;
    align-items: center;
    color: var(--c-text-muted);
    opacity: 0.5;
}

.touch-v2__phone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-6) var(--s-8);
    background: #fff;
    border: var(--bd-solid);
    border-radius: var(--r-lg);
    text-align: center;
    min-width: 90px;
    box-shadow: var(--sh-1);
}
.touch-v2__phone-bar {
    display: block;
    width: 40px;
    height: 5px;
    background: var(--c-ink);
    border-radius: var(--r-pill);
}
.touch-v2__phone-text {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--c-text);
}

.touch-v2__acts {
    display: flex;
    gap: var(--s-6);
    list-style: none;
    padding: 0;
}
.touch-v2__acts li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-2);
    font-size: var(--fs-sm);
    color: var(--c-text);
    text-align: center;
    min-width: 70px;
}
.touch-v2__act-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #fff;
    border: var(--bd-solid);
    color: var(--c-indigo);
    box-shadow: var(--sh-1);
    transition: box-shadow var(--dur-2), transform var(--dur-2);
}
.touch-v2__acts li:hover .touch-v2__act-icon {
    box-shadow: var(--sh-2);
    transform: translateY(-2px);
}

/* =============================================================================
   GALLERY
   ========================================================================== */
.gallery__head {
    text-align: center;
    margin-bottom: var(--s-12);
}
.gallery__head .eyebrow {
    margin-bottom: var(--s-3);
}

.gallery__layout {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: var(--s-10);
    align-items: start;
}

/* Sidebar categories */
.gallery__cats {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.gallery__cat {
    padding: var(--s-3) var(--s-4);
    border-radius: var(--r-sm);
    font-size: var(--fs-body);
    color: var(--c-text-muted);
    cursor: pointer;
    transition: background var(--dur-1), color var(--dur-1);
    border-left: 3px solid transparent;
    line-height: 1.4;
}
.gallery__cat:hover {
    background: rgba(184, 128, 40, 0.08);
    color: var(--c-text);
}
.gallery__cat.is-active {
    background: rgba(184, 128, 40, 0.12);
    color: var(--c-ink);
    font-weight: 600;
    border-left-color: var(--c-gold, #B88028);
}

/* Card scroll */
.gallery__scroll {
    display: flex;
    gap: var(--s-6);
    overflow-x: auto;
    padding-bottom: var(--s-4);
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}
.gallery__scroll::-webkit-scrollbar { height: 4px; }
.gallery__scroll::-webkit-scrollbar-track { background: transparent; }
.gallery__scroll::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 4px; }

/* Gallery card (phone-like preview) */
.gcard {
    flex: 0 0 210px;
    background: #fff;
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--sh-2);
    text-decoration: none;
    color: var(--c-text);
    scroll-snap-align: start;
    transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
    display: flex;
    flex-direction: column;
}
.gcard:hover {
    transform: translateY(-6px);
    box-shadow: var(--sh-lift);
    color: var(--c-text);
}

.gcard__cover {
    display: block;
    height: 72px;
    background: linear-gradient(135deg, #C08A2E 0%, #E8C97A 100%);
}
.gcard__cover--gold { background: linear-gradient(135deg, #C08A2E 0%, #E8C97A 100%); }
.gcard__cover--green { background: linear-gradient(135deg, #3A7B55 0%, #6DAF7E 100%); }
.gcard__cover--teal { background: linear-gradient(135deg, #2A7A7A 0%, #4BB0A8 100%); }
.gcard__cover--dark { background: linear-gradient(135deg, #2D3748 0%, #4A5568 100%); }

.gcard__body {
    padding: var(--s-4) var(--s-3);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    gap: var(--s-2);
}

.gcard__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--c-indigo), #4A6BAF);
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    margin-top: -30px;
    border: 3px solid #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    flex-shrink: 0;
}
.gcard__avatar--rose { background: linear-gradient(135deg, #C06080, #D88090); }
.gcard__avatar--teal { background: linear-gradient(135deg, #2A7A7A, #4BB0A8); }
.gcard__avatar--dark { background: linear-gradient(135deg, #2D3748, #4A5568); }

.gcard__name {
    font-weight: 700;
    font-size: var(--fs-sm);
    color: var(--c-ink);
    display: block;
}
.gcard__role {
    font-size: var(--fs-label);
    color: var(--c-text-muted);
    display: block;
    line-height: 1.4;
}
.gcard__quote {
    font-size: 0.65rem;
    font-style: italic;
    color: var(--c-text-muted);
    display: block;
    padding: 4px 6px;
    background: rgba(184, 128, 40, 0.06);
    border-radius: var(--r-xs);
    line-height: 1.4;
}
.gcard__tag {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 2px 8px;
    background: rgba(184, 128, 40, 0.15);
    color: #8F621C;
    border-radius: var(--r-xs);
}
.gcard__icons {
    display: flex;
    gap: var(--s-2);
}
.gcard__icons span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--c-indigo-wash, #E4E9F3);
    color: var(--c-indigo);
}
.gcard__save {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    background: var(--c-indigo);
    color: #fff;
    border-radius: var(--r-sm);
    font-size: var(--fs-label);
    font-weight: 600;
    margin-top: auto;
}

/* =============================================================================
   PRICING V2
   ========================================================================== */
.pricing-v2__head {
    margin-bottom: var(--s-12);
}
.pricing-v2__head .eyebrow {
    margin-bottom: var(--s-3);
}

.pricing-v2__layout {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: var(--s-12);
    align-items: center;
}

/* Dark card visual */
.pricing-v2__visual {
    text-align: center;
}
.pricing-v2__darkcard-wrap {
    position: relative;
    width: 320px;
    height: 200px;
    margin: 0 auto var(--s-6);
}
.pricing-v2__darkcard {
    position: absolute;
    width: 260px;
    height: 160px;
    border-radius: var(--r-card);
    box-shadow: var(--sh-card);
    display: flex;
    align-items: flex-end;
    padding: var(--s-4);
}
.pricing-v2__darkcard:first-child {
    background: linear-gradient(135deg, #1B2438 0%, #2F4A83 100%);
    top: 20px;
    left: 0;
    transform: rotate(-8deg);
    opacity: 0.6;
}
.pricing-v2__darkcard--front {
    background: linear-gradient(135deg, #2F4A83 0%, #B88028 100%) !important;
    top: 0;
    left: 50px;
    transform: rotate(4deg);
    opacity: 1 !important;
}
.pricing-v2__darkcard-label {
    color: rgba(255,255,255,0.8);
    font-family: var(--ff-display);
    font-weight: 800;
    font-size: var(--fs-body);
    letter-spacing: 0.05em;
}
.pricing-v2__caption {
    font-size: var(--fs-body-lg);
    color: var(--c-text);
    line-height: 1.5;
}
.pricing-v2__caption strong {
    color: var(--c-gold, #B88028);
    font-weight: 700;
}

/* Pricing cards grid */
.pricing-v2__plans {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-6);
}

.pcard {
    background: #fff;
    border-radius: var(--r-lg);
    padding: var(--s-8);
    border: 1.5px solid var(--c-smoke-deep);
    position: relative;
    display: flex;
    flex-direction: column;
    transition: box-shadow var(--dur-2);
}
.pcard:hover { box-shadow: var(--sh-2); }

.pcard--premium {
    border-color: var(--c-gold, #B88028);
    box-shadow: 0 0 0 1px var(--c-gold, #B88028), var(--sh-2);
}

.pcard__badge {
    position: absolute;
    top: calc(-1 * var(--s-3));
    right: var(--s-4);
    background: linear-gradient(135deg, #B88028, #C08A2E);
    color: #fff;
    font-size: var(--fs-label);
    font-weight: 600;
    padding: var(--s-1) var(--s-3);
    border-radius: var(--r-sm);
    white-space: nowrap;
}

.pcard__name {
    font-family: var(--ff-display);
    font-size: var(--fs-h3);
    font-weight: 800;
    color: var(--c-ink);
    margin-bottom: 2px;
}
.pcard__who {
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
    margin-bottom: var(--s-4);
}
.pcard__price {
    font-family: var(--ff-display);
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--c-ink);
    margin-bottom: var(--s-6);
    line-height: 1;
}
.pcard__currency {
    font-size: 1rem;
    font-weight: 600;
}
.pcard__period {
    font-size: var(--fs-sm);
    font-weight: 400;
    color: var(--c-text-muted);
}

.pcard__list {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--s-8);
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    flex: 1;
}
.pcard__list li {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    font-size: var(--fs-sm);
    line-height: 1.4;
}
.pcard__list svg {
    color: var(--c-success, #14663C);
    flex-shrink: 0;
}

.pcard .btn,
.pcard .btn--outline,
.pcard .btn--gold {
    width: 100%;
    text-align: center;
    justify-content: center;
}

/* =============================================================================
   TRUST BAR
   ========================================================================== */
.trust-bar {
    padding: var(--s-10) 0;
    background: var(--c-paper, #fff);
    border-top: var(--bd-hair);
}
.trust-bar__label {
    text-align: center;
    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);
}
.trust-bar__logos {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--s-8);
}
.trust-bar__logo {
    font-family: var(--ff-display);
    font-weight: 800;
    font-size: var(--fs-body);
    color: var(--c-text-muted);
    opacity: 0.5;
    letter-spacing: 0.03em;
    white-space: nowrap;
}
.trust-bar__logo--alt {
    font-style: italic;
}
.trust-bar__count {
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
    text-align: center;
    line-height: 1.4;
    border-left: 1.5px solid var(--c-smoke-deep);
    padding-left: var(--s-6);
}
.trust-bar__count strong {
    color: var(--c-ink);
    font-weight: 700;
    font-size: var(--fs-body);
}

/* .site-header__login đã chuyển sang marketing.css — nó thuộc header dùng
   chung, mà /lien-he và /gioi-thieu không nạp file này nên liên kết bị mất
   kiểu hoàn toàn ở đó. */

/* =============================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
    .hero-warm__grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--s-8);
    }
    .hero-warm__float--nfc { right: -2%; }
    .hero-warm__float--qr { right: -4%; }
    .pricing-v2__layout {
        grid-template-columns: 1fr;
    }
    .pricing-v2__visual {
        display: none;
    }
}

@media (max-width: 899.98px) {
    .hero-warm {
        padding: clamp(4rem, 2rem + 4vw, 6rem) 0;
    }
    .hero-warm__grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .hero-warm__content {
        max-width: 100%;
    }
    /* Truoc day khoi hinh dat order:0 nen dien thoai nhay len TREN tieu de.
       Tren trang ban hang, cau tieu de phai la thu doc duoc dau tien. */
    .hero-warm__visual {
        min-height: 420px;
        margin-top: var(--s-8);
    }
    .hero-warm__desc {
        max-width: 100%;
        margin-inline: auto;
    }
    .hero-warm__ctas {
        justify-content: center;
    }
    .hero-warm__pills {
        justify-content: center;
    }
    .hero-warm__float--nfc {
        top: 2%;
        right: 5%;
    }
    .hero-warm__float--qr {
        bottom: 5%;
        right: 5%;
    }

    /* Touch */
    .touch-v2__chain {
        flex-wrap: wrap;
        gap: var(--s-4);
    }
    .touch-v2__nfc,
    .touch-v2__phone {
        padding: var(--s-4) var(--s-6);
    }
    .touch-v2__acts {
        flex-wrap: wrap;
        justify-content: center;
    }

    /* Gallery */
    .gallery__layout {
        grid-template-columns: 1fr;
        gap: var(--s-6);
    }
    .gallery__cats {
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--s-2);
    }
    .gallery__cat {
        border-left: none;
        border-bottom: 3px solid transparent;
        padding: var(--s-2) var(--s-3);
        font-size: var(--fs-sm);
    }
    .gallery__cat.is-active {
        border-left-color: transparent;
        border-bottom-color: var(--c-gold, #B88028);
    }

    /* Pricing */
    .pricing-v2__plans {
        grid-template-columns: 1fr;
    }

    /* Trust */
    .trust-bar__logos {
        gap: var(--s-4) var(--s-6);
    }
}

@media (max-width: 599.98px) {
    .hero-warm__visual {
        min-height: 380px;
    }
    .phone-hero__frame {
        width: 260px;
    }
    .phone-hero__cover {
        height: 60px;
    }
    .hero-warm__float {
        padding: var(--s-2) var(--s-3);
    }
    .hero-warm__nfc-icon {
        width: 32px;
        height: 32px;
    }
    .hero-warm__float--nfc {
        right: 0;
    }
    .hero-warm__float--qr {
        right: 0;
    }
    .gcard {
        flex: 0 0 180px;
    }
    .gcard__cover {
        height: 56px;
    }
    .pcard {
        padding: var(--s-6);
    }
    .touch-v2__connector {
        display: none;
    }
    .trust-bar__count {
        border-left: none;
        padding-left: 0;
        border-top: 1px solid var(--c-smoke-deep);
        padding-top: var(--s-3);
        width: 100%;
    }
}

/* --- Dải cam kết (thay cho dải logo khách hàng bịa) ------------------------
   Giữ đúng nhịp ngang của dải logo trong ảnh tham khảo, nhưng nội dung là thứ
   kiểm chứng được: pháp nhân, cam kết kỹ thuật, số điện thoại gọi được. */
.trust-bar__facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--s-8);
    align-items: start;
}
.trust-bar__fact {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: var(--fs-label);
    line-height: var(--lh-label);
    color: var(--c-text-muted);
}
.trust-bar__fact strong {
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--c-text);
}
.trust-bar__fact::before {
    content: "";
    width: 22px;
    height: 2px;
    margin-bottom: var(--s-2);
    background: var(--c-gold, #B88028);
}

.pricing-v2__foot {
    margin: var(--s-8) 0 0;
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
    color: var(--c-text-muted);
    text-align: center;
}

@media (max-width: 860px) {
    .trust-bar__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); }
}
@media (max-width: 520px) {
    .trust-bar__facts { grid-template-columns: 1fr; }
}

/* --- Màn hình điện thoại = ảnh chụp thẻ thật ------------------------------
   Thay cho phần .phone-hero__scroll dựng bằng CSS trước đây. Ảnh sinh từ
   scratchpad/gen-cardshots.js (chụp /v/... ở 390×780, DPR 3, nén WebP).
   Chạy lại script đó khi thẻ mẫu đổi nội dung. */
.phone-hero__shot {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0 0 32px 32px;
    /* Ảnh thẻ dài hơn khung máy: cắt bớt đáy thay vì bóp méo tỉ lệ. */
    aspect-ratio: 390 / 700;
    object-fit: cover;
    object-position: top center;
    background: #fff;
}

/* Nghiêng nhẹ theo trục dọc cho ra khối, giống ảnh thiết kế — ảnh thiết kế là
   render 3D thật, CSS chỉ mô phỏng được gần đúng. */
.phone-hero {
    perspective: 1400px;
}
.phone-hero__frame {
    transform: rotateY(-9deg) rotateX(2deg) rotateZ(-1.5deg);
    transform-origin: 60% 50%;
}

@media (prefers-reduced-motion: reduce) {
    .phone-hero__frame { transform: none; }
}

/* =============================================================================
   HERO — VẬT THỂ NGHIÊNG THEO PHỐI CẢNH
   -----------------------------------------------------------------------------
   Bản trước: máy đứng gần như thẳng, thẻ NFC và QR là hai viên thuốc trắng bo
   tròn. Ảnh thiết kế là một cảnh 3D — máy nghiêng, thẻ NFC là vật thể navy dập
   nổi chữ vàng, thẻ QR là tấm trắng dày, tất cả đặt trên bệ tròn có bóng đổ.

   Vàng ở đây KHÔNG dùng một màu phẳng: kim loại chỉ ra chất khi có chuyển sắc
   sáng→tối. Dải --g-metal dùng lại cho chữ, viền, bệ và hạt.
   ========================================================================== */
#page-home {
    --g-metal: linear-gradient(135deg, #F0D79A 0%, #D9A83F 34%, #B88028 62%, #8F621C 100%);
    --g-metal-soft: linear-gradient(135deg, #F7E9C6 0%, #E0BC6A 50%, #C08A2E 100%);
}

.hero-warm__visual { perspective: 1500px; perspective-origin: 55% 45%; }

/* --- Máy: nghiêng rõ, không còn thẳng tưng ------------------------------- */
.phone-hero__frame {
    transform: translateX(-8%) rotateY(-21deg) rotateX(7deg) rotateZ(-3.5deg);
    transform-origin: 62% 50%;
    box-shadow:
        0 2px 6px rgba(16, 24, 48, .06),
        0 26px 44px rgba(16, 24, 48, .16),
        0 60px 120px rgba(16, 24, 48, .14);
}

/* --- Bệ tròn dưới máy ----------------------------------------------------- */
.hero-podium {
    position: absolute;
    left: 50%;
    bottom: 2%;
    width: 340px;
    height: 92px;
    transform: translateX(-46%) rotateX(74deg);
    border-radius: 50%;
    background:
        radial-gradient(closest-side, rgba(216, 168, 63, .34), rgba(216, 168, 63, .10) 62%, transparent 78%);
    filter: blur(3px);
    z-index: 0;
    pointer-events: none;
}

/* --- Thẻ NFC: vật thể navy, chữ vàng dập nổi ------------------------------ */
.nfc-card {
    position: absolute;
    top: 4%;
    right: -12%;
    z-index: 4;
    width: 178px;
    aspect-ratio: 1.586;                 /* tỉ lệ thẻ ID-1 thật */
    padding: var(--s-4) var(--s-5);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    border-radius: 12px;
    background: linear-gradient(145deg, #1B2A4A 0%, #101830 52%, #0A1226 100%);
    border: 1px solid rgba(240, 215, 154, .28);
    box-shadow:
        0 2px 4px rgba(16, 24, 48, .18),
        0 18px 34px rgba(16, 24, 48, .30);
    transform: rotateY(-24deg) rotateX(6deg) rotateZ(7deg);
}
.nfc-card__wave {
    width: 22px; height: 22px;
    margin-bottom: 2px;
    color: #E0BC6A;
}
.nfc-card__name {
    font-family: var(--ff-display);
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: .04em;
    /* Chuyển sắc kim loại cắt theo chữ — vàng phẳng nhìn như chữ nâu. */
    background: var(--g-metal-soft);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.nfc-card__sub {
    font-size: 11px;
    font-style: italic;
    color: rgba(224, 188, 106, .82);
}

/* --- Thẻ QR: tấm trắng dày, mã QUÉT ĐƯỢC --------------------------------- */
.qr-card {
    position: absolute;
    right: -14%;
    bottom: 6%;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: 150px;
    padding: var(--s-4) var(--s-4) var(--s-3);
    border-radius: 14px;
    background: #fff;
    box-shadow:
        0 2px 4px rgba(16, 24, 48, .08),
        0 18px 36px rgba(16, 24, 48, .16);
    transform: rotateY(-17deg) rotateX(5deg) rotateZ(-4deg);
}
.qr-card__img {
    width: 96px; height: 96px;
    display: block;
    margin-bottom: var(--s-2);
    image-rendering: pixelated;          /* QR phải sắc cạnh, không bị làm mượt */
}
.qr-card__title { font-size: var(--fs-sm); font-weight: 700; color: var(--c-ink); }
.qr-card__sub   { font-size: 11px; color: var(--c-text-muted); }

/* --- Hạt vàng: khối cầu có điểm sáng, không phải chấm bẹt ----------------- */
.hero-orb--md,
.hero-orb--sm {
    background: radial-gradient(circle at 32% 28%, #FBEFD0 0%, #E0BC6A 26%, #B88028 62%, #7C520F 100%);
    box-shadow: 0 10px 20px rgba(124, 82, 15, .28);
    filter: none;
}
.hero-orb--md { width: 26px; height: 26px; top: 16%; left: 6%; }
.hero-orb--sm { width: 16px; height: 16px; bottom: 26%; left: 2%; }

@media (max-width: 1100px) {
    .nfc-card { width: 148px; right: -2%; }
    .qr-card  { width: 128px; right: -4%; }
    .qr-card__img { width: 78px; height: 78px; }
}
@media (max-width: 860px) {
    .hero-warm__visual { perspective: none; }
    .phone-hero__frame,
    .nfc-card,
    .qr-card { transform: none; }
    .nfc-card { top: 2%; right: 0; }
    .qr-card  { bottom: 4%; right: 0; }
    .hero-podium { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-orb--md, .hero-orb--sm { animation: none; }
}

/* =============================================================================
   HERO — NỀN NHIỀU TẦNG, CÓ CHIỀU SÂU
   -----------------------------------------------------------------------------
   Bản trước: một gradient tuyến tính gần như trắng phẳng, không có gì ngoài
   chữ và cái máy — nên nhìn trống và bẹt.

   Chiều sâu ở đây dựng bằng bốn tầng chồng lên nhau, không dùng ảnh:
     1. Vân lưới chấm mờ           → cho bề mặt có chất, không bị "trắng chết"
     2. Ba quyền sáng màu lớn      → vàng + đào ấm + xanh khói lạnh.
                                     Có một sắc LẠNH đối lại hai sắc ấm thì mắt
                                     mới đọc ra chiều sâu; toàn ấm sẽ bị bệt.
     3. Vệt sáng chéo              → giả nguồn sáng đến từ trên-phải
     4. Nền ngà ấm                 → lớp đáy

   Vẫn là nền SÁNG: chỗ đặt chữ giữ độ tương phản của chữ đen trên nền ngà.
   ========================================================================== */
.hero-warm {
    background-color: #FDFAF5;
    background-image:
        /* 1. vân lưới chấm */
        radial-gradient(rgba(160, 130, 90, .07) 1px, transparent 1px),
        /* 2. quyền sáng */
        radial-gradient(46rem 34rem at 78% 18%, rgba(216, 168, 63, .30), transparent 62%),
        radial-gradient(38rem 30rem at 96% 72%, rgba(226, 158, 128, .26), transparent 64%),
        radial-gradient(42rem 32rem at 8% 82%, rgba(122, 148, 200, .20), transparent 66%),
        radial-gradient(30rem 24rem at 22% 6%, rgba(240, 215, 154, .28), transparent 68%),
        /* 3. vệt sáng chéo */
        linear-gradient(118deg, transparent 38%, rgba(255, 255, 255, .55) 52%, transparent 64%),
        /* 4. nền đáy */
        linear-gradient(168deg, #FEFCF8 0%, #FCF6EC 52%, #F7EDE0 100%);
    background-size: 22px 22px, auto, auto, auto, auto, auto, auto;
}

/* Vòng cung trang trí: hai đường tròn mảnh chạy sau phần hình, gợi sóng NFC
   lan ra. Đặt ở ::before/::after của mục nên không thêm thẻ rỗng vào DOM. */
.hero-warm::before,
.hero-warm::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(184, 128, 40, .16);
    pointer-events: none;
    z-index: 0;
}
.hero-warm::before {
    width: 46rem; height: 46rem;
    top: -12rem; right: -10rem;
}
.hero-warm::after {
    width: 30rem; height: 30rem;
    top: -2rem; right: -2rem;
    border-color: rgba(184, 128, 40, .10);
}

/* Quyền sáng ngay sau điện thoại để nó nổi khỏi nền thay vì dán lên nền. */
.hero-warm__glow {
    width: 30rem; height: 30rem;
    top: 46%; right: 16%;
    transform: translateY(-50%);
    background: radial-gradient(circle,
        rgba(255, 252, 246, .95) 0%,
        rgba(250, 236, 214, .70) 34%,
        rgba(216, 168, 63, .16) 62%,
        transparent 76%);
    filter: blur(6px);
}
.hero-warm__glow--2 {
    width: 18rem; height: 18rem;
    top: 74%; right: 44%;
    background: radial-gradient(circle, rgba(122, 148, 200, .20) 0%, transparent 66%);
    filter: blur(14px);
}

/* Thêm hạt vàng ở các độ sâu khác nhau: to–gần thì rõ, nhỏ–xa thì mờ. */
.hero-orb--lg {
    width: 34px; height: 34px;
    top: auto; left: auto;
    right: 6%; bottom: 12%;
    transform: none;
    background: radial-gradient(circle at 32% 28%, #FBEFD0 0%, #E0BC6A 26%, #B88028 62%, #7C520F 100%);
    box-shadow: 0 12px 24px rgba(124, 82, 15, .30);
    filter: none;
    opacity: .9;
}

/* Đường chân trời mảnh khép đáy hero, nối sang khối trắng bên dưới. */
.hero-warm > .container { position: relative; z-index: 2; }

/* --- Hero ở màn hẹp: thẻ NFC và QR xuống thành hàng dưới máy --------------
   Ở 390px, khung máy đã rộng 260px nên hai bên chỉ còn ~50px — đặt thẻ 148px
   ở đó thì chắc chắn đè lên mặt thẻ. Bỏ định vị tuyệt đối, xếp thành một hàng
   ngay dưới máy. */
@media (max-width: 860px) {
    .hero-warm__visual {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--s-6);
    }
    .phone-hero { order: 0; }

    .nfc-card,
    .qr-card {
        position: static;
        order: 1;
        transform: none;
    }
    .nfc-card { width: 172px; }
    .qr-card  { width: 132px; }

    /* Hai thẻ nằm cạnh nhau thành một hàng dưới máy. */
    .hero-warm__visual::after {
        content: none;
    }
    .hero-warm__visual {
        display: grid;
        grid-template-columns: repeat(2, auto);
        grid-template-areas:
            "phone phone"
            "nfc   qr";
        justify-content: center;
        align-items: start;
    }
    .phone-hero { grid-area: phone; justify-self: center; }
    .nfc-card   { grid-area: nfc; align-self: center; }
    .qr-card    { grid-area: qr; }

    /* Hạt vàng và bệ chỉ có nghĩa trong cảnh 3D — bỏ khi đã xếp phẳng. */
    .hero-orb, .hero-podium { display: none; }
}

/* =============================================================================
   BANNER V3 — màu rõ rệt, thẻ to hơn, sửa lỗi bo góc, trang trí không tròn
   ========================================================================== */

/* --- Nền: đậm và rõ hẳn, không còn gần-trắng ------------------------------
   Bản trước gần như trắng nên nhìn trống. Ở đây nền là dải kem–vàng thật sự
   có màu, đủ tương phản với khối trắng của mục kế tiếp để banner đứng tách ra. */
.hero-warm {
    background-color: #F6E9D2;
    background-image:
        /* vân lưới chấm */
        radial-gradient(rgba(140, 104, 48, .10) 1px, transparent 1px),
        /* quyền sáng */
        radial-gradient(44rem 34rem at 72% 16%, rgba(240, 202, 128, .85), transparent 62%),
        radial-gradient(36rem 30rem at 98% 74%, rgba(226, 154, 116, .55), transparent 66%),
        radial-gradient(40rem 34rem at 4% 88%, rgba(122, 148, 200, .34), transparent 68%),
        radial-gradient(26rem 22rem at 26% 4%, rgba(255, 246, 226, .95), transparent 70%),
        /* vệt sáng chéo */
        linear-gradient(118deg, transparent 36%, rgba(255, 252, 244, .60) 50%, transparent 62%),
        /* nền đáy */
        linear-gradient(164deg, #FDF4E4 0%, #F7E7CC 46%, #F1DCBE 100%);
    background-size: 24px 24px, auto, auto, auto, auto, auto, auto;
}

/* Vòng cung tròn: bỏ theo yêu cầu, thay bằng trang trí dạng đường thẳng. */
.hero-warm::before,
.hero-warm::after { display: none; }

/* --- Trang trí: lưới đường chéo + thanh vàng, không dùng hình tròn -------- */
.hero-deco {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}
/* Chùm sọc chéo mảnh ở góc trên phải */
.hero-deco::before {
    content: "";
    position: absolute;
    top: -6rem; right: -8rem;
    width: 34rem; height: 26rem;
    transform: rotate(-24deg);
    background: repeating-linear-gradient(90deg,
        rgba(184, 128, 40, .22) 0 2px, transparent 2px 16px);
    mask-image: linear-gradient(200deg, #000 8%, transparent 62%);
}
/* Khối chữ nhật bo góc, nghiêng — nhắc lại hình dáng tấm thẻ */
.hero-deco::after {
    content: "";
    position: absolute;
    left: -5rem; bottom: -7rem;
    width: 22rem; height: 14rem;
    border-radius: 20px;
    transform: rotate(-16deg);
    border: 1.5px solid rgba(184, 128, 40, .26);
    background: linear-gradient(135deg, rgba(255, 250, 240, .55), transparent 62%);
}
/* Ba thanh vàng ngắn xếp bậc thang, cạnh mép trái */
.hero-bars {
    position: absolute;
    left: 2.5rem; top: 44%;
    z-index: 0;
    display: grid;
    gap: 9px;
    pointer-events: none;
}
.hero-bars span {
    display: block;
    height: 4px;
    border-radius: 999px;
    background: var(--g-metal);
}
.hero-bars span:nth-child(1) { width: 54px; }
.hero-bars span:nth-child(2) { width: 34px; opacity: .72; }
.hero-bars span:nth-child(3) { width: 20px; opacity: .48; }

/* --- Thẻ to hơn và nghiêng rõ hơn ---------------------------------------- */
.phone-hero__frame {
    width: 360px;
    padding: 9px;
    border-radius: 44px;
    transform: translateX(-6%) rotateY(-26deg) rotateX(9deg) rotateZ(-5deg);
    box-shadow:
        0 2px 6px rgba(60, 40, 10, .10),
        0 30px 50px rgba(60, 40, 10, .20),
        0 70px 130px rgba(60, 40, 10, .18);
}

/* LỖI BO GÓC: ảnh chụp là hình chữ nhật vuông góc, khung máy bo 44px. Trước đây
   chỉ bo hai góc dưới của ảnh nên hai góc TRÊN thò vuông ra khỏi khung, và mép
   phải lộ một vệt. Bo cả bốn góc theo bán kính trong của khung và cắt tại
   chính khung máy. */
.phone-hero__frame { overflow: hidden; }
.phone-hero__shot {
    border-radius: 36px;
    aspect-ratio: 390 / 720;
}

.nfc-card { width: 196px; top: 2%; right: -14%; }
.qr-card  { width: 162px; right: -16%; bottom: 4%; }
.qr-card__img { width: 108px; height: 108px; }

/* Hạt tròn: bỏ hẳn theo yêu cầu "đừng cho thêm hình tròn nữa". */
.hero-orb { display: none; }
.hero-podium { display: none; }

@media (max-width: 1100px) {
    .phone-hero__frame { width: 300px; }
    .nfc-card { width: 164px; right: -6%; }
    .qr-card  { width: 138px; right: -8%; }
    .qr-card__img { width: 88px; height: 88px; }
}
@media (max-width: 860px) {
    .hero-deco, .hero-bars { display: none; }
    .phone-hero__frame { width: 300px; transform: none; }
}

/* =============================================================================
   "MỘT CHẠM LÀ ĐỦ" — dựng lại
   -----------------------------------------------------------------------------
   Bản trước: một hàng mỏng gồm hộp NFC vuông dùng nhầm icon ĐIỆN THOẠI, một ô
   trắng có gạch ngang ghi "Mở thẻ" (không gợi ra cái gì), hai mũi tên xám bé,
   rồi năm vòng tròn viền mảnh. Nhãn "Kết nối mạng xã hội" xuống dòng làm lệch
   cả hàng, và toàn khối trôi giữa một mảng trắng lớn.

   Bản này chia hai nửa có phân cấp rõ:
     trái  — khoảnh khắc chạm (thẻ NFC thật đè lên máy, sóng NFC lan sang)
     phải  — chạm xong thì làm được gì (5 dòng có tiêu đề và câu giải thích)
   ========================================================================== */
.touch-v2__head { max-width: 46rem; margin: 0 auto var(--s-12); text-align: center; }
.touch-v2__lede {
    margin: var(--s-4) 0 0;
    font-size: var(--fs-body-lg);
    line-height: var(--lh-body);
    color: var(--c-text-muted);
}

.touch-v2__split {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr);
    gap: var(--s-16);
    align-items: center;
}

/* --- Nửa trái: cảnh chạm -------------------------------------------------- */
.tapscene {
    position: relative;
    min-height: 380px;
    display: grid;
    place-items: center;
    perspective: 1200px;
}
/* Nền dịu phía sau để cảnh không trôi trên nền trắng */
.tapscene::before {
    content: "";
    position: absolute;
    inset: 8% 6%;
    border-radius: 28px;
    background:
        linear-gradient(148deg, rgba(184, 128, 40, .12), rgba(16, 24, 48, .06) 60%, transparent),
        repeating-linear-gradient(90deg, rgba(16, 24, 48, .05) 0 1px, transparent 1px 15px);
}

.tapscene__phone {
    position: relative;
    z-index: 1;
    width: 176px;
    padding: 8px;
    border-radius: 26px;
    background: #fff;
    border: 1px solid var(--c-smoke-deep);
    box-shadow: 0 2px 5px rgba(16, 24, 48, .07), 0 18px 34px rgba(16, 24, 48, .14);
    transform: translateX(-16%) rotateY(14deg) rotateZ(2deg);
}
.tapscene__speaker {
    display: block;
    width: 34px; height: 4px;
    margin: 2px auto 8px;
    border-radius: 999px;
    background: var(--c-smoke-deep);
}
.tapscene__screen {
    display: block;
    padding: var(--s-4) var(--s-3) var(--s-3);
    border-radius: 18px;
    background: linear-gradient(180deg, #F4F6FB, #fff 42%);
}
.tapscene__avatar {
    display: block;
    width: 40px; height: 40px;
    margin-bottom: var(--s-3);
    border-radius: 999px;
    background: linear-gradient(140deg, var(--c-indigo), #1B2A4A);
}
.tapscene__line {
    display: block;
    height: 7px;
    border-radius: 999px;
    background: var(--c-smoke-deep);
}
.tapscene__line--name { width: 76%; margin-bottom: 6px; background: #C9CEDA; }
.tapscene__line--role { width: 54%; margin-bottom: var(--s-4); }
.tapscene__cta {
    display: block;
    padding: 7px 0;
    border-radius: 8px;
    background: var(--c-indigo);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    text-align: center;
}

/* Thẻ NFC đè chéo lên máy */
.tapscene__card {
    position: absolute;
    z-index: 2;
    right: 4%;
    top: 16%;
    width: 186px;
    aspect-ratio: 1.586;
    padding: var(--s-4) var(--s-5);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    border-radius: 12px;
    background: linear-gradient(145deg, #1B2A4A 0%, #101830 52%, #0A1226 100%);
    border: 1px solid rgba(240, 215, 154, .28);
    box-shadow: 0 3px 6px rgba(16, 24, 48, .18), 0 22px 40px rgba(16, 24, 48, .30);
    transform: rotateY(-20deg) rotateX(6deg) rotateZ(-8deg);
}
.tapscene__wave { width: 22px; height: 22px; margin-bottom: 2px; color: #E0BC6A; }
.tapscene__name {
    font-family: var(--ff-display);
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: .04em;
    background: var(--g-metal-soft);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.tapscene__sub { font-size: 11px; font-style: italic; color: rgba(224, 188, 106, .82); }

/* Sóng NFC lan từ thẻ sang máy — ba vạch cong, đúng ký hiệu NFC. */
.tapscene__ripple {
    position: absolute;
    z-index: 3;
    left: 46%; top: 46%;
    display: flex;
    gap: 5px;
    transform: translate(-50%, -50%) rotate(-8deg);
}
.tapscene__ripple i {
    display: block;
    width: 5px;
    border-radius: 999px;
    background: var(--g-metal);
}
.tapscene__ripple i:nth-child(1) { height: 16px; opacity: .45; }
.tapscene__ripple i:nth-child(2) { height: 28px; opacity: .72; }
.tapscene__ripple i:nth-child(3) { height: 42px; }

/* --- Nửa phải: chạm xong làm được gì ------------------------------------- */
.touch-v2__subhead {
    margin: 0 0 var(--s-6);
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
}
.actlist { display: grid; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.actlist__item {
    display: flex;
    align-items: flex-start;
    gap: var(--s-4);
    padding: var(--s-4);
    border-radius: var(--r-md);
    border: 1px solid transparent;
    transition: background-color var(--dur-1) var(--ease-out),
                border-color var(--dur-1) var(--ease-out);
}
.actlist__item:hover {
    background: var(--c-gold-wash);
    border-color: rgba(184, 128, 40, .22);
}
.actlist__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 42px; height: 42px;
    border-radius: 11px;
    background: linear-gradient(145deg, #1B2A4A, #101830);
    color: #E0BC6A;
}
.actlist__text { min-width: 0; }
.actlist__text b {
    display: block;
    font-size: var(--fs-body);
    line-height: 1.35;
}
.actlist__text span {
    display: block;
    margin-top: 2px;
    font-size: var(--fs-sm);
    line-height: 1.45;
    color: var(--c-text-muted);
}

.touch-v2__note {
    margin: var(--s-6) 0 0;
    padding-left: var(--s-4);
    border-left: 2px solid var(--c-gold);
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
    color: var(--c-text-muted);
}

@media (max-width: 900px) {
    .touch-v2__split { grid-template-columns: 1fr; gap: var(--s-10); }
    .tapscene { min-height: 320px; }
    .tapscene__card { right: 2%; width: 164px; }
}
@media (max-width: 560px) {
    .tapscene { perspective: none; }
    .tapscene__phone, .tapscene__card { transform: none; }
    .tapscene__card { position: static; margin-top: var(--s-6); width: 100%; max-width: 240px; }
    .tapscene { display: flex; flex-direction: column; align-items: center; }
    .tapscene__ripple { display: none; }
}

/* --- Chỉnh lại cảnh chạm sau khi xem bản dựng ----------------------------- */

/* Tiêu đề bị ngắt thành "Gặp nhau. Chạm một / lần. Kết nối ngay." — nới khung. */
.touch-v2__head { max-width: 56rem; }

/* Máy đang gần vuông vì nội dung màn hình quá ngắn. Ép tỉ lệ dáng điện thoại
   và đẩy nút xuống đáy. */
.tapscene__screen {
    min-height: 268px;
    display: flex;
    flex-direction: column;
}
.tapscene__line--role { margin-bottom: auto; }
.tapscene__cta { margin-top: var(--s-4); }

/* Ba vạch sóng rơi đúng vào giữa màn hình nên đọc ra như lỗi hiển thị chứ
   không phải sóng NFC. Bỏ vạch, thay bằng quầng sáng ở ĐIỂM TIẾP XÚC giữa
   mép thẻ và máy — đó mới là chỗ "chạm" thật sự xảy ra. */
.tapscene__ripple { display: none; }
.tapscene__card::before {
    content: "";
    position: absolute;
    left: -26px;
    top: 50%;
    width: 78px;
    height: 78px;
    transform: translateY(-50%);
    background: radial-gradient(circle, rgba(224, 188, 106, .55) 0%, rgba(224, 188, 106, .18) 42%, transparent 72%);
    filter: blur(2px);
    pointer-events: none;
}

/* =============================================================================
   KINDSHOW — một mẫu, hai thể loại thẻ
   -----------------------------------------------------------------------------
   Thay khối "Nhiều mẫu thẻ đẹp" cũ: thanh 7 danh mục ngành và 4 tấm thẻ nhân
   vật bịa. Không có mẫu riêng theo ngành, và giờ cũng chỉ còn MỘT mẫu giao
   diện — nên khối này nói đúng thứ có thật: hai thể loại thẻ, khác nhau ở
   bộ khối chứ không phải ở mẫu.

   Hai ảnh là ảnh chụp THẬT hai tấm thẻ đang chạy trong hệ thống
   (/v/do-van-tung và /v/do-van-tung-bni), sinh bằng scripts/gen-cardshots.js.
   ========================================================================== */
.gallery__head { max-width: 52rem; margin: 0 auto var(--s-12); text-align: center; }
.gallery__lede {
    margin: var(--s-4) 0 0;
    font-size: var(--fs-body-lg);
    line-height: var(--lh-body);
    color: var(--c-text-muted);
}

.kindshow {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-12) var(--s-16);
}
.kindshow__item {
    display: grid;
    grid-template-columns: minmax(0, 210px) minmax(0, 1fr);
    gap: var(--s-6);
    align-items: center;
}

/* Ảnh thẻ: cắt phần đầu, bo góc như màn hình điện thoại. */
.kindshow__shot {
    display: block;
    border-radius: 20px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 5px rgba(16, 24, 48, .07), 0 16px 34px rgba(16, 24, 48, .13);
    transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.kindshow__shot img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 390 / 500;
    object-fit: cover;
    object-position: top center;
}
.kindshow__shot:hover,
.kindshow__shot:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 3px 7px rgba(16, 24, 48, .09), 0 22px 44px rgba(16, 24, 48, .18);
}

.kindshow__tag {
    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-text-onink);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.kindshow__tag--gold { color: #E0BC6A; }

.kindshow__text h3 { margin: 0 0 var(--s-3); font-size: var(--fs-h3); line-height: var(--lh-h3); }
.kindshow__text p {
    margin: 0 0 var(--s-4);
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
    color: var(--c-text-muted);
}
.kindshow__text strong { color: var(--c-text); font-weight: 600; }

.gallery__note {
    max-width: 52rem;
    margin: var(--s-12) auto 0;
    padding-left: var(--s-4);
    border-left: 2px solid var(--c-gold);
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
    color: var(--c-text-muted);
}

@media (max-width: 1000px) {
    .kindshow { grid-template-columns: 1fr; gap: var(--s-10); }
}
@media (max-width: 520px) {
    .kindshow__item { grid-template-columns: 1fr; gap: var(--s-4); }
    .kindshow__shot { max-width: 240px; }
}
@media (prefers-reduced-motion: reduce) {
    .kindshow__shot { transition: none; }
    .kindshow__shot:hover, .kindshow__shot:focus-visible { transform: none; }
}

/* =============================================================================
   KINDSWAP — trái: giới thiệu · phải: hai thẻ xếp chồng, tự đảo
   ========================================================================== */
.kindswap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    grid-template-areas:
        "panes stack"
        "dots  stack";
    gap: var(--s-6) var(--s-16);
    align-items: center;
}
.kindswap__panes { grid-area: panes; display: grid; }
.kindswap__dots  { grid-area: dots; display: flex; gap: var(--s-2); }
.kindswap__stack { grid-area: stack; }

/* Hai bản nội dung chồng lên đúng một ô lưới nên khung tự cao bằng bản dài
   nhất — không bị giật chiều cao mỗi lần đảo. */
.kindswap__pane {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity var(--dur-3) var(--ease-out),
                transform var(--dur-3) var(--ease-out),
                visibility 0s linear var(--dur-3);
}
.kindswap__pane.is-on {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
}
.kindswap__pane h3 { margin: var(--s-3) 0; font-size: var(--fs-h3); line-height: var(--lh-h3); }
.kindswap__pane p {
    margin: 0 0 var(--s-5);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--c-text-muted);
}
.kindswap__pane strong { color: var(--c-text); font-weight: 600; }

/* --- Chồng thẻ ------------------------------------------------------------ */
.kindswap__stack {
    position: relative;
    display: grid;
    min-height: 460px;
    place-items: center;
    perspective: 1200px;
}
.kindswap__card {
    grid-area: 1 / 1;
    display: block;
    width: min(300px, 100%);
    border-radius: 22px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 6px rgba(16, 24, 48, .08), 0 20px 40px rgba(16, 24, 48, .16);
    /* Tấm phía sau: lùi, nhỏ và nghiêng ngược chiều để đọc ra là hai vật thể
       xếp chồng chứ không phải một tấm bị nhoè. */
    transform: translate(9%, 4%) rotate(7deg) scale(.9);
    opacity: .72;
    z-index: 1;
    transition: transform var(--dur-3) var(--ease-out),
                opacity var(--dur-3) var(--ease-out),
                box-shadow var(--dur-3) var(--ease-out);
}
.kindswap__card.is-front {
    transform: translate(-4%, 0) rotate(-4deg) scale(1);
    opacity: 1;
    z-index: 2;
    box-shadow: 0 3px 8px rgba(16, 24, 48, .10), 0 28px 56px rgba(16, 24, 48, .22);
}
.kindswap__card img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 390 / 520;
    object-fit: cover;
    object-position: top center;
}

/* --- Nút chọn ------------------------------------------------------------- */
.kindswap__dot {
    padding: 8px var(--s-4);
    border-radius: var(--r-pill);
    border: 1px solid var(--c-smoke-deep);
    background: transparent;
    color: var(--c-text-muted);
    font-family: inherit;
    font-size: var(--fs-label);
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--dur-1) var(--ease-out),
                color var(--dur-1) var(--ease-out),
                border-color var(--dur-1) var(--ease-out);
}
.kindswap__dot:hover { border-color: var(--c-gold); color: var(--c-gold); }
.kindswap__dot.is-on {
    background: var(--c-ink);
    border-color: var(--c-ink);
    color: var(--c-text-onink);
}

@media (max-width: 900px) {
    .kindswap {
        grid-template-columns: 1fr;
        grid-template-areas: "stack" "panes" "dots";
        gap: var(--s-8);
    }
    .kindswap__stack { min-height: 400px; }
    .kindswap__dots { justify-content: center; }
    .kindswap__panes { text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
    .kindswap__pane, .kindswap__card { transition: none; }
}

/* --- Chỉnh khối thể loại: nút lên trên, thẻ hiện nhiều hơn --------------- */
.kindswap {
    grid-template-areas:
        "dots  stack"
        "panes stack";
    align-items: start;
    row-gap: var(--s-6);
}
/* Hai nút thành hai tab dính nhau, đặt ngay trên phần nội dung. */
.kindswap__dots {
    gap: 0;
    padding: 4px;
    border-radius: var(--r-pill);
    background: var(--c-smoke);
    border: 1px solid var(--c-smoke-deep);
    justify-self: start;
}
/* min-height 44px: hai nút gạt này cao 39px, dưới ngưỡng chạm. Chúng là điều
   khiển duy nhất của khối nên phải bấm trúng ngay lần đầu. */
.kindswap__dot { border: 0; background: transparent; padding: 9px var(--s-5); min-height: 44px; }
.kindswap__dot:hover { background: rgba(184, 128, 40, .10); }
.kindswap__dot.is-on { background: var(--c-ink); border: 0; }

/* Thẻ hiện đầy đủ hơn — bằng đúng tỉ lệ đang dùng ở banner. */
.kindswap__card { width: min(330px, 100%); }
.kindswap__card img { aspect-ratio: 390 / 700; }
.kindswap__stack { min-height: 640px; align-items: start; }

.kindswap__pane p + p { margin-top: calc(var(--s-4) * -1 + var(--s-4)); }

@media (max-width: 900px) {
    .kindswap {
        grid-template-areas: "dots" "stack" "panes";
        row-gap: var(--s-8);
    }
    .kindswap__dots { justify-self: center; }
    .kindswap__stack { min-height: 560px; }
}

/* Cột thẻ cao hơn hẳn cột chữ và nó trải qua CẢ HAI hàng, nên phần dư bị chia
   đều cho hai hàng — đẩy phần nội dung tụt xuống, hở một mảng lớn dưới tab.
   Ghim hàng tab theo nội dung, phần dư dồn hết vào hàng dưới. */
.kindswap { grid-template-rows: auto 1fr; }
.kindswap__panes { align-self: start; }

/* --- Căn tab thẳng lề với chữ bên dưới ------------------------------------
   Khung tab có padding 4px nên chữ trong tab bị đẩy vào 4px so với đoạn văn
   bên dưới — nhìn ra ngay là lệch. Kéo khung lùi lại đúng 4px đó. */
.kindswap__dots { margin-left: -4px; }

/* Đã bỏ nhãn phụ trong pane (trùng với tab ở trên) nên tiêu đề lên đầu. */
.kindswap__pane h3 { margin-top: 0; }

/* =============================================================================
   TAPFLOW — bàn tay cầm thẻ + chuỗi 6 bước
   -----------------------------------------------------------------------------
   MỘT khối duy nhất. Trước đó chỗ này có tới bốn thế hệ rule chồng lên nhau
   (mỗi lần sửa lại nối thêm một bản ghi đè) và chúng đá nhau: bản đặt
   display:contents, bản đặt display:grid, hai bản đặt margin-left khác nhau.
   Kết quả là bố cục ra một đằng so với rule vừa viết.

   Hàng này nằm NGOÀI .container nên vốn đã rộng bằng màn hình — bàn tay bắt
   đầu ngay tại mép trái, không cần calc(50vw - 50%). Phép tính đó từng làm ảnh
   phình lên 914px và phủ mất hai bước đầu, vì "50%" trong calc quy chiếu theo
   CỘT LƯỚI chứ không phải khung nội dung.
   ========================================================================== */
/* =============================================================================
   TRUST — bốn thẻ có icon, thay dải chữ trơn
   -----------------------------------------------------------------------------
   Bản trước là bốn cột chữ trần, mỗi cột chỉ có một gạch vàng 22px ở trên. Đọc
   được nhưng không có gì níu mắt, và bốn mục có trọng lượng thị giác y hệt nhau
   nên không biết bắt đầu từ đâu.
   ========================================================================== */
.trust { background: var(--c-smoke); }
.trust__head { max-width: 46rem; margin: 0 auto var(--s-10); text-align: center; }
.trust__head h2 { margin: var(--s-2) 0 0; font-size: var(--fs-h2); line-height: var(--lh-h2); }

.trust__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--s-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

.trust-card {
    padding: var(--s-6);
    background: var(--c-paper);
    border: 1px solid var(--c-smoke-deep);
    border-radius: var(--r-lg);
    box-shadow: 0 1px 2px rgba(16, 24, 48, .04);
    transition: transform var(--dur-2) var(--ease-out),
                box-shadow var(--dur-2) var(--ease-out);
}
.trust-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 2px 4px rgba(16, 24, 48, .06), 0 14px 28px rgba(16, 24, 48, .10);
}

/* Mỗi mục một sắc riêng: bốn ô cùng màu thì mắt không phân biệt được mục nào
   với mục nào, đọc thành một mảng chữ. */
.trust-card__icon {
    display: grid;
    place-items: center;
    width: 46px; height: 46px;
    margin-bottom: var(--s-4);
    border-radius: 13px;
}
.trust-card__icon--indigo { background: rgba(47, 74, 131, .12);  color: #2F4A83; }
.trust-card__icon--gold   { background: rgba(184, 128, 40, .14); color: #B88028; }
.trust-card__icon--green  { background: rgba(20, 102, 60, .12);  color: #14663C; }
.trust-card__icon--violet { background: rgba(124, 58, 237, .12); color: #6D28D9; }

.trust-card__title {
    margin: 0 0 var(--s-2);
    font-size: var(--fs-body-lg);
    line-height: 1.3;
}
.trust-card__title a { color: inherit; text-decoration: none; }
.trust-card__title a:hover { color: var(--c-gold); }
.trust-card__text {
    margin: 0;
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
    color: var(--c-text-muted);
}

@media (max-width: 940px) {
    .trust__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
    .trust__grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .trust-card { transition: none; }
    .trust-card:hover { transform: none; }
}

/* =============================================================================
   CTA ĐÓNG TRANG — dựng lại
   -----------------------------------------------------------------------------
   Bản trước có bốn chỗ hỏng:
     · chữ bó trong cột 30ch nên tiêu đề vỡ 2 dòng, đoạn dẫn vỡ 3 dòng, trong
       khi nửa phải để trống hoác;
     · hai nút lơ lửng giữa mảng trống, không neo vào gì;
     · nền navy phẳng lì, không có lấy một lớp;
     · NÚT CHÍNH MÀU CHÀM ĐẶT TRÊN NỀN NAVY — gần như cùng sắc, nút quan trọng
       nhất trang lại là thứ chìm nhất.
   ========================================================================== */
.closing2 {
    position: relative;
    overflow: hidden;
    padding-block: clamp(4.5rem, 3rem + 6vw, 8rem);
    background:
        radial-gradient(38rem 26rem at 50% -10%, rgba(184, 128, 40, .26), transparent 66%),
        radial-gradient(30rem 24rem at 88% 108%, rgba(47, 74, 131, .55), transparent 68%),
        linear-gradient(165deg, #16213D 0%, #101830 52%, #0A1226 100%);
    color: var(--c-text-onink);
    text-align: center;
}

/* Sọc chéo mảnh ở hai góc — cùng ngôn ngữ trang trí với banner. */
.closing2__deco { position: absolute; inset: 0; pointer-events: none; }
.closing2__deco::before,
.closing2__deco::after {
    content: "";
    position: absolute;
    width: 30rem; height: 22rem;
    background: repeating-linear-gradient(90deg,
        rgba(240, 215, 154, .16) 0 2px, transparent 2px 15px);
}
.closing2__deco::before {
    top: -4rem; left: -7rem;
    transform: rotate(-22deg);
    mask-image: linear-gradient(140deg, #000 6%, transparent 62%);
}
.closing2__deco::after {
    bottom: -5rem; right: -7rem;
    transform: rotate(-22deg);
    mask-image: linear-gradient(320deg, #000 6%, transparent 62%);
}

.closing2__inner { position: relative; z-index: 1; }

.closing2__eyebrow {
    margin: 0 0 var(--s-3);
    font-size: var(--fs-label);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    background: var(--g-metal-soft);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.closing2 h2 {
    max-width: 22ch;
    margin: 0 auto var(--s-5);
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    color: var(--c-text-onink);
}
.closing2__lede {
    max-width: 52ch;
    margin: 0 auto var(--s-8);
    font-size: var(--fs-body-lg);
    line-height: var(--lh-body);
    color: var(--c-text-onink-mute);
}

.closing2__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-4);
    justify-content: center;
}
/* Nút chính chuyển sang vàng ánh kim: trên nền navy thì vàng là sắc tương phản
   mạnh nhất, còn chàm gần như hoà vào nền. */
.closing2 .btn--gold {
    background: var(--g-metal);
    color: #17110A;
    font-weight: 700;
    box-shadow: 0 10px 24px rgba(184, 128, 40, .28);
}
.closing2 .btn--gold:hover {
    background: linear-gradient(135deg, #F7E4B4 0%, #E0BC6A 46%, #C08A2E 100%);
    color: #17110A;
}
.closing2__call {
    background: transparent;
    color: var(--c-text-onink);
    box-shadow: inset 0 0 0 1.5px rgba(233, 235, 230, .34);
}
.closing2__call:hover { background: rgba(233, 235, 230, .10); color: var(--c-text-onink); }

.closing2__points {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--s-3) var(--s-8);
    margin: var(--s-10) 0 0;
    padding: 0;
    list-style: none;
}
.closing2__points li {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    font-size: var(--fs-sm);
    color: var(--c-text-onink-mute);
}
.closing2__points svg { flex: none; color: #E0BC6A; }

/* =============================================================================
   PAYOFF — "Một danh thiếp tốt mang lại điều gì?"
   -----------------------------------------------------------------------------
   Bán KẾT QUẢ chứ không liệt kê tính năng: bốn ý đều nói về thứ xảy ra sau buổi
   gặp, không nói về nút bấm nào trên màn hình. Ảnh bên phải là thẻ THẬT đang
   chạy (/v/do-van-tung), kèm bốn dấu tích là việc người nhận vừa làm xong.
   ========================================================================== */
.payoff__head { max-width: 52rem; margin: 0 auto var(--s-12); text-align: center; }
.payoff__head h2 { margin: var(--s-2) 0 0; font-size: var(--fs-h2); line-height: var(--lh-h2); }
.payoff__lede {
    margin: var(--s-4) 0 0;
    font-size: var(--fs-body-lg);
    line-height: var(--lh-body);
    color: var(--c-text-muted);
}

.payoff__split {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: clamp(var(--s-8), 5vw, var(--s-16));
    align-items: center;
}

.payoff__list { display: grid; gap: var(--s-5); margin: 0; padding: 0; list-style: none; }
.payoff__list li { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: var(--s-4); }
.payoff__num {
    font-family: var(--ff-display);
    font-size: var(--fs-body-lg);
    font-weight: 800;
    line-height: 1.2;
    background: var(--g-metal);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.payoff__body b { display: block; font-size: var(--fs-body-lg); line-height: 1.35; margin-bottom: 4px; }
.payoff__body > span {
    display: block;
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
    color: var(--c-text-muted);
}

/* --- Thẻ thật + bốn dấu việc đã xong --- */
.payoff__visual { position: relative; display: grid; place-items: center; }
.payoff__card {
    display: block;
    width: min(276px, 100%);
    border-radius: 22px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 3px 8px rgba(16, 24, 48, .10), 0 26px 50px rgba(16, 24, 48, .18);
    transform: rotate(-3deg);
    transition: transform var(--dur-2) var(--ease-out);
}
.payoff__card:hover, .payoff__card:focus-visible { transform: rotate(-3deg) translateY(-5px); }
.payoff__card img {
    display: block; width: 100%; height: auto;
    aspect-ratio: 390 / 560; object-fit: cover; object-position: top center;
}

.payoff__done {
    position: absolute;
    right: -4%;
    display: grid;
    gap: var(--s-2);
    margin: 0;
    padding: 0;
    list-style: none;
}
.payoff__done li {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: 8px var(--s-4);
    border-radius: var(--r-pill);
    background: #fff;
    border: 1px solid var(--c-smoke-deep);
    box-shadow: 0 2px 4px rgba(16, 24, 48, .06), 0 10px 22px rgba(16, 24, 48, .10);
    font-size: var(--fs-label);
    font-weight: 600;
    white-space: nowrap;
}
.payoff__done svg { flex: none; color: var(--c-success); }
/* Lệch so le để bốn dấu không thành một cột thẳng đơ. */
.payoff__done li:nth-child(1) { transform: translateX(-14px); }
.payoff__done li:nth-child(3) { transform: translateX(-10px); }

/* =============================================================================
   WHY — "Chúng tôi tạo SMO CARD vì một lý do"
   -----------------------------------------------------------------------------
   Khối duy nhất trên trang không bán tính năng nào. Nền tối để tách hẳn khỏi
   các mục nói về sản phẩm ở trên và dưới nó — người đọc nhận ra ngay đây là
   chỗ đổi giọng.
   ========================================================================== */
.why {
    position: relative;
    overflow: hidden;
    padding-block: clamp(4.5rem, 3rem + 6vw, 8rem);
    background:
        radial-gradient(34rem 24rem at 18% -8%, rgba(184, 128, 40, .22), transparent 66%),
        radial-gradient(28rem 22rem at 92% 106%, rgba(47, 74, 131, .5), transparent 68%),
        linear-gradient(160deg, #16213D 0%, #101830 54%, #0A1226 100%);
    color: var(--c-text-onink);
}
.why__deco { position: absolute; inset: 0; pointer-events: none; }
.why__deco::before {
    content: "";
    position: absolute;
    top: -4rem; right: -8rem;
    width: 30rem; height: 22rem;
    transform: rotate(-22deg);
    background: repeating-linear-gradient(90deg,
        rgba(240, 215, 154, .15) 0 2px, transparent 2px 15px);
    mask-image: linear-gradient(200deg, #000 8%, transparent 62%);
}
.why__inner { position: relative; z-index: 1; max-width: 60rem; text-align: center; margin-inline: auto; }

.why__eyebrow {
    margin: 0 0 var(--s-3);
    font-size: var(--fs-label);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    background: var(--g-metal-soft);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.why h2 {
    margin: 0 auto var(--s-5);
    max-width: 24ch;
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    color: var(--c-text-onink);
}
.why__accent {
    background: var(--g-metal-soft);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.why__lede {
    max-width: 54ch;
    margin: 0 auto var(--s-10);
    font-size: var(--fs-body-lg);
    line-height: var(--lh-body);
    color: var(--c-text-onink-mute);
}
.why__lede strong { color: var(--c-text-onink); font-weight: 600; }

.why__steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-6);
    margin: 0 0 var(--s-10);
    padding: 0;
    list-style: none;
    text-align: left;
}
.why__steps li {
    padding-top: var(--s-4);
    border-top: 2px solid rgba(240, 215, 154, .35);
}
.why__step-k {
    display: block;
    margin-bottom: var(--s-2);
    font-family: var(--ff-display);
    font-size: var(--fs-h3);
    font-weight: 800;
    color: var(--c-text-onink);
}
.why__step-t {
    display: block;
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
    color: var(--c-text-onink-mute);
}

.why__cta { background: var(--g-metal); color: #17110A; font-weight: 700; }
.why__cta:hover {
    background: linear-gradient(135deg, #F7E4B4 0%, #E0BC6A 46%, #C08A2E 100%);
    color: #17110A;
}

@media (max-width: 1000px) {
    .payoff__split { grid-template-columns: 1fr; }
    .payoff__visual { margin-top: var(--s-4); }
    .why__steps { grid-template-columns: 1fr; gap: var(--s-5); }
}
@media (max-width: 640px) {
    .payoff__done { position: static; margin-top: var(--s-6); justify-items: center; }
    /* Khong dung !important (quy uoc cua du an): dung dung selector so-le o tren
       de do uu tien bang nhau va rule sau thang. */
    .payoff__done li:nth-child(1),
    .payoff__done li:nth-child(3) { transform: none; }
    .payoff__card { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .payoff__card { transition: none; }
    .payoff__card:hover, .payoff__card:focus-visible { transform: rotate(-3deg); }
}

/* =============================================================================
   TRANG "VÌ SAO CHỌN" — hero riêng
   -----------------------------------------------------------------------------
   Hai khối .payoff và .why bên trên vốn viết cho trang chủ; giờ chúng là nội
   dung chính của trang này nên dùng lại nguyên, chỉ thêm phần hero.
   ========================================================================== */
#page-why {
    --c-smoke: #FCFAF8;
    --c-smoke-deep: #ECE6DF;
    --c-gold: #B88028;
    --c-gold-deep: #8F621C;
    --c-gold-wash: #FDF7EF;
    --c-ink: #101830;
    --g-metal: linear-gradient(135deg, #F0D79A 0%, #D9A83F 34%, #B88028 62%, #8F621C 100%);
    --g-metal-soft: linear-gradient(135deg, #F7E9C6 0%, #E0BC6A 50%, #C08A2E 100%);
}

.why-hero {
    position: relative;
    overflow: hidden;
    padding-block: clamp(3rem, 1.6rem + 4vw, 5.5rem) clamp(3.5rem, 2rem + 4vw, 6rem);
    background-color: #F6E9D2;
    background-image:
        radial-gradient(rgba(140, 104, 48, .10) 1px, transparent 1px),
        radial-gradient(42rem 30rem at 74% 8%, rgba(240, 202, 128, .85), transparent 62%),
        radial-gradient(32rem 26rem at 8% 96%, rgba(122, 148, 200, .30), transparent 66%),
        linear-gradient(164deg, #FDF4E4 0%, #F7E7CC 48%, #F1DCBE 100%);
    background-size: 24px 24px, auto, auto, auto;
    text-align: center;
}
.why-hero__deco { position: absolute; inset: 0; pointer-events: none; }
.why-hero__deco::before {
    content: "";
    position: absolute;
    top: -5rem; right: -8rem;
    width: 32rem; height: 24rem;
    transform: rotate(-24deg);
    background: repeating-linear-gradient(90deg,
        rgba(184, 128, 40, .22) 0 2px, transparent 2px 16px);
    mask-image: linear-gradient(200deg, #000 8%, transparent 62%);
}
.why-hero__inner { position: relative; z-index: 1; }
.why-hero .hero-warm__badge { margin-inline: auto; }
.why-hero h1 {
    max-width: 20ch;
    margin: 0 auto var(--s-5);
    font-size: var(--fs-display);
    line-height: var(--lh-display);
    letter-spacing: var(--ls-display);
    color: var(--c-ink);
}
.why-hero__lede {
    max-width: 58ch;
    margin: 0 auto;
    font-size: var(--fs-body-lg);
    line-height: var(--lh-body);
    color: var(--c-text-muted);
}

/* Trên trang "Vì sao chọn", khối .why (nền tối) nằm ngay trên khối CTA cũng
   nền tối — hai dải dính thành một mảng dài, mất hẳn nhịp ngắt và CTA không
   còn ra dáng một lời mời riêng. Thêm một đường vàng mảnh làm ranh giới. */
#page-why .closing2 { border-top: 1px solid rgba(240, 215, 154, .22); }

/* =============================================================================
   TAPFLOW — "Một chạm là đủ", dựng lại theo hai nhịp
   -----------------------------------------------------------------------------
   VẤN ĐỀ CỦA BẢN TRƯỚC: sáu mục nối nhau bằng một dải nét đứt, trình bày y hệt
   nhau, nhưng chúng là ba loại thứ khác nhau —

       ① Chạm NFC / quét QR          việc BẠN làm
       ② Thẻ mở ra trong trình duyệt  kết quả tự động
       ③④⑤⑥ Gọi · Zalo · Danh bạ · MXH   bốn việc NGƯỜI NHẬN chọn, song song

   Nối cả sáu thành một chuỗi nghĩa là nói: phải gọi điện xong mới nhắn Zalo
   được. Đó là lỗi thông tin, không phải lỗi thẩm mỹ — nên sửa bằng cấu trúc.
   Trên màn hẹp bản cũ còn xuống thành lưới 2×3, mất luôn cả nghĩa chuỗi.

   BẢN NÀY:
     Nhịp 1 (.tapseq)  hai bước CÓ thứ tự thật → chỉ chỗ này mới có mũi tên.
     Nhịp 2 (.tapfan)  bốn việc song song, gom trong một khối mô phỏng đúng
                       thanh hành động của tấm thẻ thật ở /v/{slug}.

   Màu: từ sáu sắc rời rạc (navy/lá/xanh/tím/ngọc) xuống còn HAI — vàng cho
   việc người dùng làm, mực cho phần còn lại. Sáu sắc kia không mã hoá thông
   tin nào, chỉ làm loãng đúng màu nhấn của trang.
   ========================================================================== */
.tapflow-wrap {
    display: grid;
    grid-template-columns: minmax(0, clamp(230px, 24vw, 380px)) minmax(0, 1fr);
    /* Khe hẹp hơn bản trước (đo được 43px trống giữa mép thẻ và bước ①):
       bàn tay phải chạm gần như dính vào bước đầu thì cử chỉ "chạm" mới đọc
       ra được, nếu không nó chỉ là một tấm ảnh đặt cạnh một hàng icon. */
    gap: clamp(var(--s-2), 1.2vw, var(--s-6));
    align-items: center;
    padding-right: var(--gutter);
}

.tapflow__hand {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 14px 20px rgba(16, 24, 48, .16));
}

.tapflow {
    display: flex;
    align-items: center;
    gap: clamp(var(--s-6), 2.4vw, var(--s-12));
}

/* --- Nhịp 1: chuỗi hai bước ---------------------------------------------- */
.tapseq {
    display: flex;
    align-items: flex-start;
    gap: var(--s-3);
    margin: 0;
    padding: 0;
    list-style: none;
    flex: 0 0 auto;
}

.tapseq__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-3);
    width: 124px;
    text-align: center;
}

.tapseq__dot {
    display: grid;
    place-items: center;
    width: 74px; height: 74px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--c-smoke-deep);
    color: var(--c-ink);
    box-shadow: 0 1px 2px rgba(16, 24, 48, .05), 0 8px 18px rgba(16, 24, 48, .06);
}

/* Bước duy nhất người dùng chủ động làm — cũng là bước tấm thẻ trong ảnh đang
   chạm tới. Quầng vàng rộng để nối thị giác từ mép thẻ sang vòng tròn. */
.tapseq__step--tap .tapseq__dot {
    border: 2px solid var(--c-gold);
    background: var(--c-gold-wash);
    color: var(--c-gold);
    box-shadow: 0 0 0 8px rgba(184, 128, 40, .07),
                0 0 0 16px rgba(184, 128, 40, .04),
                0 10px 22px rgba(184, 128, 40, .18);
}
.tapseq__step--tap .tapseq__label { color: var(--c-text); font-weight: 600; }

.tapseq__wave { width: 26px; height: 26px; }

.tapseq__label {
    font-size: var(--fs-label);
    line-height: 1.45;
    color: var(--c-text-muted);
    /* Nhãn 1 dòng và 2 dòng làm hai bước lệch chiều cao (đo được 105 vs 124px).
       Chốt sàn bằng đúng hai dòng để hàng luôn phẳng. */
    min-height: calc(2 * 1.45em);
}

/* Mũi tên: nét đứt + đầu nhọn. Bản trước chỉ có nét đứt trơn nên không chỉ
   hướng — mắt không biết đọc trái sang phải hay ngược lại. */
.tapseq__arrow {
    position: relative;
    flex: 0 0 46px;
    height: 2px;
    margin-top: 36px;                 /* canh tâm vòng tròn: 74 / 2 = 37 */
    background: repeating-linear-gradient(90deg,
        var(--c-smoke-deep) 0 5px, transparent 5px 11px);
}
.tapseq__arrow::after {
    content: "";
    position: absolute;
    right: -1px; top: 50%;
    width: 7px; height: 7px;
    border-top: 2px solid var(--c-smoke-deep);
    border-right: 2px solid var(--c-smoke-deep);
    transform: translateY(-50%) rotate(45deg);
}

/* --- Nhịp 2: bốn việc song song ------------------------------------------ */
.tapfan {
    flex: 1 1 auto;
    min-width: 0;
    padding: var(--s-5) var(--s-6) var(--s-6);
    border: 1px solid var(--c-smoke-deep);
    border-radius: var(--r-lg);
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 48, .04), 0 10px 24px rgba(16, 24, 48, .05);
}

.tapfan__cap {
    margin: 0 0 var(--s-4);
    font-size: var(--fs-label);
    line-height: 1.4;
    color: var(--c-text-muted);
}

.tapfan__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Hình dạng lấy đúng theo thanh hành động của tấm thẻ thật: viên thuốc, icon
   trái, chữ phải. Đây là thứ khách sẽ thấy sau khi chạm — cho họ nhận ra
   trước luôn. */
.tapfan__item {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    min-height: 48px;
    padding: var(--s-2) var(--s-4);
    border: 1px solid var(--c-smoke-deep);
    border-radius: 999px;
    background: var(--c-smoke);
    color: var(--c-ink);
    font-size: var(--fs-sm);
    font-weight: 500;
    line-height: 1.3;
}
.tapfan__item svg { flex: 0 0 auto; color: var(--c-gold-deep); }

/* --- Màn hẹp -------------------------------------------------------------- */
/* Một ngưỡng duy nhất, không phải hai. Bản đầu tôi cho .tapflow xuống hàng ở
   1180px nhưng vẫn giữ bàn tay ở cột trái: bàn tay bị căn giữa theo chiều dọc
   nên tụt xuống ngang tấm thẻ hành động, mũi thẻ chỉ vào khoảng không thay vì
   vào bước ①. Cả cụm phải đổi phương cùng lúc thì cử chỉ chạm mới còn đúng. */
@media (max-width: 1180px) {
    .tapflow-wrap {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: var(--s-6);
        padding-inline: var(--gutter);
    }
    .tapflow__hand { max-width: 320px; }
    .tapflow {
        width: 100%;
        max-width: 560px;
        flex-direction: column;
        align-items: stretch;
        gap: var(--s-8);
    }
    .tapseq { justify-content: center; }
    .tapfan { flex: 0 0 auto; }
}

@media (max-width: 520px) {
    .tapseq__step { width: 110px; }
    .tapseq__dot { width: 64px; height: 64px; }
    .tapseq__arrow { flex-basis: 28px; margin-top: 31px; }
    .tapfan__list { grid-template-columns: 1fr; }
}

/* --- Cuộn ngang trên điện thoại ------------------------------------------
   Hai tấm thẻ trong .kindswap__stack xếp chồng và có xoay/dịch, nên mép phải
   tấm nằm sau rơi ra ngoài viewport: đo ở 390px cho ra mép phải 405px, tức
   trang cuộn ngang được thêm 14px trên MỌI điện thoại.

   `body { overflow-x: hidden }` không cứu được vì phần tràn nằm trong luồng
   cuộn của tài liệu. Cắt ngay tại khối chứa để giữ nguyên hiệu ứng xếp chồng
   mà không cho nó đẩy chiều rộng tài liệu.

   Dùng `clip` chứ không `hidden`: `hidden` biến khối thành vùng cuộn được,
   khiến bàn phím Tab có thể "cuộn" khối này và làm nhảy bố cục. */
.kindswap__stack {
    overflow-x: clip;
    /* Chừa chỗ cho bóng đổ của thẻ, nếu không bóng bị cắt cụt ở hai mép. */
    overflow-clip-margin: 24px;
}