/**
 * Landing page home9 — lớp phủ trên Bootstrap 3.4.1.
 *
 * Chỉ nạp ở views/client/home9.php, không dùng chung với panel. Mọi selector đều
 * mang tiền tố .lp- để không đụng vào component Bootstrap mà panel đang dùng.
 *
 * Biến màu khai báo ở :root nên đổi màu thương hiệu chỉ cần sửa một chỗ.
 */

:root {
    --lp-ink: #17212f;
    --lp-muted: #5b6b80;
    --lp-line: #dfe5ee;
    /* Viền giữa các hàng trong bảng: nhạt hơn viền ngoài để bảng không thành lưới. */
    --lp-line-soft: #eef1f6;
    --lp-surface: #ffffff;
    --lp-ground: #f5f7fa;
    --lp-brand: #1d4ed8;
    --lp-brand-dark: #1740ad;
    /*
     * Accent NÓNG, chỉ dùng cho GIÁ — không dùng ở đâu khác. Bản trước khai
     * --lp-accent: #f97316 rồi bỏ không dùng lần nào; mà #f97316 trên nền trắng
     * chỉ đạt 2.80:1, tức nếu đã dùng thì trượt WCAG AA. #c2410c đạt 5.18:1 nên
     * dùng được cả ở cỡ 72px lẫn 19px trong bảng.
     */
    --lp-accent: #c2410c;

    /*
     * Thang chữ 7 bậc. Bản trước có 15 cỡ đặt tuỳ hứng
     * (11,12,13,14,15,17,18,19,22,23,26,27,28,31,38) — đó không phải thang bậc.
     * Mọi font-size phải lấy từ đây; --lp-t-price là bậc riêng cho con số giá ở
     * hero, thứ duy nhất được phép to như vậy.
     */
    --lp-t-xs: 12px;
    --lp-t-sm: 14px;
    --lp-t-base: 16px;
    --lp-t-md: 19px;
    --lp-t-lg: 24px;
    --lp-t-xl: 32px;
    --lp-t-2xl: 44px;
    --lp-t-price: 72px;

    --lp-font: "Be Vietnam Pro", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --lp-font-num: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

body {
    color: var(--lp-ink);
    background: var(--lp-surface);
    font-family: var(--lp-font);
    font-size: var(--lp-t-base);
    line-height: 1.6;
    /* navbar-fixed-top cao 56px; thiếu padding thì hero nằm dưới thanh nav. */
    padding-top: 56px;
}

h1, h2, h3, h4 {
    color: var(--lp-ink);
    font-weight: 600;
}

a {
    color: var(--lp-brand);
}

a:hover,
a:focus {
    color: var(--lp-brand-dark);
}

/* Bootstrap 3 bỏ outline mặc định ở một số state — trả lại để đi bàn phím thấy
   được mình đang ở đâu. */
a:focus,
button:focus,
.btn:focus {
    outline: 2px solid var(--lp-brand);
    outline-offset: 2px;
}

.btn {
    border-radius: 3px;
    font-weight: 500;
}

.btn-primary {
    background-color: var(--lp-brand);
    border-color: var(--lp-brand);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--lp-brand-dark);
    border-color: var(--lp-brand-dark);
}

/* ── thanh điều hướng ─────────────────────────────────────────────────────── */

.lp-nav {
    background: var(--lp-surface);
    border: 0;
    border-bottom: 1px solid var(--lp-line);
    box-shadow: 0 1px 3px rgba(23, 33, 47, 0.05);
    min-height: 56px;
}

/* :not(.btn) là BẮT BUỘC, không phải cho gọn. Nút "Đăng ký" cũng là một <a> con
   trực tiếp của li trong .navbar-nav, mà specificity của selector này là (0,2,2)
   nên nó thắng .btn-primary (0,1,0). Thiếu :not(.btn) thì nút lĩnh đủ ba lỗi:
   cộng thêm 18px padding dọc nên cao vượt thanh nav và chữ bị đẩy lệch xuống,
   màu chữ trắng bị đổi thành xám, và rule :hover bên dưới xoá luôn nền xanh. */
