/* =============================================================================
   SMO CARD — TRANG BẢNG GIÁ
   -----------------------------------------------------------------------------
   Nạp SAU home-v2.css và dùng lại nguyên bảng màu, nút, huy hiệu hero và khối
   CTA đóng trang của trang chủ, để bảng giá không phải một thiết kế khác đặt
   cạnh trang chủ.

   Trước đây trang này dùng bố cục UIkit cũ (_Layout): một khối .panel với giá
   viết inline style màu đỏ 26px. Giờ chuyển sang _LayoutMarketing.
   ========================================================================== */
#page-plan {
    --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%);
}

/* =============================================================================
   P1 · HERO
   ========================================================================== */
.plan-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;
}
.plan-hero__deco { position: absolute; inset: 0; pointer-events: none; }
.plan-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%);
}
.plan-hero__inner { position: relative; z-index: 1; }
.plan-hero .hero-warm__badge { margin-inline: auto; }

.plan-hero h1 {
    max-width: 18ch;
    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);
}
.plan-hero__lede {
    max-width: 56ch;
    margin: 0 auto var(--s-8);
    font-size: var(--fs-body-lg);
    line-height: var(--lh-body);
    color: var(--c-text-muted);
}
.plan-hero__price {
    margin: 0 0 var(--s-2);
    font-family: var(--ff-display);
    font-size: clamp(2.75rem, 2rem + 3.4vw, 4.25rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--c-ink);
}
.plan-hero__price span { font-size: .48em; }
.plan-hero__price em { font-size: .3em; font-style: normal; font-weight: 500; color: var(--c-text-muted); }
.plan-hero__note { margin: 0; font-size: var(--fs-sm); color: var(--c-text-muted); }

/* =============================================================================
   Tiêu đề mục dùng chung
   ========================================================================== */
.plan-head { max-width: 52rem; margin: 0 auto var(--s-12); text-align: center; }
.plan-head h2 { margin: var(--s-2) 0 0; font-size: var(--fs-h2); line-height: var(--lh-h2); }
.plan-head__lede {
    margin: var(--s-4) 0 0;
    font-size: var(--fs-body-lg);
    line-height: var(--lh-body);
    color: var(--c-text-muted);
}
.plan-head__lede strong { color: var(--c-text); font-weight: 600; }

/* =============================================================================
   P2 · HAI THẺ
   ========================================================================== */
.plancards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-6);
    align-items: start;
}
.plancard {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--c-smoke);
    border: 1px solid var(--c-smoke-deep);
    border-radius: var(--r-lg);
}
/* Thẻ BNI viền vàng — không phải vì nó "cao cấp hơn" (hai thẻ cùng giá) mà vì
   nó là lựa chọn hẹp, dành cho một nhóm cụ thể, cần dễ nhận ra. */
.plancard--bni {
    background: var(--c-paper);
    border: 1.5px solid var(--c-gold);
    box-shadow: 0 0 0 4px var(--c-gold-wash);
}

/* Ảnh thẻ thật, cắt lấy phần đầu. */
.plancard__shot { display: block; background: #fff; }
.plancard__shot img {
    display: block; width: 100%; height: auto;
    aspect-ratio: 390 / 260;
    object-fit: cover; object-position: top center;
    transition: transform var(--dur-3) var(--ease-out);
}
.plancard__shot:hover img, .plancard__shot:focus-visible img { transform: scale(1.03); }

.plancard__body { display: flex; flex-direction: column; flex: 1; padding: var(--s-6); }
.plancard__tag {
    align-self: flex-start;
    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;
}
.plancard__tag--gold { color: #E0BC6A; }
.plancard__body h3 { margin: var(--s-4) 0 var(--s-2); font-size: var(--fs-h3); line-height: var(--lh-h3); }
.plancard__who { margin: 0 0 var(--s-5); font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--c-text-muted); }

.plancard__price {
    margin: 0 0 var(--s-5);
    padding-bottom: var(--s-5);
    border-bottom: 1px solid var(--c-smoke-deep);
    font-family: var(--ff-display);
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
}
.plancard__price span { font-size: .5em; }
.plancard__price em { font-size: .38em; font-style: normal; font-weight: 500; color: var(--c-text-muted); }

.plancard__listhead {
    margin: 0 0 var(--s-3);
    font-size: var(--fs-label);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--c-gold);
}
.plancard__list { display: grid; gap: var(--s-2); margin: 0 0 var(--s-6); padding: 0; list-style: none; }
.plancard__list li { display: flex; align-items: flex-start; gap: var(--s-2); font-size: var(--fs-sm); line-height: 1.5; }
.plancard__list svg { flex: none; margin-top: 3px; color: var(--c-success); }
.plancard__cta { margin-top: auto; width: 100%; }

