/* Mẫu mới trang chi tiết liệu trình (single-lieu_trinh-moi.php).
   File riêng, không qua Vite - chỉ nạp ở trang dùng mẫu mới (inc/lieu-trinh-mau-moi.php).
   Đơn vị rem theo gốc 10px của theme (1rem = 10px). */

.ltm {
    --ltm-xanh: #17403e;
    --ltm-xanh-dam: #0e2b29;
    --ltm-xanh-sang: #1f7d75;
    --ltm-chu: #1a1a1a;
    --ltm-chu-nhat: #6b6b6b;
    --ltm-vien: #e7ecea;
    --ltm-nen-xanh: radial-gradient(120% 140% at 0% 0%, #1f7d75 0%, #17504c 38%, #0f3533 100%);
    --ltm-bo: 2rem;
    color: var(--ltm-chu);
    overflow-x: clip;
}

/* Theme in hoa toàn bộ tiêu đề - mẫu mới dùng chữ thường như mockup. */
.ltm h1, .ltm h2, .ltm h3 { text-transform: none; }

.ltm-khung {
    max-width: 120rem;
    margin: 0 auto;
    padding: 0 1.6rem;
}

.ltm-giua { text-align: center; }

.ltm-nhan {
    margin: 0 0 1.2rem;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ltm-xanh-sang);
}
.ltm-nhan a { color: inherit; text-decoration: none; }

.ltm-tieu-de {
    margin: 0;
    font-size: clamp(2.6rem, 3.4vw, 4rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--ltm-chu);
}

