/* ============================================================
   LANDING PAGE — hệ thiết kế XANH DƯƠNG Y TẾ
   Dựng theo đúng bố cục và bảng màu của bản thiết kế mẫu.
   Dùng ở: app/Views/frontend/landing/show.php + sections.php
   JS: public/assets/js/landing-fx.js

   ĐẶC TRƯNG CỦA MẪU (giữ nguyên khi sửa về sau):
     - Nền trang xanh rất nhạt, thẻ trắng viền xanh nhạt, bo 10-12px.
     - Tiêu đề mục: CĂN GIỮA, IN HOA, xanh đậm, hai bên có hoạ tiết gạch + chấm.
     - Một khối xanh đặc làm điểm nhấn trong mỗi cụm (thẻ Thời gian khám,
       header bảng, dải CTA, khối liên hệ cuối trang).
     - Ảnh luôn đi kèm nội dung: hero, địa điểm, lịch khám, lợi ích.
   ============================================================ */

.lp {
    --lp-900: #0a2d5e;   /* tiêu đề, khối chân trang */
    --lp-800: #0d3b7a;
    --lp-700: #124a9c;
    --lp-600: #1557b0;   /* xanh chủ đạo: nút, khối đặc */
    --lp-500: #2670d8;
    --lp-300: #8ab4ef;
    --lp-100: #dce9fb;
    --lp-50:  #eef5ff;
    --lp-page: #f6faff;  /* nền trang */

    --lp-ink: #0f1d2e;
    /* Chữ thân và chữ phụ để đậm gần đen — bản xám nhạt trước đó đọc rất mờ,
       nhất là các dòng mô tả nhỏ 11–12px trên nền trắng. */
    --lp-body-c: #1e2833;
    --lp-muted: #3c4856;
    --lp-line: #dbe7f6;

    --lp-radius: 12px;
    --lp-shadow: 0 4px 18px rgba(13, 59, 122, .06);
    --lp-shadow-lg: 0 12px 34px rgba(13, 59, 122, .12);
    --lp-container: 1140px;
    /* Nhịp dọc: gọn hơn để trang không bị loãng. Mobile xuống còn 30px. */
    --lp-gap: clamp(30px, 3.2vw, 52px);

    font-family: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 15px;
    line-height: 1.7;
    color: var(--lp-body-c);
    background: var(--lp-page);
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}

.lp *, .lp *::before, .lp *::after { box-sizing: border-box; }
.lp img { max-width: 100%; height: auto; display: block; }
.lp a { text-decoration: none; color: inherit; }

/* ---------- Khung ---------- */
.lp-section { position: relative; padding-block: var(--lp-gap); }
.lp-wrap { width: 100%; max-width: var(--lp-container); margin-inline: auto; padding-inline: 20px; }
.lp-wrap--wide { max-width: 1240px; }
.lp-wrap--full { max-width: none; }

/* ---------- Chữ ---------- */
.lp h1, .lp h2, .lp h3, .lp h4 { color: var(--lp-ink); margin: 0; line-height: 1.3; }

.lp-h1 {
    font-size: clamp(26px, 3.1vw, 40px);
    font-weight: 800;
    line-height: 1.24;
    letter-spacing: -.01em;
    color: var(--lp-900);
    text-transform: uppercase;
}

.lp-h2 {
    font-size: clamp(17px, 1.7vw, 21px);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--lp-900);
    line-height: 1.35;
}

.lp-h3 { font-size: 16px; font-weight: 800; }
.lp-lead { font-size: 14.5px; line-height: 1.75; color: var(--lp-muted); max-width: 62ch; }

.lp-eyebrow {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--lp-600);
    margin-bottom: 10px;
}

/* ---------- Tiêu đề mục: hoạ tiết gạch + chấm hai bên ---------- */
.lp-head { margin-bottom: clamp(20px, 2.2vw, 30px); text-align: center; }
.lp-head--center { margin-inline: auto; }
.lp-head .lp-h2 {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 10px;
}
.lp-head .lp-h2::before,
.lp-head .lp-h2::after {
    content: "";
    width: clamp(22px, 4vw, 46px);
    height: 1px;
    background: var(--lp-300);
    position: relative;
}
/* chấm nhỏ ở đầu mỗi vạch */
.lp-head .lp-h2::before { box-shadow: -7px 0 0 0 var(--lp-300), -11px 0 0 0 rgba(138, 180, 239, .5); }
.lp-head .lp-h2::after  { box-shadow: 7px 0 0 0 var(--lp-300), 11px 0 0 0 rgba(138, 180, 239, .5); }

