/* COMPANY/P2 — Page hero/breadcrumb, danh sách dịch vụ, chi tiết dịch vụ, Giới thiệu, Liên hệ */

/* ===== Page hero (breadcrumb) dùng chung ===== */
.p1-page-hero {
    position: relative;
    padding: calc(var(--p1-header-h) + 44px) 0 44px;
    background: var(--p1-brand-grad);
    border-bottom: 1px solid var(--p1-border);
}

/*
 * CỠ CHỮ H1 THỐNG NHẤT cho mọi trang trong (danh sách, danh mục, chi tiết dịch vụ / tin tức, trang đơn, Giới thiệu, Liên hệ):
 * .p1-page-hero__title và .p1-svc-hero__title dùng CHUNG một quy tắc này (trước đây 46px và 42px, lệch nhau và quá lớn với tiêu đề dài).
 * Co giãn 24 → 34px theo bề rộng màn hình; tiêu đề dài xuống dòng gọn trong khung 900px.
 */
.p1-page-hero__title,
.p1-svc-hero__title {
    max-width: 900px;
    margin: 0 0 12px;
    font-size: clamp(24px, 2.9vw, 34px);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.015em;
}

.p1-page-hero__desc {
    color: var(--p1-text-muted);
    font-size: 16px;
    max-width: 800px;
    margin: 0;
    line-height: 1.7;
}

/* Mô tả hero Giới thiệu dài hơn, kể chuyện gắn 3 giá trị OLA (Open/Learn/Achieve) — nới rộng khung chữ và
   làm nổi 3 từ khoá giá trị (đánh dấu <strong>) bằng trắng đậm + gạch chân mảnh, nổi bật giữa đoạn chữ mờ hơn. */
.p1-about-hero .p1-page-hero__desc {
    max-width: 860px;
}

.p1-about-hero .p1-page-hero__desc strong {
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    text-decoration-color: rgba(255, 255, 255, .4);
    text-underline-offset: 3px;
}

/* ===== Danh sách dịch vụ ===== */
.p1-service-list {
    padding: 36px 0 var(--p1-sec-y);
}

.p1-service-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 28px;
}

    .p1-service-tabs a {
        padding: 8px 20px;
        border-radius: 999px;
        border: 1px solid var(--p1-border);
        color: var(--p1-text-muted);
        font-size: 14px;
        font-weight: 600;
    }

.p1-service-tabs a:hover {
    border-color: rgba(0, 104, 255, .35);
    color: var(--p1-brand-1);
}

.p1-service-tabs a.is-active,
.p1-service-tabs a.is-active:hover {
    background: var(--p1-brand-1);
    border-color: transparent;
    color: #fff;
}

.p1-pagination {
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    margin-top: 32px;
    list-style: none;
    padding: 10px 4px;
    max-width: 100%;
    overflow: visible;
    position: relative;
    z-index: 2;
}

.p1-pagination a,
.p1-pagination span {
    position: relative;
    z-index: 0;
    flex: none;
    width: auto;
    min-width: 40px;
    height: 40px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid var(--p1-border);
    color: var(--p1-text-muted);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

.p1-pagination .is-active {
    background: var(--p1-accent-grad);
    border-color: transparent;
    color: #fff;
}

.p1-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
   
    margin: 0 auto;
    padding: 48px 32px;
    text-align: center;
    color: var(--p1-text-muted);   
    border-radius: var(--p1-radius);
    
}

.p1-empty__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 6px;
    border-radius: 999px;
    background: rgba(0, 104, 255, .08);
    color: var(--p1-brand-1);
    font-size: 22px;
}

.p1-empty__title {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--p1-text);
}

.p1-empty__desc {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
}

.p1-empty__btn {
    margin-top: 10px;
}

/* ===== Chi tiết dịch vụ (kiểu trang sản phẩm AI) ===== */
.p1-svc-hero {
    position: relative;
    padding: calc(var(--p1-header-h) + 48px) 0 52px;
    background:
        var(--p1-brand-grad);
    border-bottom: 1px solid var(--p1-border);
}

.p1-svc-hero__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 28px;
}

.p1-svc-hero__text {
    flex: 1 1 420px;
}

.p1-svc-hero__desc {
    color: var(--p1-text-muted);
    font-size: 16px;
    line-height: 1.7;
    max-width: 800px;
    margin: 0 0 20px;
}

.p1-svc-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

/* Nút "Gọi ngay" hiện số điện thoại: nhịp thở nhẹ + số tô vàng kim để nổi bật, không lấn hiệu ứng hover có sẵn của .btn-p1-outline. */
.p1-svc-hero__call-btn {
    animation: p1CtaBtnPulse 1.8s ease-in-out infinite;
}

.p1-svc-hero__call-btn:hover {
    animation-play-state: paused;
}

.p1-svc-hero__call-number {
    font-weight: 800;
    color: #ffd782;
    margin-left: 2px;
}

.p1-svc-body {
    padding: 36px 0 var(--p1-sec-y);
}

.p1-svc-content {
    font-size: 16px;
    text-align: justify;
    color: var(--p1-text);
}

/* Đoạn mở đầu (ShortDescription) hiển thị trước nội dung đầy đủ trên ChiTietTinTuc.aspx — chỉ hiện khi bài viết
   có ĐỦ cả 2 trường (xem LeadHtml, ChiTietTinTuc.aspx.cs), đậm + hơi lớn hơn để phân biệt với nội dung chính. */
.p1-svc-lead {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.6;
    color: var(--p1-brand-2);
    margin: 0 0 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--p1-border);
}

.p1-svc-lead p {
    margin: 0 0 10px;
}

.p1-svc-lead p:last-child {
    margin-bottom: 0;
}

.p1-svc-content h2,
.p1-svc-content h3 {
    color: var(--p1-text);
    font-weight: 800;
    margin: 28px 0 12px;
}

.p1-svc-content p {
    margin: 0 0 14px;
}

.p1-svc-content ul,
.p1-svc-content ol {
    margin: 0 0 18px;
    padding-left: 22px;
}

.p1-svc-content li {
    margin-bottom: 8px;
}

.p1-svc-content img {
    border-radius: var(--p1-radius);
    margin: 12px 0;
}

/* Ảnh/đoạn đầu tiên trong nội dung CMS không được có khoảng hở phía trên — để mép trên bằng với thẻ tư vấn ở cột bên phải. */
.p1-svc-content > *:first-child,
.p1-svc-content > *:first-child > *:first-child {
    margin-top: 0;
}

/* Nội dung HTML giới thiệu danh mục (Categories.Description) hiển thị dưới danh sách */
.p1-category-content {
    margin-top: var(--p1-head-gap);
    padding-top: var(--p1-head-gap);
    border-top: 1px solid var(--p1-border);
}

.p1-category-content img,
.p1-category-content iframe,
.p1-category-content video {
    max-width: 100%;
    height: auto;
}

.p1-category-content table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}

/* Lưới ảnh TỐI ĐA 4 cột (số cột theo số ảnh qua --cols do GalleryGridHtml đặt); quá 4 ảnh → ô thứ 4 phủ "+X ảnh". Điện thoại: 2 cột. */
.p1-svc-gallery {
    display: grid;
    grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
    gap: 12px;
    margin: 30px 0;
}

@media (max-width: 575px) {
    .p1-svc-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }
}

/* Thư viện ảnh đặt đầu trang (trên mô tả): sát mép trên cột, chỉ chừa khoảng cách dưới. */
.p1-svc-gallery--top {
    margin: 0 0 28px;
}

.p1-svc-gallery__item {
    position: relative;
    display: block;
    border-radius: var(--p1-radius-sm);
    overflow: hidden;
    aspect-ratio: 4/3;
    border: 1px solid var(--p1-border);
}

.p1-svc-gallery__hidden {
    display: none;
}

/* Lớp phủ "+X ảnh" trên ô cuối: nền tối mờ, biểu tượng ảnh + số ảnh còn lại (giống ô "+N Ảnh" của trang chi tiết tour) */
.p1-svc-gallery__more {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(8, 20, 50, .55);
    color: #fff;
    text-align: center;
    transition: background .4s var(--p1-ease-out);
}

.p1-svc-gallery__more > span {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
}

.p1-svc-gallery__more i {
    font-size: 24px;
}

.p1-svc-gallery__item:hover .p1-svc-gallery__more {
    background: rgba(8, 20, 50, .4);
}

.p1-svc-gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease;
}

.p1-svc-gallery__item:hover img {
    transform: scale(1.06);
}

.p1-svc-video {
    position: relative;
    aspect-ratio: 16/9;
    border-radius: var(--p1-radius);
    overflow: hidden;
    margin: 30px 0;
    border: 1px solid var(--p1-border);
}

.p1-svc-video iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

/* ----- Slider media trang đơn (Pages.aspx: gộp Avatar + Gallery + VideoUrl thành 1 băng, xem BuildMediaSlides
   trong Pages.aspx.cs) — điều hướng bằng nút mũi tên trái/phải, KHÔNG tự chạy; bấm ảnh/video đang hiện mở Fancybox
   (mỗi .p1-page-slider__item đã có sẵn data-fancybox="page-media" nên lightbox tự có điều hướng riêng). ----- */
.p1-page-slider {
    position: relative;
    margin: 0 0 30px;
    border-radius: var(--p1-radius);
    overflow: hidden;    
    aspect-ratio: 16/9;
    border: 1px solid var(--p1-border);
}

.p1-page-slider__track {
    position: relative;
    width: 100%;
    height: 100%;
}

.p1-page-slider__item {
    position: absolute;
    inset: 0;
    display: block;
    opacity: 0;
    visibility: hidden;
    transition: opacity .45s var(--p1-ease);
}

.p1-page-slider__item.is-active {
    opacity: 1;
    visibility: visible;
}

.p1-page-slider__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.p1-page-slider__item--video::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(6, 15, 35, .35);
    z-index: 1;
}

/* Video live (AdManager / JS upgrade autoplay): bỏ overlay tối + icon play */
.p1-page-slider__item--video-live::before {
    display: none !important;
    content: none !important;
}