.lp-nav .navbar-nav > li > a:not(.btn) {
    color: var(--lp-muted);
    font-weight: 500;
    padding-top: 18px;
    padding-bottom: 18px;
    transition: color 180ms ease;
}

.lp-nav .navbar-nav > li > a:not(.btn):hover,
.lp-nav .navbar-nav > li > a:not(.btn):focus {
    color: var(--lp-brand);
    background: transparent;
}

/* Wordmark là chữ, không phải ảnh — xem chú thích trong navbar.php. */
.lp-brand {
    display: flex;
    align-items: center;
    height: 56px;
    padding-top: 0;
    padding-bottom: 0;
    font-size: var(--lp-t-md);
    letter-spacing: -0.02em;
}

.lp-brand-name {
    color: var(--lp-ink);
    font-weight: 800;
}

/* Đuôi domain nhạt và nhẹ hơn: mắt đọc phần tên trước, ".com" chỉ là hậu tố. */
.lp-brand-tld {
    color: var(--lp-muted);
    font-weight: 400;
}

.lp-brand:hover .lp-brand-name,
.lp-brand:focus .lp-brand-name {
    color: var(--lp-brand);
}

/* Canh giữa nút bằng flex thay vì đoán margin: Bootstrap 3 canh .navbar-btn bằng
   margin cố định 8px tính theo navbar cao 50px mặc định của nó, còn thanh này 56px.
 *
 * Selector PHẢI nặng hơn `.nav > li { display: block }` (0,1,1) của Bootstrap —
 * `.lp-nav-cta` trần chỉ là (0,1,0) nên display:flex bị đè về block, align-items
 * mất tác dụng và nút rơi về baseline sát đỉnh dòng. Cái này (0,3,2). */
.lp-nav .navbar-nav > li.lp-nav-cta {
    display: flex;
    align-items: center;
    min-height: 56px;
}

/*
 * Nút CTA phải tự khai báo lại MÀU CHỮ, NỀN và PADDING, không được tin vào
 * .btn-primary. Bootstrap 3 nhắm vào link trong navbar bằng những selector nặng
 * hơn class của nút:
 *
 *   .navbar-default .navbar-nav > li > a        (0,2,2)  color: #777
 *   .navbar-default .navbar-nav > li > a:hover  (0,3,2)  background: transparent
 *   .navbar-nav > li > a                        (0,1,2)  padding: 15px 15px (>=768px)
 *
 * so với .btn-primary (0,1,0) và .btn-primary:hover (0,2,0) — Bootstrap thắng cả
 * ba. Kết quả nếu không ghi đè: chữ xám chìm vào nền xanh, và hover thì bay mất
 * nền. Selector dưới đây có (0,4,2) nên thắng lại; liệt kê đủ cả bốn state vì
 * mỗi state là một rule riêng của Bootstrap.
 */
.lp-nav .navbar-nav > li.lp-nav-cta > a.btn,
.lp-nav .navbar-nav > li.lp-nav-cta > a.btn:link,
.lp-nav .navbar-nav > li.lp-nav-cta > a.btn:visited {
    padding: 8px 18px;
    margin: 0 0 0 6px;
    background-color: var(--lp-brand);
    color: #fff;
    transition: background-color 180ms ease;
}

.lp-nav .navbar-nav > li.lp-nav-cta > a.btn:hover,
.lp-nav .navbar-nav > li.lp-nav-cta > a.btn:focus,
.lp-nav .navbar-nav > li.lp-nav-cta > a.btn:active {
    background-color: var(--lp-brand-dark);
    color: #fff;
}

.lp-lang .dropdown-menu > .active > a,
.lp-lang .dropdown-menu > .active > a:hover {
    background-color: var(--lp-brand);
}