.lp-head .lp-lead { margin-inline: auto; }
.lp-rule { display: none; }   /* mẫu không dùng thanh gạch dưới tiêu đề */

/* ---------- Nút ---------- */
.lp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 13px 26px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    border: 1.5px solid transparent;
    cursor: pointer;
    font-family: inherit;
    transition: background .2s, color .2s, border-color .2s, transform .2s, box-shadow .2s;
}
/* .lp a { color: inherit } có độ ưu tiên (0,1,1) nên phải viết .lp .lp-btn--* (0,2,0) */
.lp .lp-btn--primary {
    background: var(--lp-600);
    color: #fff;
    box-shadow: 0 6px 16px rgba(21, 87, 176, .28);
}
.lp .lp-btn--primary:hover { background: var(--lp-700); transform: translateY(-1px); }
.lp .lp-btn--primary i { color: #fff; }

.lp .lp-btn--ghost { background: #fff; color: var(--lp-700); border-color: var(--lp-line); }
.lp .lp-btn--ghost:hover { border-color: var(--lp-600); color: var(--lp-600); }
.lp-btn i { font-size: 11px; }

/* ============================================================
   HERO
   ============================================================ */
.lp-hero {
    padding-block: clamp(32px, 4vw, 58px) clamp(36px, 4.4vw, 64px);
    background:
        radial-gradient(720px 420px at 88% 12%, rgba(134, 178, 240, .22), transparent 62%),
        linear-gradient(180deg, #eaf3ff 0%, #f6faff 78%);
    overflow: hidden;
}
.lp-hero::before, .lp-hero::after { display: none; }
.lp-hero__inner { position: relative; z-index: 1; }

.lp-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(28px, 4vw, 56px);
    align-items: center;
}

/* Nhãn cơ quan: chữ nhỏ, không viên thuốc màu */
.lp-hero__badge {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--lp-600);
    background: none;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    margin-bottom: 14px;
    border: 0;
}
.lp-hero__badge i { display: none; }

.lp-hero__title { margin-bottom: 12px; }
/* Dòng nhấn: cùng cỡ tiêu đề nhưng màu xanh chủ đạo, không gradient chữ */
.lp-hero__hl {
    display: inline;
    color: var(--lp-600);
    background: none;
    -webkit-text-fill-color: currentColor;
    box-shadow: none;
}

.lp-hero__slogan {
    font-size: clamp(15px, 1.5vw, 18px);
    font-weight: 700;
    font-style: normal;
    color: var(--lp-800);
    margin: 0 0 16px;
    padding: 0;
    border: 0;
    line-height: 1.5;
}

.lp-hero__lead { margin-bottom: 24px; font-size: 14px; color: var(--lp-body-c); max-width: 52ch; }
.lp-hero__lead p { margin: 0 0 10px; }
.lp-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 30px; }

/* Ba điểm nhấn dưới nút */
.lp-hero__feats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    padding-top: 24px;
    border-top: 1px solid var(--lp-line);
}
.lp-feat { display: flex; gap: 10px; align-items: flex-start; }
.lp-feat__i {
    width: 30px; height: 30px;
    flex-shrink: 0;
    border-radius: 8px;
    background: #fff;
    border: 1px solid var(--lp-line);
    color: var(--lp-600);
    display: grid;
    place-items: center;
    font-size: 12px;
}
.lp-feat__t { font-size: 12.5px; font-weight: 700; color: var(--lp-900); line-height: 1.35; }
.lp-feat__s { font-size: 11.5px; color: var(--lp-muted); line-height: 1.45; margin-top: 2px; }

/* Ảnh hero: bo góc, không khung thẻ dày */
.lp-hero__card { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; overflow: visible; }
.lp-hero__img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 16px;
    box-shadow: 0 18px 44px rgba(13, 59, 122, .16);
}

/* Khi chưa có ảnh: danh sách dữ kiện gọn trong thẻ trắng */
.lp-quick { padding: 6px 20px; background: #fff; border: 1px solid var(--lp-line); border-radius: 16px; box-shadow: var(--lp-shadow); }
.lp-quick__row { display: grid; grid-template-columns: auto 1fr; gap: 13px; align-items: center; padding: 14px 0; }
.lp-quick__row + .lp-quick__row { border-top: 1px solid var(--lp-line); }
.lp-quick__ico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 9px; background: var(--lp-50); color: var(--lp-600); font-size: 14px; }
.lp-quick__k { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--lp-muted); margin-bottom: 2px; }
.lp-quick__v { font-size: 14px; font-weight: 700; color: var(--lp-900); line-height: 1.4; text-align: left; }