.p1-page-slider__item--video-live {
    background: #0f172a;
}

.p1-page-slider__item--video-live .ola-ad-video,
.p1-page-slider__item--video-live .ola-ad-video.ratio {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    aspect-ratio: unset !important;
    border-radius: 0 !important;
    margin: 0 !important;
    background: #0f172a !important;
}

/* Tắt scale cover kiểu QC YouTube trên MP4 — clip dọc bị đẩy ra ngoài khung */
.p1-page-slider__item--video-live .ola-ad-video--mp4 > .ola-ad-video__frame {
    transform: none !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
    overflow: hidden !important;
    background: #0f172a !important;
}

.p1-page-slider__item--video-live .ola-ad-video__mp4,
.p1-page-slider__item--video-live .ad-yt-player,
.p1-page-slider__item--video-live .yt-slide-player {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    border: 0 !important;
    display: block !important;
}

.p1-page-slider__item--video-live .ola-ad-video__toolbar {
    z-index: 5;
}

.p1-page-slider__item--video:not(:has(img)):not(.p1-page-slider__item--video-live) {
    background: linear-gradient(135deg, #0b1530, #142559);
}

.p1-page-slider__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: var(--p1-brand-1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .3);
    z-index: 2;
    transition: transform .3s var(--p1-ease);
}

.p1-page-slider__item:hover .p1-page-slider__play {
    transform: translate(-50%, -50%) scale(1.08);
}

.p1-page-slider__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 0;
    background: transparent;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .55); /* nền trong suốt, chữ/icon vẫn rõ trên mọi ảnh nhờ đổ bóng */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
    transition: background .25s var(--p1-ease), transform .2s var(--p1-ease);
    z-index: 3;
}

.p1-page-slider__nav:hover,
.p1-page-slider__nav:focus-visible {
    background: rgba(255, 255, 255, .18);
    transform: translateY(-50%) scale(1.08);
}

.p1-page-slider__nav:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.p1-page-slider__nav--prev { left: 14px; }
.p1-page-slider__nav--next { right: 14px; }

.p1-page-slider__counter {
    position: absolute;
    right: 14px;
    bottom: 14px;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(6, 15, 35, .55);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    z-index: 3;
}

@media (max-width: 575.98px) {
    .p1-page-slider__nav {
        width: 38px;
        height: 38px;
        font-size: 14px;
    }
}

.p1-svc-sidebar {
    position: sticky;
    top: calc(var(--p1-sticky-top, var(--p1-header-h)) + 24px);
    transition: top .28s ease;
}

.p1-svc-sidebar__box {
    background: var(--p1-bg-card);
    border: 1px solid var(--p1-border);
    border-radius: var(--p1-radius);
    padding: 26px;
    margin-bottom: 22px;
}

.p1-svc-sidebar__title {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--p1-text-muted);
    margin: 0 0 18px;
}

.p1-svc-related__item {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 10px 0;
    border-top: 1px solid var(--p1-border);
}

.p1-svc-related__item:first-child {
    border-top: 0;
    padding-top: 0;
}

.p1-svc-related__thumb {
    width: 56px;
    height: 56px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    background: #eaf1ff;
}

.p1-svc-related__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.p1-svc-related__name {
    font-size: 14px;
    font-weight: 600;
    color: var(--p1-text);
    line-height: 1.4;
}

/*
 * Thẻ tư vấn cột phải (SidebarCtaHtml): nền gradient thương hiệu, hotline bấm gọi nổi bật, nút chính màu vàng — dễ thấy, dễ tương tác.
 * Chữ trắng trên nền xanh đậm; điểm nhấn vàng cùng tông tiêu đề hero.
 */
.p1-cta-card {
    position: relative;
    overflow: hidden;
    padding: 26px 24px 22px;
    border: 0;
    border-radius: 20px;
    color: #fff;
    text-align: left;
    background: linear-gradient(160deg, #1a7bff 0%, #0068ff 40%, #0b3fb5 100%);
    box-shadow: 0 18px 44px rgba(0, 84, 220, .28), 0 2px 6px rgba(20, 33, 61, .08);
}

/* Quầng sáng trang trí góc phải trên */
.p1-cta-card::before {
    content: "";
    position: absolute;
    top: -70px;
    right: -70px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
}

.p1-cta-card > * {
    position: relative;
}

.p1-cta-card__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
}

.p1-cta-card__eyebrow i {
    color: #f8d36a;
}

.p1-svc-sidebar__cta .p1-cta-card__title {
    margin: 0 0 8px;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.01em;
}

.p1-svc-sidebar__cta .p1-cta-card__desc {
    margin: 0 0 16px;
    color: rgba(255, 255, 255, .85);
    font-size: 14px;
    line-height: 1.6;
}

.p1-cta-card__list {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.p1-cta-card__list li {
    position: relative;
    padding-left: 26px;
    font-size: 14px;
    line-height: 1.45;
    color: #fff;
}

.p1-cta-card__list li::before {
    content: "\f00c"; /* FontAwesome check */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 1px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(248, 211, 106, .22);
    color: #f8d36a;
    font-size: 10px;
    line-height: 18px;
    text-align: center;
}

/* Hotline: khối kính mờ, biểu tượng điện thoại lan sóng, số lớn dễ bấm */
.company-p2-body .p1-cta-card__phone {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, .28);
    background: rgba(255, 255, 255, .12);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #fff;
    transition: background .4s var(--p1-ease-out), border-color .4s var(--p1-ease-out), transform .4s var(--p1-ease-out);
}

.company-p2-body .p1-cta-card__phone:hover {
    background: rgba(255, 255, 255, .2);
    border-color: rgba(255, 255, 255, .5);
    transform: translateY(-2px);
    color: #fff;
}

.p1-cta-card__phone-icon {
    position: relative;
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f8d36a;
    color: #0b3fb5;
    font-size: 16px;
}

.p1-cta-card__phone-icon::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(248, 211, 106, .7);
    animation: p1Ripple 2.4s ease-out infinite;
    pointer-events: none;
}

.p1-cta-card__phone-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.p1-cta-card__phone-text small {
    font-size: 12px;
    color: rgba(255, 255, 255, .8);
}

.p1-cta-card__phone-text strong {
    font-size: 19px;
    font-weight: 800;
    letter-spacing: .01em;
    line-height: 1.25;
}

/* Nút chính: vàng kim, bo tròn */
.company-p2-body .p1-cta-card__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    border-radius: 999px;
    background: linear-gradient(90deg, #f8cd4f 0%, #eaaa3b 100%);
    color: #0b2a6b;
    font-size: 15px;
    font-weight: 700;
    box-shadow: 0 8px 22px rgba(0, 20, 70, .25);
    transition: transform .4s var(--p1-ease-out), box-shadow .4s var(--p1-ease-out), filter .4s var(--p1-ease-out);
}

.company-p2-body .p1-cta-card__btn:hover {
    color: #0b2a6b;
    transform: translateY(-2px);
    filter: brightness(1.05);
    box-shadow: 0 14px 30px rgba(0, 20, 70, .32);
}

.company-p2-body .p1-cta-card__btn:active {
    transform: translateY(0) scale(.98);
}

.company-p2-body .p1-cta-card__mail {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
    color: rgba(255, 255, 255, .85);
    font-size: 13px;
    word-break: break-all;
    transition: color .3s var(--p1-ease);
}

.company-p2-body .p1-cta-card__mail:hover {
    color: #fff;
}

/* ---------------------------------------------------------------------
   HIỆU ỨNG thẻ tư vấn — thu hút chú ý mà vẫn mượt: chỉ dùng transform/opacity (chạy trên bộ ghép lớp, không vẽ lại).
   1) Vào cảnh so le từng phần tử   2) Quầng sáng góc thở nhẹ   3) Vệt sáng quét chéo thẻ mỗi ~7s
   4) Đốm sáng đi theo con trỏ (JS đặt --mx/--my)   5) Nút vàng: vệt sáng quét + nhịp thở   6) Biểu tượng tai nghe lắc nhẹ
   Tất cả tắt khi người dùng bật "giảm chuyển động".
   --------------------------------------------------------------------- */
@keyframes p1CtaIn {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: none; }
}

@keyframes p1CtaGlow {
    from { transform: scale(1); opacity: .9; }
    to { transform: scale(1.35); opacity: .5; }
}

@keyframes p1CtaSheen {
    0%, 62% { transform: translateX(-140%) skewX(-18deg); }
    100% { transform: translateX(260%) skewX(-18deg); }
}

/* Dùng thuộc tính `scale` riêng (không phải transform) để nhịp thở không đè lên transform của hiệu ứng hover (translateY). */
@keyframes p1CtaBtnPulse {
    0%, 100% { scale: 1; }
    50% { scale: 1.035; }
}

@keyframes p1CtaWiggle {
    0%, 82%, 100% { transform: rotate(0); }
    86% { transform: rotate(-14deg); }
    90% { transform: rotate(12deg); }
    94% { transform: rotate(-8deg); }
    97% { transform: rotate(5deg); }
}

/* fill-mode "backwards" (không phải "both"): xong hiệu ứng vào cảnh thì trả quyền transform lại cho hover của từng nút. */
.p1-cta-card > * {
    animation: p1CtaIn .75s var(--p1-ease-out) backwards;
}

.p1-cta-card > :nth-child(1) { animation-delay: .08s; }
.p1-cta-card > :nth-child(2) { animation-delay: .16s; }
.p1-cta-card > :nth-child(3) { animation-delay: .24s; }
.p1-cta-card > :nth-child(4) { animation-delay: .32s; }
.p1-cta-card > :nth-child(5) { animation-delay: .4s; }
.p1-cta-card > :nth-child(6) { animation-delay: .48s; }
.p1-cta-card > :nth-child(7) { animation-delay: .56s; }

/* Từng dòng lợi ích hiện lần lượt, dấu tick bật ra */
.p1-cta-card__list li {
    animation: p1CtaIn .6s var(--p1-ease-out) backwards;
}