.ltm-nen-xanh { background: var(--ltm-nen-xanh); color: #fff; }
.ltm-nen-xanh .ltm-tieu-de { color: #fff; }
.ltm-nen-xanh .ltm-nhan { color: rgba(255, 255, 255, 0.72); }

.ltm-chi-dt { display: none; }

/* ---------- Nút ---------- */
.ltm-nut {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 4.4rem;
    padding: 0 2.4rem;
    border-radius: 99rem;
    border: 1px solid transparent;
    font: inherit;
    font-size: 1.4rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.15s;
}
.ltm-nut:active { transform: scale(0.97); }
.ltm-nut:focus-visible { outline: 2px solid var(--ltm-xanh-sang); outline-offset: 3px; }
.ltm-nut--dam { background: linear-gradient(135deg, #1f7d75, #17403e); color: #fff; }
.ltm-nut--dam:hover { background: var(--ltm-xanh-dam); color: #fff; }
.ltm-nut--vien { border-color: var(--ltm-xanh); color: var(--ltm-xanh); background: #fff; }
.ltm-nut--vien:hover { background: var(--ltm-xanh); color: #fff; }
.ltm-nut--trang { background: #fff; color: var(--ltm-xanh); }
.ltm-nut--trang:hover { background: #e9f3f1; }
.ltm-nut--kinh { border-color: rgba(255, 255, 255, 0.45); color: #fff; background: rgba(255, 255, 255, 0.06); }
.ltm-nut--kinh:hover { background: rgba(255, 255, 255, 0.16); }

/* ---------- 1. Hero ---------- */
.ltm-hero { display: flex; flex-direction: column; }

.ltm-hero__anh {
    position: relative;
    aspect-ratio: 4 / 3.2;
    overflow: hidden;
    background: #e9eeec;
}
.ltm-hero__anh img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ltm-hero__anh::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 45%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent);
    pointer-events: none;
}
.ltm-hero__phu {
    position: absolute;
    inset: auto 1.6rem 1.6rem 1.6rem;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    margin: 0;
    color: #fff;
}
.ltm-hero__phu div:last-child { text-align: right; }
.ltm-hero__phu dt { font-size: 1rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.85; }
.ltm-hero__phu dd { margin: 0.2rem 0 0; font-size: 2.2rem; font-weight: 700; }

.ltm-hero__chu { padding: 2.4rem 1.6rem 3.2rem; }
.ltm-hero__ten {
    margin: 0 0 1.4rem;
    font-size: clamp(3.4rem, 5.6vw, 6.4rem);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -0.035em;
    background: linear-gradient(135deg, #1f7d75 0%, #17403e 70%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.ltm-hero__mo-ta { margin: 0 0 2.4rem; font-size: 1.5rem; line-height: 1.65; color: var(--ltm-chu-nhat); max-width: 46rem; }
.ltm-hero__nut { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2.4rem; }
.ltm-hero__nut .ltm-nut { min-height: 5rem; }

.ltm-hero__so {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    grid-auto-flow: column;
    margin: 0;
    border-top: 1px solid var(--ltm-vien);
}
.ltm-hero__so > div { padding: 1.4rem 1rem 0 0; }
.ltm-hero__so > div + div { padding-left: 1rem; border-left: 1px solid var(--ltm-vien); }
.ltm-hero__so dt { font-size: 1.5rem; font-weight: 700; color: var(--ltm-chu); }
.ltm-hero__so dd { margin: 0.3rem 0 0; font-size: 1.1rem; color: var(--ltm-chu-nhat); line-height: 1.4; }

/* ---------- 2. Dành cho ai ---------- */
.ltm-ai { padding: 5.6rem 0; }
.ltm-ai__luoi { display: grid; gap: 3.2rem; }
.ltm-ai__mo-ta { margin: 1.6rem 0 0; font-size: 1.4rem; line-height: 1.6; color: rgba(255, 255, 255, 0.75); max-width: 36rem; }
.ltm-ai__ds { list-style: none; margin: 0; padding: 0; }
.ltm-ai__ds li {
    display: flex;
    gap: 1.4rem;
    align-items: flex-start;
    padding: 1.6rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.ltm-ai__ds li:first-child { padding-top: 0; }
.ltm-ai__tich {
    flex: 0 0 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background: #fff;
    color: var(--ltm-xanh);
    display: grid;
    place-items: center;
}
.ltm-ai__tich svg { width: 1.5rem; height: 1.5rem; }
.ltm-ai__ds strong { display: block; font-size: 1.6rem; font-weight: 600; line-height: 1.4; }
.ltm-ai__ds strong + span { display: block; margin-top: 0.4rem; font-size: 1.3rem; color: rgba(255, 255, 255, 0.72); }

/* ---------- 3. Trước & Sau ---------- */
.ltm-ts { padding: 5.6rem 0; }
.ltm-ts__dau { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; margin-bottom: 2.8rem; }
.ltm-ts__so { margin: 0; text-align: right; line-height: 1.2; }
.ltm-ts__so strong { display: block; font-size: 2.6rem; }
.ltm-ts__so span { font-size: 1.1rem; color: rgba(255, 255, 255, 0.75); }
.ltm-ts__luoi { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.ltm-ts__o { margin: 0; border-radius: 1.4rem; overflow: hidden; aspect-ratio: 1; background: rgba(255, 255, 255, 0.08); }
.ltm-ts__o--lon { grid-column: 1 / -1; }
.ltm-ts__o img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ltm-ts__o:nth-child(n+4):not(.ltm-ts__o--them) { display: none; }
.ltm-ts__luoi.is-mo .ltm-ts__o:nth-child(n+4) { display: block; }
.ltm-ts__o[hidden] { display: none !important; }
.ltm-ts .ltm-giua { margin-top: 2.8rem; }
.ltm-ts .ltm-nut { min-width: 18rem; }

/* ---------- 4. Bảng giá ---------- */
.ltm-gia { padding: 6.4rem 0; }
.ltm-gia .ltm-tieu-de { margin-bottom: 3.2rem; }
.ltm-gia__luoi { display: flex; flex-direction: column-reverse; gap: 1.4rem; }
.ltm-gia__the {
    display: flex;
    flex-direction: column;
    padding: 2.4rem;
    border: 1px solid var(--ltm-vien);
    border-radius: var(--ltm-bo);
    background: #fff;
    box-shadow: 0 1px 2px rgba(23, 64, 62, 0.04), 0 8px 24px rgba(23, 64, 62, 0.05);
}
.ltm-gia__the--dam { background: var(--ltm-nen-xanh); border-color: transparent; color: #fff; }
.ltm-gia__ten { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin: 0 0 0.8rem; font-size: 1.4rem; font-weight: 600; }
.ltm-gia__nhan-hl {
    padding: 0.3rem 1rem;
    border-radius: 99rem;
    background: #fff;
    color: var(--ltm-xanh);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}
.ltm-gia__so { margin: 0 0 0.8rem; font-size: 2.8rem; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ltm-gia__phu { margin: 0 0 2rem; font-size: 1.3rem; line-height: 1.55; color: var(--ltm-chu-nhat); flex: 1; }
.ltm-gia__the--dam .ltm-gia__phu { color: rgba(255, 255, 255, 0.78); }
.ltm-gia__the .ltm-nut { width: 100%; }

/* ---------- 5. Công nghệ ---------- */
.ltm-cn { padding: 6.4rem 0 2.4rem; }
.ltm-cn__gioi-thieu { max-width: 60rem; margin: 1.4rem auto 0; font-size: 1.4rem; line-height: 1.6; color: var(--ltm-chu-nhat); }
.ltm-cn .ltm-cuon { margin-top: 3.2rem; }
.ltm-cn__ray { list-style: none; margin: 0; padding: 0; }
.ltm-cn__the {
    padding: 2.4rem;
    border: 1px solid var(--ltm-vien);
    border-radius: var(--ltm-bo);
    background: #fff;
    box-shadow: 0 1px 2px rgba(23, 64, 62, 0.04), 0 8px 24px rgba(23, 64, 62, 0.05);
}
.ltm-cn__so { display: block; margin-bottom: 1.2rem; font-size: 1.1rem; font-weight: 600; color: var(--ltm-xanh-sang); }
.ltm-cn__the h3 { margin: 0 0 1rem; font-size: 1.9rem; font-weight: 700; line-height: 1.3; }
.ltm-cn__the p { margin: 0; font-size: 1.35rem; line-height: 1.6; color: var(--ltm-chu-nhat); }

/* Dải kéo ngang trên điện thoại: ẩn thanh cuộn, thẻ sau ló ra để khách biết
   vuốt được, chấm vị trí bên dưới (user 2026-10-22: thanh cuộn xám chỉ là để
   minh hoạ "cuộn được", không phải để hiện thật). */
.ltm-cuon__ray {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 82%;
    gap: 1.2rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin: 0 -1.6rem;
    padding: 0.4rem 1.6rem 1.2rem;
    scroll-padding: 0 1.6rem;
}
.ltm-cuon__ray::-webkit-scrollbar { display: none; }
.ltm-cuon__ray > * { scroll-snap-align: start; }
.ltm-cuon__cham { display: flex; justify-content: center; gap: 0.6rem; margin-top: 0.8rem; }
.ltm-cuon__cham span { width: 0.6rem; height: 0.6rem; border-radius: 99rem; background: #cfd9d7; transition: width 0.25s, background-color 0.25s; }
.ltm-cuon__cham span.is-active { width: 1.8rem; background: var(--ltm-xanh); }

/* ---------- 6. Quy trình ---------- */
.ltm-qt { padding: 5.6rem 0 6.4rem; scroll-margin-top: 8rem; }
.ltm-qt__dau { display: flex; flex-direction: column; gap: 0.8rem; margin-bottom: 2.4rem; }
.ltm-qt__goi-y { margin: 0; font-size: 1.3rem; color: var(--ltm-chu-nhat); }

.ltm-qt__thanh {
    position: relative;
    display: flex;
    gap: 0.6rem;
    overflow-x: auto;
    scrollbar-width: none;
    margin: 0 -1.6rem 1.6rem;
    padding: 0.4rem 1.6rem;
}
.ltm-qt__thanh::-webkit-scrollbar { display: none; }
.ltm-qt__so {
    flex: 0 0 auto;
    width: 3.8rem;
    height: 3.8rem;
    border-radius: 50%;
    border: 1px solid var(--ltm-vien);
    background: #fff;
    color: var(--ltm-chu);
    font: inherit;
    font-size: 1.2rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.ltm-qt__so:hover { border-color: var(--ltm-xanh); }
.ltm-qt__so.is-active { background: var(--ltm-xanh); border-color: var(--ltm-xanh); color: #fff; }
.ltm-qt__so:focus-visible { outline: 2px solid var(--ltm-xanh-sang); outline-offset: 2px; }

.ltm-qt__than { display: grid; gap: 1.2rem; }
.ltm-qt__the {
    display: flex;
    flex-direction: column;
    min-height: 20rem;
    padding: 2.8rem 2.4rem 2.4rem;
    border-radius: var(--ltm-bo);
    background: var(--ltm-nen-xanh);
    color: #fff;
}
.ltm-qt__buoc { flex: 1; }
.ltm-qt__dem { margin: 0 0 1rem; font-size: 1.05rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); }
.ltm-qt__buoc h3 { margin: 0; font-size: 2.2rem; font-weight: 700; line-height: 1.3; }
.ltm-qt__mo-ta { margin: 1.2rem 0 0; max-width: 48rem; font-size: 1.45rem; line-height: 1.6; color: rgba(255, 255, 255, 0.82); }
.ltm-qt__dk { display: flex; gap: 0.8rem; margin-top: 2.4rem; }
.ltm-qt__dk button {
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: transparent;
    color: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
}
.ltm-qt__dk button:hover:not(:disabled) { background: rgba(255, 255, 255, 0.14); }
.ltm-qt__dk button:disabled { opacity: 0.35; cursor: default; }
.ltm-qt__dk svg { width: 1.6rem; height: 1.6rem; }
.ltm-qt__anh { display: none; }

/* ---------- 8. Đặt lịch ---------- */
.ltm-cta { padding: 6.4rem 0; }
.ltm-cta__tieu-de { margin: 0 0 1rem; font-size: clamp(2.6rem, 3.4vw, 4rem); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; color: #fff; }
.ltm-cta__phu { margin: 0 0 2.8rem; font-size: 1.6rem; color: rgba(255, 255, 255, 0.82); }
.ltm-cta__nut { display: flex; flex-direction: column; gap: 1rem; max-width: 40rem; margin: 0 auto 2rem; }
.ltm-cta__nut .ltm-nut { min-height: 5rem; }
.ltm-cta__mail { font-size: 1.25rem; color: rgba(255, 255, 255, 0.8); text-decoration: none; }
.ltm-cta__mail:hover { color: #fff; text-decoration: underline; }

/* ================= Máy tính ================= */
@media (min-width: 900px) {
    .ltm-chi-dt { display: none !important; }
    .ltm-chi-pc { display: block; }
    .ltm-khung { padding: 0 4rem; }

    .ltm-hero { flex-direction: row; min-height: min(80vh, 72rem); }
    .ltm-hero__anh { flex: 0 0 50%; aspect-ratio: auto; }
    /* Ảnh nằm tuyệt đối để ảnh dọc không kéo hero cao vượt khung - chiều cao
       hero do min-height + cột chữ quyết định, ảnh tự cắt vừa (object-fit). */
    .ltm-hero__anh img { position: absolute; inset: 0; }
    .ltm-hero__phu { inset: auto 3.2rem 3.2rem 3.2rem; }
    .ltm-hero__phu dd { font-size: 3rem; }
    .ltm-hero__chu { flex: 1; align-self: center; padding: 6.4rem clamp(4rem, 6vw, 9.6rem); }
    .ltm-hero__nut { flex-direction: row; }
    .ltm-hero__nut .ltm-nut { min-height: 4.4rem; }
    .ltm-hero__so dt { font-size: 1.9rem; }
    .ltm-hero__so dd { font-size: 1.2rem; }

    .ltm-ai { padding: 9.6rem 0; }
    .ltm-ai__luoi { grid-template-columns: 5fr 7fr; gap: 6.4rem; }

    .ltm-ts { padding: 9.6rem 0; }
    .ltm-ts__luoi { grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }
    .ltm-ts__o--lon { grid-column: span 2; grid-row: span 2; }
    .ltm-ts__o:nth-child(n+4):not(.ltm-ts__o--them) { display: block; }

    .ltm-gia { padding: 9.6rem 0; }
    .ltm-gia .ltm-tieu-de { margin-bottom: 4.8rem; }
    .ltm-gia__luoi { flex-direction: row; justify-content: center; }
    .ltm-gia__the { flex: 1 1 0; max-width: 40rem; }

    .ltm-cn { padding: 9.6rem 0 4rem; }
    .ltm-cuon__ray {
        grid-auto-flow: row;
        grid-template-columns: repeat(auto-fit, minmax(26rem, 1fr));
        overflow: visible;
        margin: 0;
        padding: 0;
        gap: 2rem;
    }
    .ltm-cuon__cham { display: none; }

    .ltm-qt { padding: 8rem 0 9.6rem; }
    .ltm-qt__dau { flex-direction: row; justify-content: space-between; align-items: flex-end; margin-bottom: 4rem; }
    .ltm-qt__thanh { justify-content: space-between; margin: 0 0 3.2rem; padding: 0; overflow: visible; }
    .ltm-qt__thanh::before {
        content: "";
        position: absolute;
        left: 2rem;
        right: 2rem;
        top: 50%;
        height: 1px;
        background: var(--ltm-vien);
        z-index: -1;
    }
    .ltm-qt__so { width: 4.4rem; height: 4.4rem; }
    .ltm-qt__than { grid-template-columns: 3fr 2fr; gap: 1.6rem; }
    .ltm-qt__the { min-height: 26rem; padding: 3.6rem 3.2rem 3.2rem; }
    .ltm-qt__buoc h3 { font-size: 2.6rem; }
    .ltm-qt__anh { display: block; border-radius: var(--ltm-bo); overflow: hidden; }
    .ltm-qt__anh img { width: 100%; height: 100%; object-fit: cover; display: block; }


    .ltm-cta { padding: 10.4rem 0; }
    .ltm-cta__nut { flex-direction: row; justify-content: center; max-width: none; }
    .ltm-cta__nut .ltm-nut { min-height: 4.4rem; }
}

@media (max-width: 899px) {
    .ltm-chi-pc { display: none !important; }
    .ltm-chi-dt { display: block; }
    /* Số "3.300+" xuống dưới tiêu đề, đừng chen ngang làm tiêu đề bị ép hẹp */
    .ltm-ts__dau { flex-direction: column; align-items: flex-start; gap: 1.2rem; }
    .ltm-ts__so { text-align: left; }
    .ltm-ts__so strong { display: inline; font-size: 2rem; margin-right: 0.6rem; }
}

@media (prefers-reduced-motion: reduce) {
    .ltm-nut, .ltm-cuon__cham span, .ltm-qt__so { transition: none; }
}