/* ---------- Lưới & thẻ chuẩn ---------- */
.lp-grid { display: grid; gap: 16px; background: none; border: 0; }
.lp-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lp-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lp-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.lp-card {
    background: #fff;
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-radius);
    padding: 20px 18px;
    overflow: hidden;
    box-shadow: var(--lp-shadow);
    transition: box-shadow .25s, transform .25s, border-color .25s;
}
.lp-card:hover { box-shadow: var(--lp-shadow-lg); transform: translateY(-2px); border-color: var(--lp-300); }

/* ============================================================
   THÔNG TIN CHƯƠNG TRÌNH (giờ khám)
   1 thẻ xanh đặc + 2 thẻ trắng, dưới là dải lưu ý nền xanh nhạt
   ============================================================ */
.lp-hours {
    display: grid;
    grid-template-columns: 1.25fr 1fr 1fr;
    gap: 16px;
    background: none;
    border: 0;
}

.lp-hours__when {
    background: var(--lp-600);
    color: #fff;
    border-radius: var(--lp-radius);
    padding: 24px 24px;
    box-shadow: 0 10px 26px rgba(21, 87, 176, .26);
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px;
    align-items: center;
}
/* Ô vuông chứa icon lịch bên trái */
.lp-hours__when::before {
    content: "\f073";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    width: 52px; height: 52px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .16);
    display: grid;
    place-items: center;
    font-size: 21px;
}
.lp-hours__when > * { grid-column: 2; }
.lp-hours__when .lp-eyebrow { color: rgba(255, 255, 255, .78); margin-bottom: 6px; font-size: 10.5px; }
.lp-hours__lbl { font-size: clamp(16px, 1.6vw, 20px); font-weight: 800; margin: 0 0 4px; line-height: 1.3; }
.lp-hours__range { font-size: 12.5px; color: rgba(255, 255, 255, .82); }

.lp-shift { display: contents; }   /* 2 thẻ ca khám nằm thẳng vào lưới 3 cột */

.lp-shift__c {
    background: #fff;
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-radius);
    padding: 22px 18px;
    text-align: center;
    box-shadow: var(--lp-shadow);
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: box-shadow .25s, transform .25s;
}
.lp-shift__c:hover { box-shadow: var(--lp-shadow-lg); transform: translateY(-2px); }
.lp-shift__ico { display: block; font-size: 22px; margin-bottom: 8px; }
.lp-shift__c--am .lp-shift__ico { color: #f0a92b; }
.lp-shift__c--pm .lp-shift__ico { color: var(--lp-500); }
.lp-shift__n { font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--lp-muted); margin-bottom: 6px; }
.lp-shift__t { font-size: clamp(17px, 1.8vw, 21px); font-weight: 800; color: var(--lp-900); font-variant-numeric: tabular-nums; }

/* Dải lưu ý nền xanh nhạt, căn giữa */
.lp-note {
    margin-top: 16px;
    display: block;
    padding: 14px 20px;
    background: var(--lp-50);
    border: 1px solid var(--lp-100);
    border-radius: 10px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--lp-800);
    text-align: center;
}
.lp-note::before, .lp-note::after { content: none; }
.lp-note i { display: none; }
.lp-note > div { display: inline; }
.lp-note > div::before { content: "Lưu ý: "; font-weight: 800; color: var(--lp-900); }

/* ============================================================
   ĐỐI TƯỢNG VÀ ĐỊA ĐIỂM
   Trái: lưới thẻ đối tượng.  Phải: thẻ địa chỉ + ảnh cơ sở.
   ============================================================ */
.lp-locwrap { display: grid; grid-template-columns: 1.15fr .85fr; gap: 18px; align-items: start; }

.lp-loc {
    position: relative;
    padding: 16px 16px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    align-items: start;
}
.lp-loc__no {
    position: static;
    width: 34px; height: 34px;
    border-radius: 8px;
    background: var(--lp-50);
    color: var(--lp-600);
    display: grid;
    place-items: center;
    font-size: 13px;
    font-weight: 800;
    box-shadow: none;
    margin: 0;
    flex-shrink: 0;
}
/* Cột chữ của thẻ địa điểm — phải là MỘT khối con, xem chú thích ở sections.php */
.lp-loc__body { min-width: 0; }
.lp-loc__ico { display: none; }
.lp-loc__name { font-size: 13px; font-weight: 800; color: var(--lp-900); line-height: 1.35; margin-bottom: 5px; }
.lp-loc__addr {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--lp-600);
    background: none;
    border-radius: 0;
    padding: 0;
    margin: 0 0 5px;
    border: 0;
}
.lp-loc__addr i { display: none; }
.lp-loc__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.lp-loc__list li { position: relative; padding-left: 0; font-size: 12px; line-height: 1.55; color: var(--lp-muted); }
.lp-loc__list li::before { display: none; }