.p1-cta-card__list li:nth-child(1) { animation-delay: .5s; }
.p1-cta-card__list li:nth-child(2) { animation-delay: .62s; }
.p1-cta-card__list li:nth-child(3) { animation-delay: .74s; }

.p1-cta-card::before {
    animation: p1CtaGlow 7s ease-in-out infinite alternate;
    will-change: transform, opacity;
}

/*
 * Vệt sáng lướt qua thẻ (::after; thẻ overflow:hidden nên vệt cắt gọn theo bo góc). Làm MỀM so với bản đầu:
 *  - dải rộng (72% thẻ) + gradient nhiều nấc đổ dần (gần dạng chuông) → không còn mép sắc;
 *  - độ sáng đỉnh chỉ .12 (trước .16) và tự hiện dần / tắt dần theo hành trình → không "bật" hay "cắt" đột ngột ở hai đầu;
 *  - góc nghiêng nhẹ hơn (-12°), lướt chậm 5s bằng đường cong ease-in-out rồi nghỉ 4s.
 */
@keyframes p1CtaSheenSoft {
    0%, 44% { transform: translateX(-125%) skewX(-12deg); opacity: 0; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
    58% { opacity: 1; }
    86% { opacity: 1; }
    100% { transform: translateX(215%) skewX(-12deg); opacity: 0; }
}

.p1-cta-card::after {
    content: "";
    position: absolute;
    top: -10%;
    bottom: -10%;
    left: 0;
    width: 72%;
    background: linear-gradient(100deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, .02) 18%,
        rgba(255, 255, 255, .06) 34%,
        rgba(255, 255, 255, .12) 50%,
        rgba(255, 255, 255, .06) 66%,
        rgba(255, 255, 255, .02) 82%,
        rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
    opacity: 0;
    transform: translateX(-125%) skewX(-12deg);
    animation: p1CtaSheenSoft 9s linear 1.4s infinite;
}

/* Đốm sáng đi theo con trỏ (chỉ có trên thiết bị có chuột; mặc định ở góc trên trái, mờ) */
.p1-cta-card {
    --mx: 50%;
    --my: 0%;
    background:
        radial-gradient(260px circle at var(--mx) var(--my), rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 65%),
        linear-gradient(160deg, #1a7bff 0%, #0068ff 40%, #0b3fb5 100%);
    transition: transform .5s var(--p1-ease-out), box-shadow .5s var(--p1-ease-out);
}

@media (hover: hover) {
    .p1-cta-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 26px 56px rgba(0, 84, 220, .36), 0 2px 8px rgba(20, 33, 61, .1);
    }
}

/* Nút vàng: nhịp thở nhẹ + vệt sáng quét qua định kỳ để dẫn mắt tới hành động chính */
.company-p2-body .p1-cta-card__btn {
    position: relative;
    overflow: hidden;
    animation: p1CtaIn .75s var(--p1-ease-out) .4s backwards, p1CtaBtnPulse 3.2s ease-in-out 1.6s infinite;
}

.company-p2-body .p1-cta-card__btn::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 40%;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .55) 50%, rgba(255, 255, 255, 0) 100%);
    transform: translateX(-160%) skewX(-20deg);
    animation: p1CtaSheen 4.5s ease-in-out 2s infinite;
    pointer-events: none;
}

.company-p2-body .p1-cta-card__btn:hover {
    animation-play-state: running, paused; /* dừng nhịp thở khi rê chuột, để hiệu ứng hover mượt */
}

.p1-cta-card__eyebrow i {
    display: inline-block;
    transform-origin: 50% 80%;
    animation: p1CtaWiggle 5s ease-in-out 2s infinite;
}

@media (prefers-reduced-motion: reduce) {
    .p1-cta-card > *,
    .p1-cta-card__list li,
    .p1-cta-card::before,
    .p1-cta-card::after,
    .company-p2-body .p1-cta-card__btn,
    .company-p2-body .p1-cta-card__btn::after,
    .p1-cta-card__eyebrow i,
    .p1-cta-card__phone-icon::after {
        animation: none;
    }
}

/*
 * ===== Giới thiệu — hero DÙNG LẠI .p1-page-hero (ảnh nền + gradient xanh + mép xéo, đồng bộ mọi trang khác) =====
 * .p1-about-hero chỉ bổ sung dải thống kê / nút CTA đè lên trên — không đổi màu nền hay layout gốc của .p1-page-hero,
 * nên không cần "vá" header trong suốt như bản trước (nền đã đủ tối sẵn).
 */
.p1-about-hero__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    margin: 22px 0 26px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, .22);
}

.p1-about-hero__stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.p1-about-hero__stat .p1-stats__num {
    font-size: 26px;
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
}

.p1-about-hero__stat-label {
    font-size: 13px;
    color: rgba(255, 255, 255, .8);
}

.p1-about-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* Nút chính CTA hero Giới thiệu: đổi từ nền trắng (mặc định của mọi .p1-page-hero/.p1-hero/.p1-svc-hero, xem
   company-p2-theme.css) sang nền xanh đặc để nổi bật đúng vai trò nút chính — nút phụ "Xem dịch vụ" (kính mờ)
   giữ nguyên làm nền cho nút chính nổi lên. Selector 3 lớp để thắng rule 3 lớp cùng độ ưu tiên ở theme.css. */
.company-p2-body .p1-about-hero .btn-p1-primary {
    background: var(--p1-brand-1);
    color: #fff;
}

.company-p2-body .p1-about-hero .btn-p1-primary:hover {
    background: var(--p1-brand-2);
    color: #fff;
}

/*
 * Dải "Đối tác & khách hàng tin dùng" giờ dùng ĐÚNG component marquee của trang chủ (.p1-partners__marquee…,
 * định nghĩa trong company-p2-home.css, nạp chung mọi trang) — không cần CSS riêng cho phần logo nữa.
 * Chỉ cần CHẶN rule dùng chung ".p1-page-hero + * { margin-top: calc(-1 * var(--p1-slant)) }" (cuối file) kéo
 * mục NGAY SAU hero đè lên vùng xéo — mục này không phải khối "nổi" nên phải trả lại margin-top bình thường.
 * Selector 2 lớp để chắc thắng rule kia dù cùng độ ưu tiên (xem giải thích tương tự ở trên, khi làm media-float).
 */
.p1-about-hero + .p1-section {
    margin-top: 0;
}

/* ----- Nội dung giới thiệu (AboutUsHtml) — bài viết full-width, không còn ép chung cột với ảnh ----- */
.p1-about-story {
    position: relative;
    max-width: 820px;
    margin: 0 auto;
}

.p1-about-story__mark {
    display: block;
    font-size: 32px;
    color: rgba(0, 104, 255, .18);
    margin-bottom: 10px;
}

.p1-about-story__content {
    font-size: 16px;
    line-height: 1.9;
    color: var(--p1-text);
    text-align: justify;
}

/* Đoạn mở đầu (thường là câu tiêu đề/tagline CMS bôi đậm) nổi bật hơn — cảm giác dẫn nhập bài viết báo chí. */
.p1-about-story__content > p:first-child {
    font-size: 19px;
    font-weight: 700;
    line-height: 1.6;
    color: var(--p1-brand-2);
    text-align: left;
    margin-bottom: 20px;
}

.p1-about-story__content p {
    margin: 0 0 16px;
}

/* ----- Giá trị cốt lõi -----
 * Số thứ tự mờ (counter CSS) + vạch gradient trên đầu thẻ (hiện khi hover) + icon có quầng sáng thương hiệu,
 * xoay/phồng nhẹ khi hover — nổi bật, "phong cách" hơn thẻ trắng phẳng trước đây, không cần thêm markup server. */
.p1-about-values {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--p1-grid-gap);
    counter-reset: p1val;
}

.p1-about-value {
    position: relative;
    overflow: hidden;
    padding: 34px 26px 30px;
    background: var(--p1-bg-card);
    border: 1px solid var(--p1-border);
    border-radius: calc(var(--p1-radius) + 6px);
    text-align: center;
    box-shadow: 0 2px 14px rgba(20, 33, 61, .05);
    transition: transform .35s var(--p1-ease), box-shadow .35s var(--p1-ease), border-color .35s var(--p1-ease);
}

/* Số thứ tự 01/02/03/04: trước để top:-10px (tràn ra ngoài mép trên) + opacity:.06 (quá mờ) nên bị .p1-about-value
   (overflow:hidden) cắt cụt nửa trên và gần như không thấy — đưa hẳn vào trong khung thẻ + tăng độ rõ để luôn
   hiện trọn vẹn, tránh bị "lấp"/cắt mất như trước. */
.p1-about-value::before {
    counter-increment: p1val;
    content: "0" counter(p1val);
    position: absolute;
    z-index: 0;
    top: 8px;
    right: 14px;
    font-size: 52px;
    font-weight: 800;
    line-height: 1;
    color: var(--p1-brand-1);
    opacity: .14;
    pointer-events: none;
}

.p1-about-value::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--p1-accent-grad);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .4s var(--p1-ease);
}

.p1-about-value:hover {
    transform: translateY(-6px);
    box-shadow: var(--p1-shadow);
    border-color: rgba(0, 104, 255, .25);
}

.p1-about-value:hover::after {
    transform: scaleX(1);
}

.p1-about-value__icon {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    margin-bottom: 18px;
    border-radius: 50%;
    background: var(--p1-accent-grad);
    color: #fff;
    font-size: 23px;
    box-shadow: 0 10px 22px rgba(0, 104, 255, .22);
    transition: transform .35s var(--p1-ease), box-shadow .35s var(--p1-ease);
}

.p1-about-value:hover .p1-about-value__icon {
    transform: scale(1.08) rotate(-6deg);
    box-shadow: 0 14px 28px rgba(0, 104, 255, .32);
}

.p1-about-value__title {
    position: relative;
    z-index: 1;
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 700;
    color: var(--p1-text);
}

.p1-about-value__desc {
    position: relative;
    z-index: 1;
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: var(--p1-text-muted);
}

@media (max-width: 991.98px) {
    .p1-about-values { grid-template-columns: repeat(2, 1fr); }
}

