/* COMPANY/P1 — 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;
}

/* ===== 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;
    gap: 8px;
    margin-top: 32px;
    list-style: none;
    padding: 0;
}

.p1-pagination a,
.p1-pagination span {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--p1-border);
    color: var(--p1-text-muted);
    font-size: 14px;
    font-weight: 600;
}

.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;
    max-width: 480px;
    margin: 0 auto;
    padding: 48px 32px;
    text-align: center;
    color: var(--p1-text-muted);
    background: var(--p1-bg-card);
    border: 1px solid var(--p1-border);
    border-radius: var(--p1-radius);
    box-shadow: var(--p1-shadow-soft);
}

.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;
}

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

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

.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;
}

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

.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-p1-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-p1-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-p1-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-p1-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-p1-body .p1-cta-card__btn:active {
    transform: translateY(0) scale(.98);
}

.company-p1-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-p1-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-p1-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-p1-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-p1-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-p1-body .p1-cta-card__btn,
    .company-p1-body .p1-cta-card__btn::after,
    .p1-cta-card__eyebrow i,
    .p1-cta-card__phone-icon::after {
        animation: none;
    }
}

/* ===== Giới thiệu ===== */
.p1-about-grid {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 40px;
    align-items: start;
}

.p1-about-media {
    border-radius: var(--p1-radius);
    overflow: hidden;
    border: 1px solid var(--p1-border);
    margin-bottom: 22px;
}

.p1-about-media img {
    display: block;
    width: 100%;
    height: auto;
}

/* Slider ảnh + video trang Giới thiệu — các slide xếp chồng, chuyển bằng opacity (không reflow). */
.p1-about-slider {
    position: relative;
    isolation: isolate;
    aspect-ratio: 4 / 3;
    background: #0b1b4d;
}

.p1-about-slider__track,
.p1-about-slide,
.p1-about-slide > a,
.p1-about-video__play {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.p1-about-slide {
    opacity: 0;
    visibility: hidden;
    transition: opacity .6s ease, visibility 0s linear .6s;
}

.p1-about-slide.is-active {
    opacity: 1;
    visibility: visible;
    transition: opacity .6s ease;
}

.p1-about-slider .p1-about-slide img,
.p1-about-slide video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Video phủ kín khung (cắt phần thừa) — không còn dải đen trên/dưới. */
.p1-about-slide video { background: #000; object-fit: cover; }

/* Slide video: chấm điều hướng lên trên để không đè thanh điều khiển của video. */
.p1-about-slider.is-video .p1-about-slider__dots { bottom: auto; top: 12px; }
.p1-about-slide > a { cursor: zoom-in; }

.p1-about-video__play {
    border: 0;
    padding: 0;
    background: #000;
    cursor: pointer;
}

.p1-about-video__play img { opacity: .82; transition: opacity .25s ease, transform .5s ease; }
.p1-about-video__play:hover img { opacity: 1; transform: scale(1.03); }

.p1-about-video__icon {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 68px;
    height: 68px;
    margin: -34px 0 0 -34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 24px;
    background: rgba(255, 255, 255, .22);
    border: 1px solid rgba(255, 255, 255, .55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    padding-left: 4px;
}

.p1-about-slide iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.p1-about-slider__nav {
    position: absolute;
    top: 50%;
    z-index: 3;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 50%;
    background: rgba(11, 27, 77, .45);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity .25s ease, background .25s ease;
}

.p1-about-slider:hover .p1-about-slider__nav,
.p1-about-slider__nav:focus-visible { opacity: 1; }
.p1-about-slider__nav:hover { background: rgba(11, 27, 77, .75); }
.p1-about-slider__nav--prev { left: 12px; }
.p1-about-slider__nav--next { right: 12px; }

@media (hover: none) {
    .p1-about-slider__nav { opacity: 1; }
}

.p1-about-slider__dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 12px;
    z-index: 3;
    display: flex;
    justify-content: center;
    gap: 8px;
    pointer-events: none;
}

.p1-about-slider__dot {
    pointer-events: auto;
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .55);
    cursor: pointer;
    transition: width .25s ease, background .25s ease;
}

.p1-about-slider__dot.is-active { width: 24px; background: #fff; }

@media (prefers-reduced-motion: reduce) {
    .p1-about-slide, .p1-about-slide.is-active { transition: none; }
}

/* 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;
}

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

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

/* ===== 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;
}

.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) + 32px);
}

/* --- 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-p1-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-p1-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-p1-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-p1-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: 16 / 10; }

.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-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-p1-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-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-p1-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;
}

.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);
}

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

/* =========================================================================
   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 {
        
    }
}

.p1-quote-card.is-featured .p1-quote-card__head {
    background: linear-gradient(160deg, #0b3fb5 0%, #0068ff 55%, #2f8bff 100%);
}

/* Đầu thẻ MÔ PHỎNG (không phải ảnh dịch vụ thật): khối gradient thương hiệu chứa tên + mô tả ngắn + giá,
   thay cho ảnh avatar mà nhiều dịch vụ báo giá không có sẵn — kèm quầng sáng trang trí nhẹ cho đỡ phẳng/thô. */
.p1-quote-card__head {
    position: relative;
    display: block;
    padding: 28px 24px 24px;
    border-radius: 21px 21px 0 0;
    background: var(--p1-brand-grad);
    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: var(--p1-bg-card);
    color: #656a73;
    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);
    }
}

.p1-quote-card__cta {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 18px;
    border-radius: 10px;
    border: 1.5px solid var(--p1-brand-1);
    color: var(--p1-brand-1);
    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: var(--p1-brand-1);
    color: #fff;
    box-shadow: 0 10px 22px rgba(0, 104, 255, .22);
}

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

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

.p1-quote-card.is-featured .p1-quote-card__cta {
    background: var(--p1-brand-1);
    color: #fff;
}

.p1-quote-card.is-featured:hover .p1-quote-card__cta {
    background: var(--p1-brand-2);
    border-color: var(--p1-brand-2);
    box-shadow: 0 10px 24px rgba(0, 104, 255, .28);
}

/* Hiệu ứng hiện dần khi cuộn tới do JS company-p1-nav.js gắn class .p1-reveal/.is-in — xem SELECTOR
   (.p1-quote-tabs__item, .p1-quote-card, .p1-faq-item) trong company-p1-nav.js; style opacity/transform
   dùng chung ở .company-p1-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;
    }
}