/* Thẻ địa điểm khám bên phải */
.lp-venue { background: #fff; border: 1px solid var(--lp-line); border-radius: var(--lp-radius); padding: 22px; box-shadow: var(--lp-shadow); }
.lp-venue__h { display: flex; align-items: center; gap: 9px; font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--lp-600); margin-bottom: 14px; }
.lp-venue__n { font-size: 16px; font-weight: 800; color: var(--lp-900); margin-bottom: 6px; }
.lp-venue__a { font-size: 13.5px; line-height: 1.6; color: var(--lp-body-c); }
.lp-venue__img { margin-top: 16px; border-radius: 10px; overflow: hidden; border: 1px solid var(--lp-line); }
.lp-venue__img img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

/* Bản đồ */
.lp-map { margin-top: 18px; border-radius: var(--lp-radius); overflow: hidden; border: 1px solid var(--lp-line); background: #fff; box-shadow: var(--lp-shadow); }
.lp-map__bar { display: flex; align-items: center; gap: 9px; padding: 12px 16px; background: #fff; border-bottom: 1px solid var(--lp-line); font-size: 12.5px; font-weight: 700; color: var(--lp-900); }
.lp-map__bar i { color: var(--lp-600); font-size: 12px; }
.lp-map__go { margin-left: auto; }
.lp-map__frame { position: relative; width: 100%; aspect-ratio: 16 / 7; min-height: 220px; }
.lp-map__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lp-map__ph { position: absolute; inset: 0; display: grid; place-items: center; gap: 8px; color: var(--lp-muted); font-size: 12.5px; background: var(--lp-50); }
.lp-map__ph i { opacity: .4; }

/* ============================================================
   LỊCH KHÁM — bảng trái, ảnh phải
   ============================================================ */
.lp-schedwrap { display: grid; grid-template-columns: 1.25fr .75fr; gap: 20px; align-items: start; }
.lp-sched__img { border-radius: var(--lp-radius); overflow: hidden; border: 1px solid var(--lp-line); box-shadow: var(--lp-shadow); }
.lp-sched__img img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }

.lp-round { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 12px; }
.lp-round__lbl { font-size: 13.5px; font-weight: 800; color: var(--lp-900); }
.lp-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 11px; border-radius: 20px;
    font-size: 11.5px; font-weight: 700;
    background: var(--lp-50); color: var(--lp-700);
    border: 1px solid var(--lp-100);
}
.lp-chip--am, .lp-chip--pm { background: var(--lp-50); color: var(--lp-700); }
.lp-chip i { font-size: 10px; }