/*
 * Tiêu đề "Bản sắc [O/L/A/OLA] [.COM.VN] thương hiệu" — bỏ hẳn cách làm flex trước đó (kéo luôn ::after — vạch
 * gradient trang trí — vào chung hàng, gây lệch khoảng cách). Quay về flow bình thường (giống mọi h2.p1-section__title
 * khác trên trang, vốn không lỗi) + chỉnh riêng vertical-align của .p1-rotator__box/.p1-ola-domain cho khớp
 * baseline chữ thường — không đụng .p1-rotator__box/.p1-rotator--one-line DÙNG CHUNG nên trang chủ không ảnh hưởng.
 * Đồng thời bỏ hẳn vạch gradient dưới tiêu đề riêng cho khối này theo yêu cầu.
 */
.p1-brand-story .p1-rotator__box,
.p1-brand-story .p1-ola-domain {
    vertical-align: middle;
}

.p1-brand-story .p1-section__title::after {
    display: none;
}

/*
 * ".COM.VN" trong tiêu đề — bước cuối riêng, chỉ hiện đúng lúc rotator vừa ghép xong đủ "OLA": JS (sync() trong
 * company-p2-home.js) gõ từng ký tự (kiểu gõ máy, giống typeTransition) rồi gắn .is-visible tô vàng ánh kim quét
 * sáng (cùng kỹ thuật background-clip:text với vệt sáng chữ chìm O/L/A) — ẩn lại ngay khi rotator đổi cụm tiếp.
 */
.p1-ola-domain {
    display: inline-block;
    font-weight: 800;
    opacity: 0;
    transition: opacity .25s var(--p1-ease);
}

.p1-ola-domain.is-visible {
    opacity: 1;
    background-image: var(--p1-gold-shine);
    background-size: 260% 100%;
    background-position: 130% center;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: p1OlaDomainShine 2.4s ease-in-out .35s infinite;
}

@keyframes p1OlaDomainShine {
    0% { background-position: 130% center; }
    100% { background-position: -30% center; }
}

@media (prefers-reduced-motion: reduce) {
    .p1-ola-domain.is-visible {
        animation: none;
    }
}

/* ----- Ý nghĩa thương hiệu OLA (OPEN · LEARN · ACHIEVE) — cùng ngôn ngữ thiết kế thẻ với "Giá trị cốt lõi"
   (bo góc lớn, bóng nhẹ, nâng lên khi hover) nhưng điểm nhấn là CHỮ CÁI lớn tô gradient thay vì icon tròn.
   Chữ "OLA" khổng lồ mờ phía sau (chữ chìm) tạo chiều sâu cho cả khối; .p1-container nổi lên trên bằng z-index. ----- */
.p1-brand-story {
    position: relative;
    overflow: hidden;
}

.p1-brand-story::before {
    content: "OLA";
    position: absolute;
    top: 48%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: clamp(160px, 22vw, 320px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: .02em;
    color: var(--p1-brand-1);
    opacity: .05;
    white-space: nowrap;
    pointer-events: none;
    z-index: 0;
}

.p1-brand-story > .p1-container {
    position: relative;
    z-index: 1;
}

.p1-brand-story__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--p1-grid-gap);
}

.p1-brand-story__item {
    position: relative;
    overflow: hidden;
    padding: 34px 26px 30px;
    background: var(--p1-bg-card);
    border: 1px solid var(--p1-border);
    border-radius: calc(var(--p1-radius) + 6px);
    text-align: center;
    box-shadow: 0 2px 14px rgba(20, 33, 61, .05);
    transition: transform .35s var(--p1-ease), box-shadow .35s var(--p1-ease), border-color .35s var(--p1-ease);
}

/* Chữ chìm riêng từng thẻ: lấy đúng chữ cái của thẻ (data-letter="O"/"L"/"A" ở markup) phóng to mờ làm nền,
   đồng bộ với chữ "OLA" khổng lồ mờ phía sau cả khối (.p1-brand-story::before). */
.p1-brand-story__item::before {
    content: attr(data-letter);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -54%);
    font-size: 190px;
    font-weight: 800;
    line-height: 1;
    color: var(--p1-brand-1);
    opacity: .06;
    pointer-events: none;
    user-select: none;
    z-index: 0;
    transition: opacity .35s var(--p1-ease);
}

/*
 * Chữ nền "chuyển động" đúng lúc thẻ được focus (rê chuột, hoặc .is-spotlight do JS gắn theo chữ đang chạy ở
 * tiêu đề — xem company-p2-home.js): KHÔNG phóng to/trôi vị trí (từng đụng cạnh thẻ) mà là một VỆT SÁNG quét
 * qua NGAY TRONG hình chữ (kỹ thuật background-clip:text, giống .p1-topthemes__title-shine) — chữ giữ nguyên
 * cỡ/vị trí tại chỗ nên không bao giờ chạm viền/góc thẻ, nhìn sang và "đẹp" hơn hiệu ứng phồng/trôi trước đó.
 */
.p1-brand-story__item:hover::before,
.p1-brand-story__item.is-spotlight::before {
    opacity: .16;
    background-image: linear-gradient(110deg, var(--p1-brand-1) 0%, var(--p1-brand-1) 34%, #cfe0ff 48%, #f3f8ff 52%, #cfe0ff 56%, var(--p1-brand-1) 66%, var(--p1-brand-1) 100%);
    background-size: 260% 100%;
    background-position: 130% center;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: p1BrandLetterShine 2.2s ease-in-out infinite;
}

@keyframes p1BrandLetterShine {
    0% { background-position: 130% center; }
    100% { background-position: -30% center; }
}

@media (prefers-reduced-motion: reduce) {
    .p1-brand-story__item:hover::before,
    .p1-brand-story__item.is-spotlight::before {
        animation: none;
        background-image: none;
        -webkit-text-fill-color: initial;
        color: var(--p1-brand-1);
        opacity: .14;
    }
}

.p1-brand-story__item::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--p1-accent-grad);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .4s var(--p1-ease);
}

/* .is-spotlight: gắn bằng JS (company-p2-home.js) khi tiêu đề "Bản sắc [O/L/A] thương hiệu" đang hiện ĐÚNG chữ cái
   của thẻ này — cùng hiệu ứng với :hover để người xem thấy rõ "chữ đang chạy" khớp "thẻ tương ứng" không cần rê chuột. */
.p1-brand-story__item:hover,
.p1-brand-story__item.is-spotlight {
    transform: translateY(-6px);
    box-shadow: var(--p1-shadow);
    border-color: rgba(0, 104, 255, .25);
}

.p1-brand-story__item:hover::after,
.p1-brand-story__item.is-spotlight::after {
    transform: scaleX(1);
}

.p1-brand-story__item:hover .p1-brand-story__letter,
.p1-brand-story__item.is-spotlight .p1-brand-story__letter {
    transform: scale(1.08);
}

.p1-brand-story__letter {
    position: relative;
    z-index: 1;
    display: block;
    font-size: 64px;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 8px;
    background: var(--p1-accent-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    transition: transform .35s var(--p1-ease);
}

.p1-brand-story__word {
    position: relative;
    z-index: 1;
    margin: 0 0 10px;
    font-size: 17px;
    font-weight: 700;
    color: var(--p1-text);
    text-transform: uppercase;
    letter-spacing: .03em;
}

.p1-brand-story__word span {
    display: block;
    margin-top: 3px;
    font-size: 13px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: var(--p1-brand-1);
}

.p1-brand-story__desc {
    position: relative;
    z-index: 1;
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: var(--p1-text-muted);
}

@media (max-width: 767.98px) {
    .p1-brand-story__grid { grid-template-columns: 1fr; }
}

@media (max-width: 575.98px) {
    .p1-about-values { grid-template-columns: 1fr; }
}

/* Bản đồ đứng riêng (trang Giới thiệu): không nằm trong cột liên hệ nên cần chiều cao riêng. */
.p1-container > .p1-contact-map {
    min-height: 380px;
    margin-top: 0;
}

/* ===== Liên hệ ===== */
.p1-contact-grid {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 32px;
}

.p1-contact-info__item {
    display: flex;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid var(--p1-border);
}

.p1-contact-info__item:first-child {
    padding-top: 0;
}

.p1-contact-info__icon {
    width: 34px;
    height: 34px;
    border-radius: 30px;
    background: var(--p1-accent-grad);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
    margin-top:6px;
}

.p1-contact-info__label {
    font-size: 12px;
    color: var(--p1-text-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin: 0 0 4px;
}

.p1-contact-info__value {
    font-size: 15px;
    font-weight: 600;
    color: var(--p1-text);
    margin: 0;
}

.p1-contact-form {
    background: var(--p1-bg-card);
    border: 1px solid var(--p1-border);
    border-radius: var(--p1-radius);
    padding: 32px;
}

.p1-form-group {
    margin-bottom: 18px;
}

.p1-form-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--p1-text-muted);
    margin-bottom: 8px;
}

.p1-form-control {
    width: 100%;
    padding: 13px 16px;
    border-radius: 10px;
    border: 1px solid var(--p1-border);
    background: #fff;
    color: var(--p1-text);
    font-size: 15px;
}

.p1-form-control:focus {
    outline: none;
    border-color: var(--p1-accent);
    box-shadow: 0 0 0 3px rgba(0, 104, 255, .15);
}

textarea.p1-form-control {
    min-height: 130px;
    resize: vertical;
}

.p1-form-captcha {
    display: flex;
    align-items: center;
    gap: 12px;
}

.p1-form-captcha img {
    border-radius: 8px;
    border: 1px solid var(--p1-border);
}

.p1-form-captcha__refresh {
    background: transparent;
    border: 1px solid var(--p1-border);
    color: var(--p1-text);
    width: 44px;
    height: 44px;
    border-radius: 10px;
    cursor: pointer;
}

.p1-contact-map {
    position: relative;
    flex: 1 1 auto;
    min-height: 300px;
    margin-top: 24px;
    border-radius: var(--p1-radius);
    overflow: hidden;
    border: 1px solid var(--p1-border);
}