/* ── nhịp chung của các khối ──────────────────────────────────────────────── */

.lp-section {
    padding: 64px 0;
}

/*
 * Nền từng khối khai báo THEO TÊN, không theo thứ tự DOM. Bản trước dùng
 * .lp-section:nth-of-type(even) — thêm, xoá hay đổi chỗ một khối là đảo nền toàn
 * trang, và đọc CSS không biết khối nào đang màu gì.
 */
.lp-platforms,
.lp-features,
.lp-payments {
    background: var(--lp-ground);
}

.lp-steps,
.lp-pricing,
.lp-faq {
    background: var(--lp-surface);
}

/*
 * Tiêu đề khối có HAI biến thể. Bản trước cả 6 khối đều canh giữa cùng một kiểu,
 * nên trang chỉ có một nhịp lặp sáu lần — đó là lý do lớn nhất khiến nó đọc như
 * template. Khối dạng danh sách/chuỗi dùng bản canh trái, khối dạng dải/bảng mới
 * canh giữa.
 */
.lp-section-head {
    margin-bottom: 40px;
    text-align: center;
}

.lp-section-head--left {
    max-width: none;
    text-align: left;
}

.lp-section-head h2 {
    margin: 0 0 10px;
    font-size: var(--lp-t-xl);
    letter-spacing: -0.02em;
}

.lp-section-head--left .lp-section-sub {
    margin-left: 0;
}

.lp-section-sub {
    max-width: 620px;
    margin: 0 auto;
    color: var(--lp-muted);
}

/*
 * Hàng thẻ cao bằng nhau.
 *
 * Cột Bootstrap 3 là float, nên các thẻ trong cùng một hàng cao theo nội dung
 * riêng và viền dưới thành lởm chởm khi một thẻ có nhiều dòng chữ hơn. Đặt
 * `height: 100%` trên thẻ KHÔNG giải quyết được: cột float có chiều cao auto nên
 * phần trăm không có gì để tham chiếu.
 *
 * Cách làm: .row thành flex container (cột giãn bằng nhau nhờ align-items: stretch
 * mặc định), rồi cột cũng thành flex container để thẻ bên trong lấp đầy chiều cao.
 * float bị bỏ qua trên flex item nên không cần xoá.
 */
.lp-card-row {
    display: flex;
    flex-wrap: wrap;
}

/* Clearfix của Bootstrap (.row:before/:after { content:" "; display:table }) biến
   thành FLEX ITEM khi .row là flex — hai item ma này chiếm chỗ và có thể đẩy cột
   xuống dòng sai. Phải tắt. */
.lp-card-row:before,
.lp-card-row:after {
    display: none;
}

.lp-card-row > [class*="col-"] {
    display: flex;
}

.lp-card-row > [class*="col-"] > * {
    width: 100%;
}

/* ── hero: giá là nhân vật chính ─────────────────────────────────────────── */