.lp-tablewrap { border-radius: var(--lp-radius); border: 1px solid var(--lp-line); overflow: hidden; background: #fff; box-shadow: var(--lp-shadow); }
.lp-table { width: 100%; border-collapse: collapse; }
.lp-table thead tr { background: var(--lp-600); }
.lp-table thead th {
    padding: 13px 16px;
    text-align: left;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #fff;
    background: transparent;
    vertical-align: middle;
}
.lp-table tbody td {
    padding: 13px 16px;
    border-top: 1px solid var(--lp-line);
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--lp-body-c);
    vertical-align: top;
}
.lp-table tbody tr:nth-child(even) { background: #fafcff; }
.lp-table tbody tr:hover { background: var(--lp-50); }
.lp-table__date { font-weight: 700; color: var(--lp-900); white-space: nowrap; }
.lp-cellico { display: inline-flex; align-items: flex-start; gap: 7px; }
.lp-cellico i { display: none; }

.lp-dir {
    display: inline-flex; align-items: center; gap: 5px;
    margin-top: 5px; padding: 3px 10px;
    border-radius: 20px;
    background: var(--lp-50); border: 1px solid var(--lp-100);
    font-size: 11px; font-weight: 700; color: var(--lp-600);
    transition: background .2s, color .2s;
}
.lp-dir:hover { background: var(--lp-600); color: #fff; border-color: transparent; }
.lp-dir i { font-size: 9px; }

/* Bản mobile của lịch khám */
.lp-daycards { display: none; }
.lp-day { background: #fff; border: 1px solid var(--lp-line); border-radius: var(--lp-radius); overflow: hidden; box-shadow: var(--lp-shadow); }
.lp-day__h { padding: 11px 15px; background: var(--lp-600); color: #fff; font-size: 13.5px; font-weight: 800; }
.lp-day__r { display: flex; gap: 11px; padding: 12px 15px; }
.lp-day__r + .lp-day__r { border-top: 1px solid var(--lp-line); }
.lp-day__i { display: grid; place-items: center; width: 30px; height: 30px; flex-shrink: 0; border-radius: 8px; background: var(--lp-50); color: var(--lp-600); font-size: 12px; }
/* Không để nhãn nhỏ hơn 11px — dưới ngưỡng đó rất khó đọc trên điện thoại */
.lp-day__k { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--lp-muted); margin-bottom: 2px; }
.lp-day__v { font-size: 13.5px; font-weight: 700; color: var(--lp-900); line-height: 1.45; }

/* ============================================================
   GIẤY TỜ MANG THEO — 5 thẻ nhỏ trên một hàng
   ============================================================ */
.lp-bringrow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.lp-bring {
    display: flex; align-items: center; gap: 10px;
    text-align: left; padding: 14px 13px;
    background: #fff; border: 1px solid var(--lp-line);
    border-radius: 10px; box-shadow: var(--lp-shadow);
    transition: box-shadow .25s, transform .25s, border-color .25s;
}
.lp-bring:hover { box-shadow: var(--lp-shadow-lg); transform: translateY(-2px); border-color: var(--lp-300); }
.lp-bring__ico {
    display: grid; place-items: center;
    width: 34px; height: 34px; flex-shrink: 0; margin: 0;
    border-radius: 8px; background: var(--lp-50);
    color: var(--lp-600); font-size: 14px;
    box-shadow: none; overflow: hidden;
}
.lp-bring__ico img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
.lp-bring__l { font-size: 11.5px; font-weight: 700; color: var(--lp-900); line-height: 1.35; }

/* ============================================================
   LỢI ÍCH — ảnh trái, danh sách đánh số phải
   ============================================================ */
.lp-benefit { display: grid; grid-template-columns: .8fr 1.2fr; gap: 26px; align-items: center; }
.lp-benefit__img { border-radius: var(--lp-radius); overflow: hidden; border: 1px solid var(--lp-line); box-shadow: var(--lp-shadow); }
.lp-benefit__img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.lp-benefit__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lp-benefit__list li {
    display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center;
    background: #fff; border: 1px solid var(--lp-line);
    border-radius: 10px; padding: 13px 16px;
    font-size: 13.5px; line-height: 1.6; color: var(--lp-body-c);
    transition: border-color .22s, box-shadow .22s;
}
.lp-benefit__list li:hover { border-color: var(--lp-300); box-shadow: var(--lp-shadow); }
.lp-benefit__n {
    width: 32px; height: 32px; border-radius: 8px;
    background: var(--lp-600); color: #fff;
    display: grid; place-items: center;
    font-size: 12.5px; font-weight: 800;
    font-variant-numeric: tabular-nums;
}

/* ============================================================
   ĐỐI TƯỢNG THỤ HƯỞNG / NHÓM ƯU TIÊN — thẻ icon + chữ
   ============================================================ */
.lp-audlist {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px;
    background: none; border: 0; border-radius: 0; overflow: visible;
}
.lp-aud {
    display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center;
    background: #fff; border: 1px solid var(--lp-line);
    border-radius: 10px; padding: 16px 16px;
    box-shadow: var(--lp-shadow);
    transition: box-shadow .25s, transform .25s, border-color .25s;
}
.lp-aud + .lp-aud { border-top: 1px solid var(--lp-line); }
.lp-aud:hover { background: #fff; box-shadow: var(--lp-shadow-lg); transform: translateY(-2px); border-color: var(--lp-300); }
.lp-aud__k {
    display: grid; place-items: center;
    width: 38px; height: 38px; border-radius: 9px;
    background: var(--lp-50); color: var(--lp-600);
    font-size: 15px; font-weight: 800; line-height: 1;
    -webkit-text-fill-color: currentColor;
    text-align: center; letter-spacing: 0;
    flex-shrink: 0;
}
.lp-aud__b { display: block; min-width: 0; }
.lp-aud__n { display: block; font-size: 13px; font-weight: 800; color: var(--lp-900); line-height: 1.35; margin-bottom: 3px; }
.lp-aud__t {
    font-size: 11.5px; line-height: 1.5; color: var(--lp-muted);
    padding: 0; border: 0; display: block;
}

/* ============================================================
   GÓI KHÁM — thẻ có dải tiêu đề nền xanh nhạt + danh sách đánh số
   ============================================================ */
.lp-pkg { display: flex; flex-direction: column; padding: 0; }
.lp-pkg__top {
    padding: 15px 18px;
    background: var(--lp-50);
    border-bottom: 1px solid var(--lp-line);
    display: flex; align-items: center; gap: 10px;
}
.lp-pkg__badge { display: none; }
.lp-pkg__ico {
    display: grid; place-items: center;
    float: none; width: 30px; height: 30px;
    border-radius: 8px; background: #fff;
    border: 1px solid var(--lp-line);
    color: var(--lp-600); font-size: 14px; flex-shrink: 0;
}
.lp-pkg__name {
    font-size: 12.5px; font-weight: 800; color: var(--lp-900);
    line-height: 1.35; margin: 0;
    text-transform: uppercase; letter-spacing: .04em;
}
.lp-pkg__purpose { display: none; }

.lp-pkg__body { padding: 18px; flex: 1; background: #fff; }
.lp-pkg__st { display: none; }

.lp-pkg__list { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 9px; counter-reset: pkg; }
.lp-pkg__list li {
    position: relative; padding-left: 24px;
    font-size: 13px; line-height: 1.6; color: var(--lp-body-c);
    counter-increment: pkg;
}
/* Đánh số 1. 2. 3. như mẫu, thay cho dấu tích trong vòng tròn */
.lp-pkg__list li::before {
    content: counter(pkg) ".";
    font-family: inherit; font-weight: 700;
    position: absolute; left: 0; top: 0;
    width: auto; height: auto;
    background: none; color: var(--lp-600);
    font-size: 13px; display: block;
    border-radius: 0;
}

.lp-pkg__meta { border-top: 1px solid var(--lp-line); padding-top: 14px; display: grid; gap: 10px; }
.lp-pkg__row { display: block; font-size: 12px; line-height: 1.55; color: var(--lp-muted); }
.lp-pkg__row i { display: none; }
.lp-pkg__row b { display: block; color: var(--lp-900); font-weight: 700; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 3px; }
.lp-pkg__legal { margin-top: 12px; padding: 10px 12px; background: var(--lp-50); border-radius: 8px; border: 0; font-size: 11.5px; line-height: 1.55; color: var(--lp-muted); }
.lp-pkg__legal i { display: none; }

/* ============================================================
   NGÀNH NGHỀ ĐẶC THÙ
   ============================================================ */
.lp-spec { display: grid; grid-template-columns: auto 1fr; gap: 12px; padding: 16px; align-items: center; }
.lp-spec__i {
    display: grid; place-items: center;
    width: 34px; height: 34px; border-radius: 8px;
    background: var(--lp-50); color: var(--lp-600);
    font-size: 14px; margin: 0; flex-shrink: 0;
}
.lp-spec__n { font-size: 13px; font-weight: 800; color: var(--lp-900); margin-bottom: 3px; }
.lp-spec__l { font-size: 11.5px; line-height: 1.5; color: var(--lp-muted); }

/* ============================================================
   MỐC THỜI GIAN — 4 thẻ ngang, số tròn xanh, mũi tên giữa
   ============================================================ */
.lp-tl {
    position: relative; display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 34px; border-left: 0;
}
.lp-tl::before { display: none; }

.lp-tl__i {
    position: relative; display: block; padding: 22px 18px;
    background: #fff; border: 1px solid var(--lp-line);
    border-radius: var(--lp-radius); box-shadow: var(--lp-shadow);
    text-align: center;
}
/* Mũi tên nối giữa các bước */
.lp-tl__i + .lp-tl__i::before {
    content: "\f061";
    font-family: "Font Awesome 6 Free"; font-weight: 900;
    position: absolute; left: -25px; top: 50%;
    transform: translateY(-50%);
    color: var(--lp-300); font-size: 14px;
}

.lp-tl__dot {
    position: static; width: 46px; height: 46px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: var(--lp-50);
    border: 0; color: var(--lp-600);
    display: grid; place-items: center;
    font-size: 15px; font-weight: 800;
    box-shadow: none;
    font-variant-numeric: tabular-nums;
}
.lp-tl__dot i { display: none; }

.lp-tl__t { font-size: 13.5px; font-weight: 800; color: var(--lp-900); margin-bottom: 5px; }
.lp-tl__d { font-size: 12px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--lp-600); margin-bottom: 8px; }
.lp-tl__x { font-size: 12px; line-height: 1.55; color: var(--lp-muted); max-width: none; }

/* ============================================================
   DẢI KÊU GỌI (CTA) — thanh xanh bo tròn
   ============================================================ */
.lp-eh {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    padding: 18px 26px; border-radius: 10px;
    background: var(--lp-600); color: #fff;
    box-shadow: 0 10px 26px rgba(21, 87, 176, .26);
    text-align: center;
}
.lp-eh__i { display: grid; place-items: center; width: auto; height: auto; background: none; border: 0; font-size: 17px; flex-shrink: 0; border-radius: 0; }
.lp-eh h3 { color: #fff; font-size: clamp(13px, 1.35vw, 16px); font-weight: 800; text-transform: uppercase; letter-spacing: .05em; margin: 0; }
.lp-eh p { margin: 0; font-size: 12.5px; color: rgba(255, 255, 255, .88); max-width: none; }
.lp-eh small { display: none; }

/* ============================================================
   CĂN CỨ PHÁP LÝ — 3 thẻ ngang
   ============================================================ */
.lp-legal {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px;
    background: none; border: 0; border-radius: 0; overflow: visible;
}
.lp-legal__i {
    display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start;
    padding: 18px 16px;
    background: #fff; border: 1px solid var(--lp-line);
    border-radius: 10px; box-shadow: var(--lp-shadow);
    font-size: 12px; line-height: 1.55; color: var(--lp-muted);
    transition: box-shadow .25s, border-color .25s;
}
.lp-legal__i + .lp-legal__i { border-top: 1px solid var(--lp-line); }
.lp-legal__i:hover { box-shadow: var(--lp-shadow-lg); border-color: var(--lp-300); background: #fff; }
.lp-legal__i i {
    display: grid; place-items: center;
    width: 34px; height: 34px; margin: 0;
    border-radius: 8px; background: var(--lp-50);
    color: var(--lp-600); font-size: 14px;
    font-family: "Font Awesome 6 Free"; font-weight: 900;
}

/* ============================================================
   LIÊN HỆ — khối xanh đậm cuối trang
   ============================================================ */
.lp-contact {
    border-radius: var(--lp-radius);
    background: var(--lp-900);
    color: #fff;
    padding: clamp(30px, 3.6vw, 48px) clamp(20px, 3vw, 40px);
    text-align: center;
    box-shadow: none;
}
.lp-contact h2 { color: #fff; margin-bottom: 8px; }
.lp-contact h2::before, .lp-contact h2::after { background: rgba(255, 255, 255, .35); box-shadow: none; }
.lp-contact__org { font-size: 13.5px; color: rgba(255, 255, 255, .78); font-weight: 400; }
.lp-contact__org2 { font-size: 13px; color: rgba(255, 255, 255, .6); margin-bottom: 26px; }

.lp-contact__grid {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px; background: none; border: 0; margin-bottom: 26px;
}
.lp-contact__c {
    background: none; border: 0; border-radius: 0; padding: 0;
    color: #fff; display: grid; grid-template-columns: auto 1fr;
    gap: 12px; align-items: center; text-align: left;
    justify-content: center;
    transition: opacity .2s;
}
.lp-contact__c:hover { background: none; transform: none; opacity: .82; }
.lp-contact__ci {
    display: grid; place-items: center;
    width: 40px; height: 40px; border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    font-size: 15px; color: #fff; margin: 0;
}
.lp-contact__ck { font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .72); margin-bottom: 3px; }
.lp-contact__cv { font-size: 13.5px; font-weight: 700; line-height: 1.45; word-break: break-word; color: #fff; }

.lp-contact__closing {
    font-size: 13.5px; font-weight: 600; font-style: normal;
    color: rgba(255, 255, 255, .88);
    padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .16);
    max-width: none; line-height: 1.5;
}

/* ---------- Richtext / CTA nút ---------- */
.lp-rt { font-size: 14.5px; line-height: 1.8; color: var(--lp-body-c); max-width: 74ch; margin-inline: auto; }
.lp-rt h2, .lp-rt h3 { margin: 26px 0 12px; }
.lp-rt p { margin: 0 0 14px; }
.lp-rt a { color: var(--lp-600); text-decoration: underline; text-underline-offset: 3px; }
.lp-cta { text-align: center; }
.lp-cta__btns { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 22px; }

/* ---------- Ảnh trong thẻ ---------- */
.lp-thumb { display: block; margin: -20px -18px 14px; aspect-ratio: 16 / 9; overflow: hidden; background: var(--lp-50); border-bottom: 1px solid var(--lp-line); }
.lp-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.lp-card:hover .lp-thumb img { transform: scale(1.04); }
.lp-pkg .lp-thumb { margin: 0; aspect-ratio: 21 / 9; border-bottom: 1px solid var(--lp-line); }

/* ---------- Hiệu ứng ---------- */
.lp-fx { opacity: 0; transform: translateY(16px); transition: opacity .7s cubic-bezier(.2, .8, .3, 1), transform .7s cubic-bezier(.2, .8, .3, 1); }
.lp-fx.is-in { opacity: 1; transform: none; }
.lp-fx--fade-in, .lp-fx--zoom { transform: none; }
.lp-stagger > * { opacity: 0; transform: translateY(16px); transition: opacity .6s cubic-bezier(.2, .8, .3, 1), transform .6s cubic-bezier(.2, .8, .3, 1); }
.lp-stagger.is-in > * { opacity: 1; transform: none; }
.lp-stagger.is-in > *:nth-child(1) { transition-delay: .03s; }
.lp-stagger.is-in > *:nth-child(2) { transition-delay: .08s; }
.lp-stagger.is-in > *:nth-child(3) { transition-delay: .13s; }
.lp-stagger.is-in > *:nth-child(4) { transition-delay: .18s; }
.lp-stagger.is-in > *:nth-child(5) { transition-delay: .23s; }
.lp-stagger.is-in > *:nth-child(6) { transition-delay: .28s; }
.lp-stagger.is-in > *:nth-child(7) { transition-delay: .33s; }

.lp-preview {
    position: sticky; top: 0; z-index: 9500;
    display: flex; align-items: center; gap: 12px;
    padding: 11px 20px; background: #78350f; color: #fde68a;
    font-size: 13px; font-weight: 700;
}
.lp-preview a { color: #fff; margin-left: auto; text-decoration: underline; }

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width: 1024px) {
    .lp-hero__grid { grid-template-columns: 1fr; }
    .lp-hero__card { order: -1; }
    .lp-hours { grid-template-columns: 1fr 1fr; }
    .lp-hours__when { grid-column: 1 / -1; }
    .lp-locwrap, .lp-schedwrap, .lp-benefit { grid-template-columns: 1fr; }
    .lp-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lp-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lp-bringrow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lp-audlist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lp-legal { grid-template-columns: 1fr; }
    .lp-tl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
    .lp-tl__i + .lp-tl__i::before { display: none; }
    .lp-sched__img img { aspect-ratio: 16 / 9; }
}

@media (max-width: 860px) {
    .lp-tablewrap { display: none; }
    .lp-daycards { display: grid; gap: 12px; }
}

@media (max-width: 700px) {
    .lp { font-size: 14.5px; }
    .lp-wrap { padding-inline: 16px; }
    .lp-grid--2, .lp-grid--3, .lp-grid--4 { grid-template-columns: 1fr; }
    .lp-grid { gap: 12px; }
    .lp-hero { padding-block: 24px 28px; }
    .lp-hero__feats { padding-top: 18px; }
    .lp-head { margin-bottom: 18px; }
    .lp-note { margin-top: 12px; padding: 12px 16px; font-size: 13px; }
    .lp-map { margin-top: 14px; }
    .lp-locwrap, .lp-schedwrap, .lp-benefit { gap: 16px; }
    .lp-card { padding: 16px 15px; }
    .lp-contact { padding: 28px 20px; }
    .lp-hero__cta { flex-direction: column; }
    .lp-hero__cta .lp-btn { width: 100%; }
    .lp-hero__feats { grid-template-columns: 1fr; gap: 12px; }
    .lp-hours { grid-template-columns: 1fr; }
    .lp-bringrow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .lp-audlist { grid-template-columns: 1fr; }
    .lp-tl { grid-template-columns: 1fr; }
    .lp-contact__grid { grid-template-columns: 1fr; gap: 16px; }
    .lp-contact__c { justify-content: flex-start; }
    .lp-benefit__list li { grid-template-columns: auto 1fr; }
    .lp-map__frame { aspect-ratio: 4 / 3; min-height: 220px; }
}

@media print {
    .lp-map, .lp-preview, .lp-btn { display: none !important; }
    .lp-section { padding-block: 18px; }
    .lp-card, .lp-tablewrap { box-shadow: none; break-inside: avoid; }
}

@media (prefers-reduced-motion: reduce) {
    .lp-fx, .lp-stagger > * { opacity: 1 !important; transform: none !important; transition: none !important; }
    .lp-card, .lp-btn, .lp-bring, .lp-contact__c, .lp-shift__c, .lp-aud { transition: none; }
}

.lp a:focus-visible, .lp button:focus-visible { outline: 2px solid var(--lp-600); outline-offset: 3px; border-radius: 4px; }