/* Bản đồ lấp đầy phần cao còn lại của cột trái → cột trái luôn cao bằng cột form. */
.p1-contact-map iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100% !important;
    aspect-ratio: auto !important;
    border: 0;
    display: block;
}

.p1-contact-heading {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--p1-text-muted);
    margin: 0 0 18px;
}

/* Hai cột cao bằng nhau: lưới tự kéo giãn; cột trái là flex (bản đồ giãn), form là flex (ô nội dung giãn). */
.p1-contact-info {
    display: flex;
    flex-direction: column;
}

.p1-contact-form,
.p1-contact-form > div {
    display: flex;
    flex-direction: column;
}

.p1-contact-form > div { flex: 1 1 auto; }

.p1-form-group--grow {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.p1-form-group--grow textarea.p1-form-control {
    flex: 1 1 auto;
    min-height: 130px;
    resize: none;
}

@media (max-width: 991.98px) {
    .p1-contact-grid { grid-template-columns: 1fr; }
}


/* =====================================================================
   BỐ CỤC DẢI XÉO — mọi đường chuyển mục cùng một hướng: trái cao → phải thấp.
   Cách làm: khối bị cắt xéo bằng clip-path; khối liền sau kéo lên đè vào vùng bị cắt (margin âm) và
   bù lại bằng padding, nên chỗ xéo lộ ra nền của khối sau thay vì khoảng trống.
   Khối xéo có z-index cao hơn để nằm trên khối liền kề.
   ===================================================================== */

/* --- Khối xanh phía trên: cắt xéo đáy --- */
.p1-hero,
.p1-page-hero,
.p1-svc-hero {
    position: relative;
    z-index: 2;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - var(--p1-slant)));
}

.p1-page-hero { padding-bottom: calc(28px + var(--p1-slant)); }
.p1-svc-hero { padding-bottom: calc(32px + var(--p1-slant)); }
/* Chừa thêm 48px phía dưới (trước 48px → 96px): nội dung hero, nhất là nút, nằm cao hơn để tránh sát cụm nút liên hệ nổi (.OLA_float_bar)
   ở góc trái dưới màn hình. Đo ở cửa sổ 1440×800: khoảng cách nút → cụm nổi từ 9px lên ~33px. */
.p1-hero__inner { padding-bottom: calc(96px + var(--p1-slant) * .6); }

/* Khối liền ngay sau khối xanh: kéo lên đè vùng xéo. */
.p1-hero + *,
.p1-page-hero + *,
.p1-svc-hero + * {
    position: relative;
    z-index: 1;
    margin-top: calc(-1 * var(--p1-slant));
}

.p1-hero + section,
.p1-page-hero + section,
.p1-svc-hero + section {
    padding-top: calc(var(--p1-slant) + 5px);
}

/* --- Mục xen kẽ (.p1-section--alt): dải xéo hai cạnh song song --- */
.p1-section--alt {
    --p1-s: calc(var(--p1-slant) * .6);
    position: relative;
    z-index: 1;
    margin: calc(-1 * var(--p1-s)) 0;
    padding: calc(var(--p1-sec-y) + var(--p1-s)) 0;
    clip-path: polygon(0 0, 100% var(--p1-s), 100% 100%, 0 calc(100% - var(--p1-s)));
}

/* Chừa chỗ cuối trang cho phần footer kéo lên đè vào (tránh nội dung cuối chạm mép xéo). */
#p1Main {
    padding-bottom: calc(var(--p1-slant) * .4);
}

/* --- Footer: cắt xéo đỉnh (đúng kiểu ảnh mẫu: nền sáng chuyển xéo sang khối xanh) --- */
.p1-footer {
    position: relative;
    z-index: 2;
    margin-top: calc(-1 * var(--p1-slant));
    padding-top: calc(44px + var(--p1-slant));
    clip-path: polygon(0 0, 100% var(--p1-slant), 100% 100%, 0 100%);
}

/* (mobile: khoảng cách tự co qua --p1-sec-y / --p1-slant dạng clamp) */

/* =====================================================================
   HIỆU ỨNG — chỉ 4 loại, cùng một nhịp (cubic-bezier --p1-ease, 0.6–0.9s), không chồng chéo:
   1) Hero vào cảnh: các dòng chữ trồi lên lần lượt.
   2) Cuộn tới đâu, khối hiện dần tới đó (fade + trượt lên nhẹ, so le theo thứ tự).
   3) Ảnh nền hero (slide ảnh) phóng nhẹ như "thở".
   4) Thanh tiến độ cuộn mảnh ở đỉnh trang.
   Tất cả tắt khi người dùng bật "giảm chuyển động".
   ===================================================================== */

/* 1) Hero vào cảnh */
@keyframes p1FadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: none; }
}

.p1-hero__inner > *,
.p1-page-hero .p1-container > * {
    animation: p1FadeUp .9s var(--p1-ease) both;
}

.p1-hero__inner > :nth-child(1),
.p1-page-hero .p1-container > :nth-child(1) { animation-delay: .08s; }
.p1-hero__inner > :nth-child(2),
.p1-page-hero .p1-container > :nth-child(2) { animation-delay: .24s; }
.p1-hero__inner > :nth-child(3),
.p1-page-hero .p1-container > :nth-child(3) { animation-delay: .4s; }
.p1-hero__inner > :nth-child(4),
.p1-page-hero .p1-container > :nth-child(4) { animation-delay: .56s; }

/* Đổi slide hero: chữ + nút trượt lên nhẹ (JS company-p2-home.js gắn class .is-swap mỗi lần đổi slide). */
@keyframes p1TextSwap {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}

.p1-hero__title.is-swap { animation: p1TextSwap .7s var(--p1-ease-out) both; }
.p1-hero__actions.is-swap { animation: p1TextSwap .7s var(--p1-ease-out) .16s both; }

/* 2) Hiện dần khi cuộn tới (class do company-p2-nav.js gắn; bỏ lại sau khi xong để hover vẫn mượt).
   Độ trễ so le 0.16s/nhịp do JS đặt theo lô phần tử cùng hiện. Thời lượng 0.7s — nếu đổi phải đổi REVEAL_MS trong JS. */
.company-p2-body .p1-reveal {
    opacity: 0;
    transform: translateY(28px) scale(.97);
    transition: opacity .7s var(--p1-ease-out), transform .7s var(--p1-ease-out) !important;
    /* Không đặt will-change: hàng chục phần tử cùng bị nâng thành lớp riêng lúc tải trang → tốn bộ nhớ GPU, cuộn giật. */
}

.company-p2-body .p1-reveal.is-in {
    opacity: 1;
    transform: none;
}

/* Vạch nhỏ dưới tiêu đề mục "vẽ" ra sau khi tiêu đề hiện */
.p1-section__head.p1-reveal .p1-section__title::after {
    width: 0;
    transition: width .8s var(--p1-ease) .35s;
}

.p1-section__head.p1-reveal.is-in .p1-section__title::after {
    width: 48px;
}

/* Thẻ nổi lên khi rê chuột: nhấc cao hơn một chút, bóng đổ xanh lan mượt (thay cho translateY(-4px) cũ). */
.p1-service-card,
.p1-news-card {
    transition: transform .5s var(--p1-ease-out), border-color .4s var(--p1-ease), box-shadow .5s var(--p1-ease-out);
}

@media (hover: hover) {
    .p1-service-card:hover,
    .p1-news-card:hover {
        transform: translateY(-6px);
    }
}

/* Nút và mũi tên "Xem chi tiết" đổi màu êm hơn */
.p1-plan__cta {
    transition: background .35s var(--p1-ease), color .35s var(--p1-ease), border-color .35s var(--p1-ease), box-shadow .35s var(--p1-ease), transform .35s var(--p1-ease);
}

.p1-plan:hover .p1-plan__cta {
    transform: translateY(-1px);
}

/* 3) Slide ảnh hero: phóng nhẹ trong lúc đang hiển thị */
@keyframes p1Breathe {
    from { transform: scale(1); }
    to { transform: scale(1.07); }
}

.p1-hero__slides .carousel-item.active > img {
    animation: p1Breathe 9s ease-out both;
}

/* 4) Thanh tiến độ cuộn */
.p1-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 1100;
    pointer-events: none;
    transform-origin: 0 50%;
    transform: scaleX(0);
    background: linear-gradient(90deg, var(--p1-brand-1), var(--p1-gold));
}

/* ---------------------------------------------------------------------
   KHỐI NỘI DUNG (ContentBlocks) dưới phần mô tả trang chi tiết: ảnh ghép (collage) + ghi chú + nội dung HTML.
   HTML do Public_ContentBlocks / Public_BlockGallery dựng (class block-collage…); theme P1 chưa có style nên tự định nghĩa gọn ở đây.
   Số ô: n1 = 1 ảnh, n2 = 2 ảnh, n3 = 3, n4 = 4, n5 = 5+ (ô đầu là ảnh đại diện lớn bên trái).
   --------------------------------------------------------------------- */
.p1-svc-content .content-block-item {
    margin: 28px 0 0;
}

/* Khối đầu tiên nằm ngay dưới video (đã có margin dưới của video), hoặc là khối mở đầu nội dung (trang không có
   mô tả text phía trên) → không cộng thêm khoảng cách, để thẳng hàng với thẻ tư vấn ở cột bên phải. */
.p1-svc-blocks .content-block-item:first-child,
.p1-svc-content .content-block-item:first-child {
    margin-top: 0;
}

.block-collage {
    display: grid;
    gap: 10px;
    width: 100%;
}

.block-collage__item {
    position: relative;
    display: block;
    overflow: hidden;
    min-width: 0;
    border-radius: 12px;
    background: #e2e8f0;
    line-height: 0;
}

.p1-svc-content .block-collage__item img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    border-radius: 0;
    object-fit: cover;
    transition: transform .6s var(--p1-ease-out);
}

.block-collage__item:hover img {
    transform: scale(1.04);
}