.lp-hero {
    padding: 56px 0 60px;
    /* Chuyển màu rất nhẹ, chỉ để tách hero khỏi thanh nav trắng phía trên. */
    background: linear-gradient(180deg, #f7f9fc 0%, var(--lp-surface) 70%);
}

.lp-eyebrow {
    margin-bottom: 16px;
    color: var(--lp-muted);
    font-family: var(--lp-font-num);
    font-size: var(--lp-t-xs);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* h1 vẫn là tiêu đề ngữ nghĩa của trang, nhưng CỠ CHỮ nhường cho khối giá:
   thứ tự thị giác do giá dẫn, thứ tự ngữ nghĩa vẫn do h1 dẫn. */
.lp-hero-title {
    margin: 0 0 26px;
    max-width: 20em;
    font-size: var(--lp-t-xl);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.22;
}

/* ── khối giá lớn ─────────────────────────────────────────────────────────── */

.lp-figure {
    margin: 0 0 28px;
    padding-left: 18px;
    /* Vạch dọc màu accent: neo khối giá vào lề, và là chỗ DUY NHẤT ngoài con số
       được dùng màu nóng. */
    border-left: 3px solid var(--lp-accent);
}

.lp-figure-label {
    display: block;
    margin-bottom: 2px;
    color: var(--lp-muted);
    font-size: var(--lp-t-sm);
}

.lp-figure-price {
    margin: 0;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0 8px;
}

.lp-figure-value {
    color: var(--lp-accent);
    font-family: var(--lp-font-num);
    font-size: var(--lp-t-price);
    font-weight: 700;
    /* Chữ số cùng bề rộng: con số này đổi theo dữ liệu, không được nhảy layout. */
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
    line-height: 1;
}

.lp-figure-unit {
    color: var(--lp-accent);
    font-family: var(--lp-font-num);
    font-size: var(--lp-t-md);
    font-weight: 500;
}

.lp-figure-per {
    color: var(--lp-muted);
    font-size: var(--lp-t-sm);
}

.lp-figure-meta {
    display: block;
    margin-top: 6px;
    color: var(--lp-muted);
    font-size: var(--lp-t-sm);
}

.lp-hero-actions {
    margin: 0 0 20px;
}

.lp-hero-actions .btn {
    margin: 0 8px 8px 0;
}

.lp-badges {
    margin: 0;
    color: var(--lp-muted);
    font-size: var(--lp-t-sm);
}

.lp-badges > li {
    padding: 4px 0;
}

.lp-badges i {
    margin-right: 6px;
    color: var(--lp-brand);
}

/* ── thẻ bảng giá gọn ở cột phải ──────────────────────────────────────────── */

.lp-hero-card {
    background: var(--lp-surface);
    border: 1px solid var(--lp-line);
    border-radius: 8px;
    box-shadow: 0 12px 32px rgba(23, 33, 47, 0.08);
    overflow: hidden;
}

.lp-hero-card-head {
    display: flex;
    justify-content: space-between;
    padding: 12px 18px;
    background: var(--lp-ground);
    border-bottom: 1px solid var(--lp-line);
    color: var(--lp-muted);
    font-family: var(--lp-font-num);
    font-size: var(--lp-t-xs);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.lp-hero-list {
    padding: 0;
    margin: 0;
    list-style: none;
}

.lp-hero-list > li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 18px;
    border-top: 1px solid var(--lp-line-soft);
}

.lp-hero-list > li:first-child {
    border-top: 0;
}

.lp-hero-list-icon {
    flex: none;
    color: var(--lp-brand);
    line-height: 1;
}

.lp-hero-glyph {
    border-radius: 4px;
}

.lp-hero-list-name {
    font-weight: 600;
}

.lp-hero-list-price {
    margin-left: auto;
    color: var(--lp-accent);
    font-family: var(--lp-font-num);
    font-size: var(--lp-t-md);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.lp-hero-list-price small {
    color: var(--lp-muted);
    font-size: var(--lp-t-xs);
    font-weight: 500;
}

.lp-hero-card-more {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 18px;
    background: var(--lp-ground);
    border-top: 1px solid var(--lp-line);
    font-size: var(--lp-t-sm);
    font-weight: 600;
}

.lp-hero-card-more:hover,
.lp-hero-card-more:focus {
    background: #eef2f8;
    text-decoration: none;
}

/* ── dải số liệu ──────────────────────────────────────────────────────────── */

.lp-stats {
    padding: 30px 0;
    background: var(--lp-ink);
    color: #fff;
}

.lp-stat {
    padding: 14px 10px;
    text-align: center;
}

.lp-stat-value {
    display: block;
    font-family: var(--lp-font-num);
    font-size: var(--lp-t-lg);
    font-weight: 700;
    /* Số xếp cột thì phải cùng bề rộng chữ số, nếu không nhìn như lệch hàng. */
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.lp-stat-label {
    display: block;
    margin-top: 3px;
    color: rgba(255, 255, 255, 0.7);
    font-size: var(--lp-t-sm);
}

/* ── nền tảng: dải ô phẳng, không viền ───────────────────────────────────── */

.lp-platform-row {
    text-align: center;
}

/* Ô ĐẶC, không viền. Trên trang này chỉ bảng giá được đóng khung, nên viền là
   tín hiệu "đây là dữ liệu" chứ không phải lớp trang trí mặc định. */
.lp-platform {
    display: block;
    padding: 20px 12px;
    margin-bottom: 16px;
    background: var(--lp-surface);
    border-radius: 8px;
    color: var(--lp-ink);
    text-decoration: none;
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.lp-platform:hover,
.lp-platform:focus {
    /* Nhấc lên bằng shadow, KHÔNG đổi kích thước hay viền: đổi bounds sẽ đẩy các
       ô bên cạnh và làm cả dải rung. */
    box-shadow: 0 8px 20px rgba(23, 33, 47, 0.1);
    color: var(--lp-ink);
    text-decoration: none;
    transform: translateY(-2px);
}

.lp-platform-icon {
    display: block;
    margin-bottom: 8px;
    color: var(--lp-brand);
    font-size: var(--lp-t-lg);
}

.lp-platform-glyph {
    border-radius: 4px;
}

.lp-platform-name {
    display: block;
    font-weight: 600;
}

.lp-platform-count {
    display: block;
    margin-top: 2px;
    color: var(--lp-muted);
    font-family: var(--lp-font-num);
    font-size: var(--lp-t-xs);
}

/* ── bốn bước: mốc thời gian ─────────────────────────────────────────────── */

.lp-timeline {
    position: relative;
}

/* Đường nối chạy ngang SAU các vòng số, cho thấy đây là một chuỗi phải làm theo
   thứ tự — không phải bốn mục ngang hàng. Chỉ vẽ từ md trở lên: dưới đó bốn bước
   xếp thành 2x2 nên một đường ngang sẽ vô nghĩa. */
@media (min-width: 992px) {
    .lp-timeline::before {
        content: "";
        position: absolute;
        top: 19px;
        left: 12.5%;
        right: 12.5%;
        border-top: 2px dashed var(--lp-line);
    }
}

.lp-step {
    position: relative;
    padding: 0 14px 0 0;
    margin-bottom: 28px;
}

/* Vòng số có nền đặc để "che" đường nối chạy phía sau. */
.lp-step-badge {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin-bottom: 14px;
    background: var(--lp-brand);
    border: 4px solid var(--lp-surface);
    border-radius: 50%;
    box-sizing: content-box;
}

.lp-step-number {
    color: #fff;
    font-family: var(--lp-font-num);
    font-size: var(--lp-t-sm);
    font-weight: 700;
}

.lp-step-title {
    margin: 0 0 6px;
    font-size: var(--lp-t-md);
    font-weight: 600;
}

.lp-step-icon {
    margin-right: 7px;
    color: var(--lp-brand);
    font-size: var(--lp-t-sm);
}

.lp-step-desc {
    margin: 0;
    max-width: 26em;
    color: var(--lp-muted);
    font-size: var(--lp-t-sm);
}

/* ── vì sao chọn: dòng, icon cạnh chữ, không viền ────────────────────────── */

.lp-reason {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 0;
    border-top: 1px solid var(--lp-line-soft);
}

/* Hai dòng đầu của mỗi cột không cần vạch trên. */
.lp-reasons > div:nth-child(1) .lp-reason,
.lp-reasons > div:nth-child(2) .lp-reason {
    border-top: 0;
}

.lp-reason-icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: var(--lp-surface);
    border-radius: 8px;
    color: var(--lp-brand);
    font-size: var(--lp-t-base);
}

.lp-reason-body {
    min-width: 0;
}

.lp-reason-title {
    margin: 0 0 4px;
    font-size: var(--lp-t-base);
    font-weight: 600;
}

.lp-reason-desc {
    margin: 0;
    color: var(--lp-muted);
    font-size: var(--lp-t-sm);
}

/* ── bảng giá ─────────────────────────────────────────────────────────────── */

.lp-price-table {
    background: var(--lp-surface);
    border: 1px solid var(--lp-line);
    border-radius: 6px;
    /* Bọc bảng bằng overflow:hidden để bo góc cắt được cả viền hàng đầu/cuối. */
    overflow: hidden;
}

.lp-price-table table {
    margin-bottom: 0;
}

.lp-price-table thead th {
    padding: 13px 18px;
    background: var(--lp-ground);
    border-bottom: 1px solid var(--lp-line);
    color: var(--lp-muted);
    font-size: var(--lp-t-xs);
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    white-space: nowrap;
}

.lp-price-table tbody td {
    padding: 14px 18px;
    border-top: 1px solid var(--lp-line-soft);
    vertical-align: middle;
}

.lp-price-table tbody tr:first-child td {
    border-top: 0;
}

/* Cả hàng sáng lên khi trỏ vào — dòng nào đang đọc thì thấy rõ, quét 4 dòng giá
   không bị nhầm dòng. Bootstrap .table-hover chỉ tô <tbody> nên khỏi cần class. */
.lp-price-table tbody tr {
    transition: background-color 140ms ease;
}

.lp-price-table tbody tr:hover {
    background: var(--lp-ground);
}

/* Cột số: cho vừa nội dung, phần dư dồn hết cho cột tên dịch vụ. */
.lp-price-min-col,
.lp-price-cost-col {
    width: 1%;
    text-align: right;
}

/* ── ô dịch vụ: icon + tên + thẻ thuộc tính ───────────────────────────────── */

.lp-price-svc {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.lp-price-icon {
    flex: none;
    color: var(--lp-brand);
    line-height: 1;
}

.lp-price-glyph {
    border-radius: 4px;
}

.lp-price-body {
    /* min-width:0 để text-overflow trong flex item hoạt động. */
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.lp-price-name {
    display: block;
    overflow: hidden;
    color: var(--lp-ink);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lp-price-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

/* Thẻ thuộc tính: vốn là phần trong ngoặc vuông của tên dịch vụ trong DB. */
.lp-tag {
    display: inline-block;
    padding: 2px 8px;
    border: 1px solid var(--lp-line);
    border-radius: 3px;
    background: var(--lp-ground);
    color: var(--lp-muted);
    font-size: var(--lp-t-xs);
    line-height: 1.5;
    white-space: nowrap;
}

/* Màu ở đây mang NGHĨA, không phải trang trí: bảo hành là thông số quyết định
   khi so dịch vụ. Cố ý dùng bộ màu semantic riêng, không dùng màu thương hiệu. */
.lp-tag--warranty-yes {
    border-color: #b7dfc4;
    background: #eff9f2;
    color: #1f7a42;
}

.lp-tag--warranty-no {
    border-color: #e6d4b0;
    background: #fdf6e8;
    color: #8a6212;
}

/* ── cột số lượng và giá ──────────────────────────────────────────────────── */

.lp-price-min,
.lp-price-cost {
    text-align: right;
    /* Chữ số cùng bề rộng để các cột số thẳng hàng. */
    font-family: var(--lp-font-num);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.lp-price-min {
    color: var(--lp-muted);
}

/* Giá là thứ người ta quét bảng để tìm. Dùng CÙNG màu accent với con số lớn ở
   hero, nên toàn trang chỉ có một màu duy nhất nghĩa là "tiền". */
.lp-price-value {
    color: var(--lp-accent);
    font-family: var(--lp-font-num);
    font-size: var(--lp-t-md);
    font-weight: 700;
}

.lp-price-unit {
    margin-left: 4px;
    color: var(--lp-muted);
    font-size: var(--lp-t-xs);
    font-weight: 500;
}

.lp-pricing-cta {
    margin: 28px 0 0;
}

/* ── nạp tiền ─────────────────────────────────────────────────────────────── */

.lp-pay-list {
    margin: 0;
    text-align: center;
}

.lp-pay-item {
    display: inline-block;
    padding: 9px 16px;
    margin: 0 6px 10px 0;
    background: var(--lp-surface);
    border: 1px solid var(--lp-line);
    border-radius: 999px;
    color: var(--lp-muted);
    font-size: var(--lp-t-sm);
}

/* ── hỏi đáp ──────────────────────────────────────────────────────────────── */

.lp-accordion .panel {
    border-color: var(--lp-line);
    box-shadow: none;
}

.lp-accordion .panel-heading {
    padding: 0;
    background: var(--lp-surface);
}

.lp-accordion .panel-title > a {
    display: block;
    padding: 15px 18px;
    color: var(--lp-ink);
    font-size: var(--lp-t-base);
    font-weight: 600;
    text-decoration: none;
}

.lp-accordion .panel-title > a:hover {
    color: var(--lp-brand);
}

.lp-accordion-caret {
    float: right;
    margin-top: 3px;
    color: var(--lp-muted);
    font-size: var(--lp-t-xs);
    transition: transform 200ms ease;
}

.lp-accordion .panel-title > a.collapsed .lp-accordion-caret {
    transform: rotate(-90deg);
}

.lp-accordion .panel-body {
    border-top-color: var(--lp-line);
    color: var(--lp-muted);
}

.lp-faq-more {
    display: inline-block;
    margin-top: 8px;
    font-weight: 500;
}

/* ── kêu gọi cuối trang ───────────────────────────────────────────────────── */

.lp-cta {
    padding: 56px 0;
    background: var(--lp-brand);
    color: #fff;
}

.lp-cta-title {
    margin: 0 0 10px;
    color: #fff;
    font-size: var(--lp-t-lg);
}

.lp-cta-sub {
    margin-bottom: 24px;
    color: rgba(255, 255, 255, 0.85);
}

.lp-cta-actions .btn {
    margin: 0 6px 8px;
}

.lp-cta .btn-default {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.6);
    color: #fff;
}

.lp-cta .btn-default:hover,
.lp-cta .btn-default:focus {
    background: rgba(255, 255, 255, 0.12);
    border-color: #fff;
    color: #fff;
}

/* ── chân trang ───────────────────────────────────────────────────────────── */

.lp-footer {
    padding: 46px 0 20px;
    background: var(--lp-ink);
    color: rgba(255, 255, 255, 0.7);
    font-size: var(--lp-t-sm);
}

.lp-footer-title {
    margin: 0 0 14px;
    color: #fff;
    font-size: var(--lp-t-base);
}

.lp-footer-text {
    color: rgba(255, 255, 255, 0.6);
}

.lp-footer-links {
    padding: 0;
    margin: 0 0 18px;
    list-style: none;
}

.lp-footer-links > li {
    padding: 4px 0;
}

.lp-footer-links a,
.lp-footer a {
    color: rgba(255, 255, 255, 0.75);
}

.lp-footer-links a:hover,
.lp-footer a:hover {
    color: #fff;
}

.lp-footer-links i {
    width: 16px;
    margin-right: 5px;
    color: rgba(255, 255, 255, 0.45);
}

.lp-footer-lang > li > a {
    padding: 3px 9px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 3px;
    font-size: var(--lp-t-xs);
    font-weight: 600;
}

.lp-footer-lang > li > a.active {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.5);
    color: #fff;
}

.lp-footer-bottom {
    padding-top: 18px;
    margin-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.5);
    font-size: var(--lp-t-sm);
    text-align: center;
}

.lp-footer-bottom p {
    margin: 0;
}

/* ── nút lên đầu trang ────────────────────────────────────────────────────── */

.lp-to-top {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 1030;
    /* 44x44 là ngưỡng vùng chạm tối thiểu trên thiết bị cảm ứng. */
    width: 44px;
    height: 44px;
    display: none;
    align-items: center;
    justify-content: center;
    background: var(--lp-brand);
    border-radius: 50%;
    color: #fff;
    line-height: 44px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(23, 33, 47, 0.2);
}

.lp-to-top:hover,
.lp-to-top:focus {
    background: var(--lp-brand-dark);
    color: #fff;
}

.lp-to-top.is-visible {
    display: inline-flex;
}

/* ── màn hình nhỏ ─────────────────────────────────────────────────────────── */

@media (max-width: 991px) {
    .lp-hero-title {
        font-size: var(--lp-t-lg);
    }

    /* Thẻ bảng giá xuống dưới khối chữ, cách ra cho thoáng. */
    .lp-hero-media {
        margin-top: 32px;
    }
}

@media (max-width: 767px) {
    body {
        /* navbar thu gọn nên chỉ còn phần header, thấp hơn bản desktop. */
        padding-top: 52px;
    }

    .lp-section {
        padding: 44px 0;
    }

    .lp-hero {
        padding: 38px 0;
    }

    .lp-hero-title {
        font-size: var(--lp-t-lg);
    }

    /* Con số giá 72px tràn màn 375px — hạ xuống bậc 2xl, vẫn là thứ to nhất trang. */
    .lp-figure-value {
        font-size: var(--lp-t-2xl);
    }

    .lp-hero-actions .btn,
    .lp-cta-actions .btn {
        display: block;
        width: 100%;
        margin: 0 0 10px;
    }

    .lp-section-head h2 {
        font-size: var(--lp-t-lg);
    }

    /* Menu thu gọn xếp các mục thành từng dòng full-width, nên bỏ flex canh giữa
       của bản desktop và cho nút trải hết chiều ngang như CTA ở hero.
       Selector nặng như bản desktop — media query không cộng specificity. */
    .lp-nav .navbar-nav > li.lp-nav-cta {
        display: block;
        min-height: 0;
    }

    /* Phải dùng LẠI ĐÚNG selector nặng của bản desktop: media query không cộng
       specificity, nên một selector nhẹ hơn ở đây sẽ bị rule (0,4,2) ở trên đè. */
    .lp-nav .navbar-nav > li.lp-nav-cta > a.btn {
        display: block;
        margin: 8px 0 10px;
    }

    /*
     * Bảng giá trên điện thoại: 3 cột không vừa 375px, mà cho cuộn ngang thì
     * người dùng phải kéo mới thấy giá — tức là ẩn đúng thứ họ vào để xem. Nên
     * chuyển thành thẻ xếp dọc, cùng cách trang /services đang làm.
     */
    .lp-price-table thead {
        display: none;
    }

    .lp-price-table tbody tr {
        display: block;
        padding: 14px 16px;
        border-top: 1px solid var(--lp-line-soft);
    }

    .lp-price-table tbody tr:first-child {
        border-top: 0;
    }

    .lp-price-table tbody td {
        display: block;
        padding: 0;
        border-top: 0;
    }

    .lp-price-svc {
        margin-bottom: 10px;
    }

    /* Số lượng và giá nằm cùng một dòng, nhãn hiện lại qua data-label vì đã ẩn thead. */
    .lp-price-min,
    .lp-price-cost {
        display: flex !important;
        align-items: baseline;
        justify-content: space-between;
        text-align: left;
    }

    .lp-price-min::before,
    .lp-price-cost::before {
        content: attr(data-label);
        color: var(--lp-muted);
        font-size: var(--lp-t-xs);
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }

    .lp-price-min {
        margin-bottom: 4px;
    }

    .lp-price-name {
        white-space: normal;
    }
}

/* Người bật giảm chuyển động thì bỏ hẳn transition, không chỉ làm nhanh hơn. */
@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }

    html {
        scroll-behavior: auto;
    }
}