/* --- Khối chung của cả hai thể loại --- */
.plancommon {
    margin-top: var(--s-8);
    padding: var(--s-6) var(--s-8);
    border-radius: var(--r-lg);
    background: linear-gradient(145deg, #1B2A4A, #101830);
    color: var(--c-text-onink);
}
.plancommon__head {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    margin: 0 0 var(--s-4);
    font-size: var(--fs-body);
    font-weight: 700;
}
.plancommon__head svg { flex: none; color: #E0BC6A; }
.plancommon__list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--s-2) var(--s-6);
    margin: 0 0 var(--s-5);
    padding: 0;
    list-style: none;
}
.plancommon__list li {
    position: relative;
    padding-left: var(--s-4);
    font-size: var(--fs-sm);
    color: var(--c-text-onink-mute);
}
.plancommon__list li::before {
    content: "";
    position: absolute;
    left: 0; top: .62em;
    width: 5px; height: 5px;
    border-radius: 999px;
    background: #E0BC6A;
}
.plancommon__foot {
    margin: 0;
    padding-top: var(--s-4);
    border-top: 1px solid rgba(233, 235, 230, .16);
    font-size: var(--fs-label);
    line-height: var(--lh-label);
    color: var(--c-text-onink-mute);
}
.plancommon__foot strong { color: var(--c-text-onink); }

/* =============================================================================
   P3 · CHUỖI BỐN BƯỚC
   ========================================================================== */
.planflow {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--s-5);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}
.planflow li {
    padding: var(--s-6);
    background: var(--c-paper);
    border: 1px solid var(--c-smoke-deep);
    border-radius: var(--r-lg);
}
.planflow__n {
    display: grid;
    place-items: center;
    width: 34px; height: 34px;
    margin-bottom: var(--s-4);
    border-radius: 999px;
    background: linear-gradient(145deg, #1B2A4A, #101830);
    color: #E0BC6A;
    font-family: var(--ff-display);
    font-weight: 800;
    font-size: var(--fs-sm);
}
.planflow__b b { display: block; margin-bottom: 4px; font-size: var(--fs-body); line-height: 1.35; }
.planflow__b > span { display: block; font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--c-text-muted); }

.plan-more__quote {
    max-width: 46rem;
    margin: var(--s-10) auto 0;
    padding-left: var(--s-5);
    border-left: 3px solid var(--c-gold);
    font-family: var(--ff-display);
    font-size: var(--fs-h3);
    line-height: 1.4;
    color: var(--c-text);
}

/* =============================================================================
   P4 · DÀNH CHO AI
   ========================================================================== */
.whogrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); }
.whocard {
    padding: var(--s-6);
    background: var(--c-smoke);
    border: 1px solid var(--c-smoke-deep);
    border-radius: var(--r-lg);
    transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.whocard:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(16, 24, 48, .06), 0 14px 28px rgba(16, 24, 48, .10); }
.whocard__icon {
    display: grid; place-items: center;
    width: 44px; height: 44px;
    margin-bottom: var(--s-4);
    border-radius: 12px;
}
.whocard__icon--indigo { background: rgba(47, 74, 131, .12);  color: #2F4A83; }
.whocard__icon--gold   { background: rgba(184, 128, 40, .14); color: #B88028; }
.whocard__icon--green  { background: rgba(20, 102, 60, .12);  color: #14663C; }
.whocard__icon--violet { background: rgba(124, 58, 237, .12); color: #6D28D9; }
.whocard h3 { margin: 0 0 var(--s-2); font-size: var(--fs-body-lg); line-height: 1.3; }
.whocard p { margin: 0; font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--c-text-muted); }

/* =============================================================================
   Màn hẹp
   ========================================================================== */
@media (max-width: 1000px) {
    .plancards { grid-template-columns: 1fr; }
    .plancommon__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .planflow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .whogrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
    .plancommon { padding: var(--s-5); }
    .plancommon__list { grid-template-columns: 1fr; }
    .planflow, .whogrid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .plancard__shot img, .whocard { transition: none; }
    .plancard__shot:hover img { transform: none; }
    .whocard:hover { transform: none; }
}