.block-collage--n1 { grid-template-columns: 1fr; }
.block-collage--n1 .block-collage__item { aspect-ratio: auto; }
.p1-svc-content .block-collage--n1 .block-collage__item img {
    position: static;
    width: 100%;
    height: auto;
    object-fit: initial;
}

.block-collage--n2 { grid-template-columns: 1fr 1fr; }
.block-collage--n2 .block-collage__item { aspect-ratio: 4 / 3; }

.block-collage--n3 {
    grid-template-columns: 2fr 1fr;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    aspect-ratio: 16 / 9;
}
.block-collage--n3 .block-collage__item:first-child { grid-row: 1 / 3; }

.block-collage--n4,
.block-collage--n5 {
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    aspect-ratio: 16 / 9;
}
.block-collage--n4 .block-collage__item:nth-child(1),
.block-collage--n5 .block-collage__item:nth-child(1) { grid-row: 1 / 3; }
.block-collage--n4 .block-collage__item:nth-child(2) { grid-column: 2 / 4; }

/* Ô cuối của lưới 5+: phủ mờ "+N ảnh" */
.block-collage__more {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, .5);
    color: #fff;
}

.block-collage__more-label {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
}

.content-block-item__caption {
    margin-top: 8px !important;
    font-size: 13px;
    font-style: italic;
    color: var(--p1-text-muted);
    text-align: center;
}

.content-block-item__title {
    margin: 0 0 12px;
    font-size: 20px;
    font-weight: 700;
}

@media (max-width: 767px) {
    .block-collage--n2 { grid-template-columns: 1fr; }

    .block-collage--n3,
    .block-collage--n4,
    .block-collage--n5 {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: none;
        aspect-ratio: auto;
    }

    .block-collage--n3 .block-collage__item:first-child,
    .block-collage--n4 .block-collage__item:nth-child(1),
    .block-collage--n5 .block-collage__item:nth-child(1) {
        grid-column: 1 / -1;
        grid-row: auto;
        aspect-ratio: 16 / 10;
    }

    .block-collage--n4 .block-collage__item:nth-child(2) { grid-column: auto; }

    .block-collage--n3 .block-collage__item:not(:first-child),
    .block-collage--n4 .block-collage__item:not(:first-child),
    .block-collage--n5 .block-collage__item:not(:first-child) { aspect-ratio: 4 / 3; }
}

/* ---------------------------------------------------------------------
   FANCYBOX — phóng to ảnh: nền navy đậm, nút kính mờ tròn, ảnh thu nhỏ bo góc; chuyển cảnh êm.
   CHỐNG GIẬT khi mở/đóng/lướt ảnh:
   - html.with-fancybox (Fancybox tự gắn): tắt scroll-behavior:smooth (xung đột với khóa cuộn của Fancybox → nhảy vị trí trang lúc đóng);
   - tạm dừng mọi hiệu ứng lặp vô hạn phía sau (thẻ tư vấn, quầng sáng, dải đối tác…) → GPU dành cho lớp ảnh, không dựng lại hàng chục lớp nền;
   - lớp nền là màu đặc, KHÔNG dùng backdrop-filter (làm mờ cả màn hình khi chuyển ảnh rất nặng);
   - ảnh: will-change transform để lướt/zoom chạy trên bộ ghép lớp.
   --------------------------------------------------------------------- */
html.with-fancybox {
    scroll-behavior: auto !important;
}

.fancybox__container {
    --fancybox-bg: rgba(5, 14, 38, .94);
    --f-button-bg: rgba(255, 255, 255, .1);
    --f-button-hover-bg: rgba(255, 255, 255, .22);
    --f-button-active-bg: rgba(255, 255, 255, .28);
    --f-button-color: #fff;
    --f-button-hover-color: #fff;
    --f-button-border-radius: 50%;
    --f-button-transition: background .3s ease, transform .3s ease, opacity .3s ease;
    --f-thumb-border-radius: 8px;
    --f-thumb-outline: 2px;
    --f-thumb-outline-color: #f8cd4f;
    --f-transition-duration: .45s;
    --f-transition-easing: cubic-bezier(.16, 1, .3, 1);
    --f-backdrop-enter-duration: .35s;
    --f-backdrop-exit-duration: .3s;
    --f-spinner-color-1: rgba(255, 255, 255, .25);
    --f-spinner-color-2: #f8cd4f;
    font-family: inherit;
}

.fancybox__container .f-button:hover {
    transform: scale(1.06);
}

.fancybox__caption {
    max-width: min(880px, 92vw);
    margin: 0 auto;
    font-size: 14px;
    line-height: 1.55;
    text-align: center;
    color: rgba(255, 255, 255, .88);
}

.fancybox__slide .fancybox__content img,
.fancybox__image {
    border-radius: 6px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .5);
    will-change: transform;
}

html.with-fancybox .p1-hero__bg::before,
html.with-fancybox .p1-hero__bg::after,
html.with-fancybox .p1-cta-card::before,
html.with-fancybox .p1-cta-card::after,
html.with-fancybox .p1-cta-card__btn,
html.with-fancybox .p1-cta-card__btn::after,
html.with-fancybox .p1-cta-card__eyebrow i,
html.with-fancybox .p1-cta-card__phone-icon::after,
html.with-fancybox .p1-plan__badge,
html.with-fancybox .p1-header__circle[href^="tel:"]::after,
html.with-fancybox .p1-svc-hero__call-btn,
html.with-fancybox .p1-partners__track,
html.with-fancybox .p1-progress {
    animation-play-state: paused !important;
}

/* Thư viện ảnh trong bài: bấm được (con trỏ phóng to) và ảnh phóng nhẹ khi rê chuột */
a[data-fancybox] {
    cursor: zoom-in;
}

.p1-svc-content img:not(.emoji) {
    cursor: zoom-in;
}

/* Cuộn mượt khi bấm liên kết neo (vd. "Đối tác"), chừa chỗ cho header cố định */
html {
    scroll-behavior: smooth;
}

/* ---------------------------------------------------------------------
   Bổ sung theo cách phối hiệu ứng của ai.zalo.solutions (đã lọc, chỉ giữ cái nhẹ và có mục đích):
   5) Nổi lơ lửng     — huy hiệu "Phổ biến nhất" nhấp nhô nhẹ (5s, ±5px)
   6) Chấm đập nhịp   — chấm nhãn ở hero như "đang hoạt động"
   7) Vòng sóng       — nút gọi hotline lan sóng để thu hút mà không chói
   8) Nền chờ ảnh     — ô ảnh tin tức nhấp nháy nhẹ trong lúc ảnh tải (skeleton)
   9) Quầng sáng trôi — hai quầng mờ trôi chậm sau hero, thay cho hạt 3D nặng của Zalo
   --------------------------------------------------------------------- */
@keyframes p1Float {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -5px; }
}

@keyframes p1Ripple {
    from { transform: scale(1); opacity: .8; }
    to { transform: scale(1.5); opacity: 0; }
}

@keyframes p1Shimmer {
    0%, 100% { background-color: #eaf1ff; }
    50% { background-color: #dbe7fb; }
}

@keyframes p1Drift {
    to { transform: translate3d(6vw, -4vw, 0) scale(1.12); }
}

.p1-plan__badge {
    animation: p1Float 5s ease-in-out infinite;
}

.p1-header__circle[href^="tel:"] {
    position: relative;
}

.p1-header__circle[href^="tel:"]::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .55);
    pointer-events: none;
    animation: p1Ripple 2.4s ease-out infinite;
}

/*
 * (Đã bỏ hiệu ứng nhấp nháy p1Shimmer trên ô ảnh tin tức: animation đổi background-color chạy vô hạn trên MỌI thẻ tin, mỗi khung hình
 * đều buộc trình duyệt vẽ lại trên luồng chính → cuộn trang giật. Ô ảnh giữ nền #eaf1ff tĩnh; ảnh phủ kín khi tải xong.)
 */

/*
 * Quầng sáng trôi sau hero: dùng radial-gradient mờ dần thay cho filter:blur(60px). blur trên phần tử lớn đang chuyển động là thao tác
 * rất nặng cho GPU; gradient tròn cho kết quả tương đương mà chỉ cần dịch chuyển (transform) trên bộ ghép lớp.
 */
.p1-hero__bg::before,
.p1-hero__bg::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    will-change: transform;
}

.p1-hero__bg::before {
    width: 52vw;
    height: 52vw;
    left: -15vw;
    bottom: -23vw;
    background: radial-gradient(circle, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 68%);
    animation: p1Drift 18s ease-in-out infinite alternate;
}

.p1-hero__bg::after {
    width: 42vw;
    height: 42vw;
    right: -12vw;
    top: -18vw;
    background: radial-gradient(circle, rgba(246, 210, 78, .14) 0%, rgba(246, 210, 78, 0) 68%);
    animation: p1Drift 22s ease-in-out infinite alternate-reverse;
}

/* ---------------------------------------------------------------------
   FOOTER — lấy NỀN + HIỆU ỨNG của khối video "business" ở ai.zalo.solutions (giữ nguyên nội dung footer):
   - nền video toàn khung (object-fit: cover) phát lần lượt footer-1..N.mp4, phủ lớp màu navy;
   - thanh bản quyền toàn chiều ngang nền chàm/navy mờ (như thanh icon-box rgba(39,38,67,.57) của Zalo);
   - ảnh đối tác rê chuột đổ bóng drop-shadow 0,2s (như icon Zalo).
   Không có file video thì dùng nền động bằng CSS.
   --------------------------------------------------------------------- */
.p1-footer__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background:
        radial-gradient(60% 80% at 12% 18%, rgba(26, 123, 255, .5), transparent 62%),
        radial-gradient(50% 70% at 92% 82%, rgba(102, 16, 242, .28), transparent 62%),
        linear-gradient(180deg, #0a3ba9 0%, #072a75 58%, #061c55 100%);
}

/* Video phủ kín khung; độ mờ để màu nền thương hiệu vẫn thấm qua và chữ footer luôn đọc được */
.p1-footer__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .6;
}

/* Lớp phủ màu navy trên video: đậm ở đáy (chỗ có chữ), nhẹ ở đỉnh */
.p1-footer__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(8, 40, 120, .25) 0%, rgba(6, 26, 90, .72) 100%);
}

.p1-footer > .p1-container,
.p1-footer > .p1-footer__bar {
    position: relative;
    z-index: 1;
}

.p1-footer__body {
    padding-bottom: 8px;
}

/* Thanh bản quyền toàn chiều ngang */
.p1-footer__bar {
    margin-top: 12px;
    background: rgba(6, 26, 90, .55);
    backdrop-filter: blur(8px);
    border-top: 1px solid rgba(255, 255, 255, .1);
}

.p1-footer__bar .p1-footer__bottom {
    margin-top: 0;
    border-top: 0;
}

/* Ảnh đối tác: đổ bóng mượt khi rê chuột (0,2s linear như Zalo) */
.p1-footer__partner-logo {
    transition: transform .2s linear, filter .2s linear, border-color .2s linear;
}

.p1-footer__partner-logo:hover {
    transform: translateY(-3px);
    filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, .45));
}
/* ---------------------------------------------------------------------
   ẢNH / VIDEO NỀN cho banner đầu trang trong (.p1-page-hero / .p1-svc-hero) — JS chèn .p1-hero-media (xem company-p2-nav.js).
   Ảnh/video nằm dưới gradient thương hiệu (độ mờ .5) + lớp phủ navy đậm dần xuống dưới → chữ trắng luôn đọc được.
   Video chỉ hiện (fade) sau khi đã tải xong khung đầu → không bị nháy trắng.
   --------------------------------------------------------------------- */
.p1-hero-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.p1-hero-media video,
.p1-hero-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.2s var(--p1-ease-out);
}

.p1-hero-media video.is-ready,
.p1-hero-media img.is-ready {
    opacity: .5;
}

.p1-hero-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 84, 220, .3) 0%, rgba(6, 26, 90, .62) 100%);
}

/* Hero trang chủ: ảnh/video hiện rõ (không làm mờ .5 như banner trang trong) + lớp tối giống .p1-hero__shade để chữ trắng dễ đọc. */
.p1-hero-media--home video.is-ready,
.p1-hero-media--home img.is-ready {
    opacity: 1;
}

.p1-hero-media--home::after {
    background:
        linear-gradient(180deg, rgba(0, 30, 96, .55) 0%, rgba(0, 30, 96, 0) 22%),
        linear-gradient(90deg, rgba(0, 20, 60, .8) 0%, rgba(0, 20, 60, .48) 60%, rgba(0, 20, 60, .2) 100%),
        linear-gradient(0deg, rgba(0, 30, 96, .6) 0%, rgba(0, 30, 96, 0) 40%);
}

.p1-page-hero > .p1-container,
.p1-svc-hero > .p1-container {
    position: relative;
    z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .p1-hero-media:has(video) { display: none; }
    .p1-plan__badge,
    .p1-header__circle[href^="tel:"]::after,
    .p1-svc-hero__call-btn,
    .p1-news-card__thumb,
    .p1-hero__bg::before,
    .p1-hero__bg::after { animation: none; }
    .p1-hero__inner > *,
    .p1-page-hero .p1-container > *,
    .p1-hero__title.is-swap,
    .p1-hero__actions.is-swap,
    .p1-hero__slides .carousel-item.active > img { animation: none; }
    .company-p2-body .p1-reveal { opacity: 1; transform: none; transition: none !important; }
    .p1-progress { display: none; }
}

/* =========================================================================
   FAQ trang Bảng giá (/bang-gia) — tham khảo khối "services-list" accordion của
   skymax.vn (icon vuông bo góc + tiêu đề + mũi tên caret, mở ra card nổi bật).
   Cơ chế đóng/mở vẫn dùng "checkbox hack" (input + label + div) thay vì
   <details>/<summary>: hai thẻ này không dùng ở đâu khác trong theme, tránh rủi ro
   với trình biên dịch markup ASPX legacy (không Roslyn — xem ghi chú trong web.config).
   ========================================================================= */
.p1-pricing-faq {
    max-width: none;
    margin: 0 auto;
}

.p1-pricing-faq__title {
    margin: 0 0 var(--p1-head-gap);
    font-size: clamp(22px, 2.4vw, 28px);
    font-weight: 800;
    color: var(--p1-brand-1);
    text-align: center;
}

.p1-faq-list {
    display: flex;
    flex-direction: column;
    gap: 2px; /* giống skymax.vn: các mục sát nhau, chỉ hở 2px lộ nền khu vực làm đường phân cách, không có khoảng hở lớn giữa các thẻ rời */
}

.p1-faq-item {
    position: relative;
    background: var(--p1-bg-card);
    overflow: hidden;
    border-radius: 0; /* không bo góc riêng từng mục — chỉ mục đầu/cuối được bo (xem :first-child/:last-child bên dưới) */
    transition: box-shadow .3s var(--p1-ease);
}

/* Cả danh sách trông như MỘT khối liền, chỉ bo góc trên của mục đầu tiên và góc dưới của mục cuối cùng — giống skymax.vn. */
.p1-faq-list .p1-faq-item:first-child {
    border-radius: var(--p1-radius) var(--p1-radius) 0 0;
}

.p1-faq-list .p1-faq-item:last-child {
    border-radius: 0 0 var(--p1-radius) var(--p1-radius);
}

/* Vạch màu bên trái + bóng đổ khi mở — "card nổi bật" kiểu skymax.vn (.service-item::before scaleY khi .open). */
.p1-faq-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--p1-brand-grad);
    transform: scaleY(0);
    transition: transform .3s var(--p1-ease);
}

.p1-faq-item:has(.p1-faq-item__toggle:checked) {
    box-shadow: var(--p1-shadow-soft);
}

.p1-faq-item:has(.p1-faq-item__toggle:checked)::before {
    transform: scaleY(1);
}

.p1-faq-item__toggle {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* checkbox ẩn opacity:0 nên trình duyệt không vẽ được outline :focus lên chính nó — chuyển vòng focus sang
   .p1-faq-item__header (nhãn hiển thị) để người dùng bàn phím tab qua vẫn thấy rõ câu hỏi nào đang được chọn. */
.p1-faq-item__toggle:focus-visible ~ .p1-faq-item__header {
    outline: 2px solid var(--p1-brand-1);
    outline-offset: -2px;
}

.p1-faq-item__header {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    transition: background .25s var(--p1-ease), padding-left .25s var(--p1-ease);
}

/* Nhích nhẹ sang phải khi rê chuột — cùng cảm giác "service-header:hover{padding-left}" của skymax.vn. */
@media (hover: hover) {
    .p1-faq-item__header:hover {
        background: var(--p1-bg-alt);
        padding-left: 26px;
    }
}

.p1-faq-item__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 30px;
    background: var(--p1-bg-alt);
    color: var(--p1-brand-1);
    font-size: 16px;
    transition: background .3s var(--p1-ease), color .3s var(--p1-ease);
}

.p1-faq-item__toggle:checked ~ .p1-faq-item__header .p1-faq-item__icon {
    background: var(--p1-brand-grad);
    color: #fff;
}

.p1-faq-item__title {
    flex: 1 1 auto;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--p1-text);
}

.p1-faq-item__caret {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    color: var(--p1-text-muted);
    font-size: 13px;
    transition: transform .3s var(--p1-ease), color .3s var(--p1-ease);
}

.p1-faq-item__toggle:checked ~ .p1-faq-item__header .p1-faq-item__caret {
    transform: rotate(180deg);
    color: var(--p1-brand-1);
}

.p1-faq-item__body {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows .35s var(--p1-ease), opacity .3s var(--p1-ease);
}

.p1-faq-item__toggle:checked ~ .p1-faq-item__body {
    grid-template-rows: 1fr;
    opacity: 1;
}

.p1-faq-item__body-inner {
    min-height: 0;
    overflow: hidden;
}

.p1-faq-item__body-inner > p {
    margin: 0;
    padding: 10px 20px 18px 74px; /* thụt vào ngang icon phía trên cho thẳng hàng */
    font-size: 15px;
    line-height: 1.6;
    color: var(--p1-text-muted);
}

/* Danh sách (ul / ol) trong câu trả lời: thụt lề thẳng hàng với đoạn văn, dấu đầu dòng nằm trong, chữ cùng cỡ & màu với <p> */
.p1-faq-item__body-inner > ul,
.p1-faq-item__body-inner > ol {
    margin: 0;
    padding: 0 20px 12px 94px;   /* 74px của đoạn văn + 20px chỗ cho dấu đầu dòng */
    font-size: 15px;
    line-height: 1.6;
    color: var(--p1-text-muted);
}
.p1-faq-item__body-inner > ul { list-style: disc; }
.p1-faq-item__body-inner > ol { list-style: decimal; }
.p1-faq-item__body-inner > ul li,
.p1-faq-item__body-inner > ol li { margin: 0 0 6px; padding-left: 4px; }
.p1-faq-item__body-inner > ul li::marker,
.p1-faq-item__body-inner > ol li::marker { color: var(--p1-brand-1); font-weight: 700; }
.p1-faq-item__body-inner > ul li strong,
.p1-faq-item__body-inner > ol li strong { color: var(--p1-text); }
/* Đoạn văn đứng ngay sau danh sách: bớt đệm trên cho liền mạch */
.p1-faq-item__body-inner > ul + p,
.p1-faq-item__body-inner > ol + p { padding-top: 0; }

@media (max-width: 480px) {
    .p1-faq-item__body-inner > p {
        padding-left: 20px;
    }
    .p1-faq-item__body-inner > ul,
    .p1-faq-item__body-inner > ol {
        padding-left: 40px;
    }
}

/* =========================================================================
   TRANG BẢNG GIÁ (/bang-gia) — báo giá THEO DANH MỤC, không dùng ảnh avatar:
   tab danh mục dạng viên thuốc + thẻ có phần đầu màu thương hiệu (mô phỏng,
   không phải ảnh chụp dịch vụ) chứa tên/mô tả/giá, thân thẻ trắng liệt kê
   tính năng. Toàn bộ scope trong .p1-quote-* — không đụng .p1-plan dùng ở
   Services/Default/DanhMucService.
   ========================================================================= */

/* Khoảng cách giữa lưới giá và băng CTA ngay bên dưới đang cộng dồn 2 lớp padding
   (đáy .p1-service-list + đỉnh .p1-section) → khoảng trống quá lớn. Thu gọn riêng
   cho trang này, không đụng --p1-sec-y dùng chung toàn theme. */
.p1-service-list.p1-quote {
    padding-bottom: 8px;
}

.p1-quote-cta {
    padding-top: 8px;
}

.p1-quote-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 0 auto var(--p1-head-gap);
}

.p1-quote-tabs__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 20px;
    border-radius: 999px;
    background: var(--p1-bg-card);
    border: 1.5px solid var(--p1-border);
    font-size: 14.5px;
    font-weight: 600;
    color: var(--p1-text);
    white-space: nowrap;
    transition: background .3s var(--p1-ease), color .3s var(--p1-ease), border-color .3s var(--p1-ease), box-shadow .3s var(--p1-ease), transform .2s var(--p1-ease);
}

@media (hover: hover) {
    .p1-quote-tabs__item:hover {
        border-color: rgba(0, 104, 255, .35);
        box-shadow: var(--p1-shadow-soft);
        transform: translateY(-2px);
    }
}

.p1-quote-tabs__item.is-active {
    background: var(--p1-bg-alt);
    border-color: var(--p1-brand-1);
    color: var(--p1-brand-1);
    box-shadow: 0 8px 18px rgba(0, 104, 255, .14);
}

.p1-quote-tabs__item:active {
    transform: scale(.96);
}

.p1-quote-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--p1-grid-gap);
    padding-top: 14px; /* chỗ cho huy hiệu "Phổ biến nhất" nhô lên khỏi mép thẻ */
    align-items: start;
}

/* Không overflow:hidden ở thẻ (từng làm huy hiệu "Phổ biến nhất" bị cắt mất nửa trên) —
   bo góc do chính khối đầu (trên) và thân thẻ (dưới) đảm nhận, viền thẻ chỉ bao ngoài. */
.p1-quote-card {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: 22px;
    background: var(--p1-bg-card);
    border: 1px solid var(--p1-border);
    box-shadow: var(--p1-shadow-soft);
    transition: transform .5s var(--p1-ease-out), box-shadow .5s var(--p1-ease-out), border-color .4s var(--p1-ease);
    will-change: transform;
    margin-bottom: 20px;
}

@media (hover: hover) {
    .p1-quote-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 4px 10px rgba(20, 33, 61, .05), 0 26px 46px rgba(0, 104, 255, .18);
        border-color: rgba(98, 170, 255, .35);
    }
}

.p1-quote-card.is-featured {
    border-color: rgba(0, 104, 255, .28);
    
}

@media (hover: hover) {
    .p1-quote-card.is-featured:hover {
        
    }
}

/* Dùng longhand (không phải "background" viết tắt) — viết tắt sẽ reset cả background-image lẫn size/position/repeat
   về mặc định, XOÁ MẤT lớp ảnh đại diện --p1-quote-bg-img đã lồng ở rule .p1-quote-card__head phía trên (rule này
   2 class nên thắng, đè hẳn rule gốc) khiến gói "nổi bật" luôn chỉ thấy gradient đặc dù dịch vụ có ảnh. */
.p1-quote-card.is-featured .p1-quote-card__head {
    background-color: var(--p1-brand-2);
    background-image: linear-gradient(160deg, rgba(11, 63, 181, .9) 0%, rgba(0, 104, 255, .84) 55%, rgba(47, 139, 255, .8) 100%), var(--p1-quote-bg-img, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Đầu thẻ: gradient thương hiệu LUÔN nằm trên cùng (chữ trắng luôn đọc được), ảnh đại diện dịch vụ (nếu có, xem
   QuoteCardHeadBgAttr) chỉ chìm mờ phía dưới qua lớp gradient đã hạ độ đục — cho đỡ phẳng/thô so với gradient đặc
   trước đây, dịch vụ nào chưa có ảnh thì --p1-quote-bg-img rỗng (var(...,none)) nên vẫn là gradient đặc như cũ. */
.p1-quote-card__head {
    position: relative;
    display: block;
    padding: 28px 24px 24px;
    border-radius: 21px 21px 0 0;
    background-color: var(--p1-brand-2);
    background-image: linear-gradient(160deg, rgba(26, 123, 255, .86) 0%, rgba(0, 104, 255, .82) 42%, rgba(11, 63, 181, .9) 100%), var(--p1-quote-bg-img, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    text-decoration: none;
    overflow: hidden;
    isolation: isolate;
}

.p1-quote-card__head::before {
    content: "";
    position: absolute;
    top: -60%;
    right: -25%;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .22), transparent 70%);
    pointer-events: none;
    z-index: 0;
    transition: transform .6s var(--p1-ease-out);
}

.p1-quote-card:hover .p1-quote-card__head::before {
    transform: scale(1.15) translate(-6px, 6px);
}

.p1-quote-card__head > * {
    position: relative;
    z-index: 1;
}

.p1-quote-card__name {
    display: block;
    margin-bottom: 10px;
    font-size: 21px;
    font-weight: 800;
    line-height: 1.3;
    color: #fff;
}

.p1-quote-card__desc {
    margin: 0 0 20px;
    font-size: 13.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .82);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.p1-quote-card__price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
}

.p1-quote-card__price .p1-plan__price-value {
    font-size: clamp(28px, 2.6vw, 36px);
    color: #fff;
}

.p1-quote-card__price .p1-plan__price-unit {
    color: rgba(255, 255, 255, .78);
}

/* Nhãn danh mục nổi nhẹ đè lên mép dưới khối đầu (kiểu chip nổi) thay vì nằm phẳng sát cạnh — đỡ "thô". */
.p1-quote-card__tags {
    position: relative;
    z-index: 1;
    margin-top: -14px;
    padding: 0 24px;
}

.p1-quote-card__tag {
    display: inline-flex;
    align-items: center;
    padding: 5px 14px;
    border-radius: 999px;
    background: #f2951b;
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    box-shadow: 0 6px 16px rgba(20, 33, 61, .12);
}

.p1-quote-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 4px;
    padding: 18px 24px 24px;
    border-radius: 0 0 21px 21px;
}

.p1-quote-card__body .p1-plan__features {
    margin: 6px 0 18px;
}

.p1-quote-card__body .p1-plan__features li {
    transition: transform .3s var(--p1-ease-out);
}

@media (hover: hover) {
    .p1-quote-card:hover .p1-quote-card__body .p1-plan__features li {
        transform: translateX(3px);
    }
}

/* Nút CTA đổi sang tông cam (khớp màu chip danh mục .p1-quote-card__tag ở trên) thay vì xanh thương hiệu —
   cả thẻ đã xanh từ đầu (đầu thẻ, giá, hover viền…) nên riêng nút bấm đổi cam cho đỡ dồn một màu, dễ nhận nút hơn. */
.p1-quote-card__cta {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 18px;
    border-radius: 10px;
    border: 1px solid #dee2e6;    
    color: #f2951b;
    font-size: 14px;
    font-weight: 700;
    transition: background .35s var(--p1-ease), color .35s var(--p1-ease), border-color .35s var(--p1-ease), box-shadow .35s var(--p1-ease), transform .2s var(--p1-ease);
}

.p1-quote-card__cta::after {
    content: "\f105";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 13px;
    transition: transform .35s var(--p1-ease-out);
}

.p1-quote-card:hover .p1-quote-card__cta {
    background: #f2951b;
    color: #fff;
    box-shadow: 0 10px 22px rgba(242, 149, 27, .3);
}

.p1-quote-card:hover .p1-quote-card__cta::after {
    transform: translateX(4px);
}

.p1-quote-card__cta:active {
    transform: scale(.97);
}

/* Giữ viền cam mỏng như nút thường lúc bình thường, chỉ đặc nền lúc rê chuột — đồng bộ với .p1-plan__cta (trang chủ,
   /service): trước đây gói nổi bật đặc nền cam ngay từ đầu, không phân biệt được trạng thái rê chuột. */
.p1-quote-card.is-featured:hover .p1-quote-card__cta {
    background: #d97e0a;
    border-color: #d97e0a;
    box-shadow: 0 10px 24px rgba(242, 149, 27, .35);
}

/* Hiệu ứng hiện dần khi cuộn tới do JS company-p2-nav.js gắn class .p1-reveal/.is-in — xem SELECTOR
   (.p1-quote-tabs__item, .p1-quote-card, .p1-faq-item) trong company-p2-nav.js; style opacity/transform
   dùng chung ở .company-p2-body .p1-reveal, không cần khai báo lại ở đây. */

@media (max-width: 640px) {
    .p1-quote-tabs {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }

    .p1-quote-tabs__item {
        padding: 11px 18px;
    }
}
/* Phân trang 1 hàng: hover không dịch/không clip — nút rê chuột nằm trên cùng. */
.p1-pagination { flex-wrap: nowrap; align-items: center; overflow: visible; }
.p1-pagination li { display: inline-flex; flex: none; position: relative; }
.p1-pagination a { background: #fff; transition: border-color .2s ease, color .2s ease, box-shadow .2s ease; }
.p1-pagination a:hover,
.p1-pagination a:focus-visible {
    z-index: 2;
    border-color: var(--p1-brand-1, #0068ff);
    color: var(--p1-brand-1, #0068ff);
    box-shadow: 0 0 0 3px rgba(0, 104, 255, .16);
}
.p1-pagination a.is-active, .p1-pagination a.is-active:hover {
    z-index: 1;
    background: var(--p1-accent-grad);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 6px 16px rgba(0, 104, 255, .3);
}
.p1-pagination span.is-dots { border-color: transparent; background: transparent; min-width: 24px; padding: 0 4px; }
.p1-pagination span.is-nav.is-off { opacity: .32; border-color: transparent; background: transparent; box-shadow: none; }

/* bang-gia css cache bump */