/* COMPANY/P1 — Trang chủ: hero, dịch vụ nổi bật, thống kê, đối tác, tin tức, CTA */

/* ===== Hero ===== */
/* Hero toàn màn hình, tràn dưới header trong suốt, nội dung canh trái thẳng hàng với logo (kiểu Starlink). */
.p1-hero {
    position: relative;
    min-height: clamp(540px, 86vh, 780px); /* không ép đủ 100vh: hero cao vừa phải, mục sau lộ ra sớm hơn */
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: var(--p1-brand-2);
}

.p1-hero__bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(1.5px 1.5px at 12% 22%, rgba(255, 255, 255, .8), transparent 100%),
        radial-gradient(1px 1px at 27% 61%, rgba(255, 255, 255, .6), transparent 100%),
        radial-gradient(1.5px 1.5px at 41% 14%, rgba(255, 255, 255, .7), transparent 100%),
        radial-gradient(1px 1px at 58% 47%, rgba(255, 255, 255, .55), transparent 100%),
        radial-gradient(1.5px 1.5px at 73% 26%, rgba(255, 255, 255, .8), transparent 100%),
        radial-gradient(1px 1px at 86% 68%, rgba(255, 255, 255, .6), transparent 100%),
        radial-gradient(1px 1px at 93% 12%, rgba(255, 255, 255, .7), transparent 100%),
        radial-gradient(60% 50% at 88% 8%, rgba(255, 255, 255, .22), transparent 62%),
        radial-gradient(45% 40% at 6% 100%, rgba(246, 210, 78, .10), transparent 65%),
        var(--p1-brand-grad);
}

/*
 * Slide nền (banner HOME-SIDE) — markup .carousel-item do AdManager.RenderHomeSideCarouselItems dựng (ảnh / YouTube / MP4).
 * Chồng lên nhau, chuyển mờ dần; JS (company-p1-home.js) bật/tắt class .active.
 * !important vì bootstrap.min.css mặc định ẩn .carousel-item:not(.active) bằng display:none (mất hiệu ứng mờ).
 */
.p1-hero__slides {
    position: absolute;
    inset: 0;
    overflow: hidden;
    /*
     * Khép mọi lớp con của slide vào MỘT khối xếp chồng riêng (z-index 0), để lớp phủ xanh .p1-hero__shade (z-index 1) luôn nằm trên ảnh/video.
     * Trước đây iframe/video có z-index:1 inline mà .carousel-item không tạo khối xếp chồng (khi opacity=1), nên video "xuyên" lên trên lớp phủ:
     * lớp xanh chỉ thấy lúc đang chuyển mờ (opacity<1) rồi biến mất khi hiệu ứng xong, còn ảnh thì không bị vì ảnh không có z-index.
     */
    z-index: 0;
    isolation: isolate;
    /* Nền tối gần đen (khớp màn chờ của YouTube) thay vì để lộ gradient xanh .p1-hero__bg phía sau khi iframe video đang tải:
       trước đây nền xanh lộ ra "một chút rồi biến mất" mỗi lần video nạp / chuyển slide. */
    background: #04102e;
}

/*
 * Chuyển slide (ảnh / YouTube / MP4) bằng cross-fade "một chiều" — KHÔNG scale, KHÔNG trượt, chỉ opacity (GPU):
 *  - Slide mới nằm ở lớp trên (z-index 2) mờ dần 0 → 1; slide cũ (.is-leaving, do JS gắn) GIỮ NGUYÊN độ đục 1 ở lớp dưới (z-index 1)
 *    đến khi slide mới đã hiện đủ → không bao giờ có lúc hai lớp cùng nửa trong suốt (lộ nền / sáng tối thất thường).
 *  - Mọi slide luôn "visible" và có sẵn lớp GPU (will-change) — không bật/tắt visibility giữa chừng (nguyên nhân phải dựng lại lớp → khựng,
 *    nhất là với iframe YouTube / video). Slide không dùng chỉ ở opacity 0 phía dưới cùng.
 *  - Không dùng transform lên slide/ảnh → không đổi kích thước giữa hai lớp, ảnh không bị "nhảy" hay zoom đôi.
 */
.p1-hero__slides { --p1-fade: 1.2s; }

.p1-hero__slides .carousel-item {
    display: block !important;
    position: absolute !important;
    inset: 0;
    float: none;
    margin: 0;
    z-index: 0;
    opacity: 0;
    visibility: visible;
    transform: none;
    transition: opacity 0s linear;
    will-change: opacity;
    pointer-events: none;
}

.p1-hero__slides .carousel-item.is-leaving {
    z-index: 1;
    opacity: 1;
    transition: none;
}

.p1-hero__slides .carousel-item.active {
    z-index: 2;
    opacity: 1;
    pointer-events: auto;
    transition: opacity var(--p1-fade) cubic-bezier(.4, 0, .2, 1);
}

@media (prefers-reduced-motion: reduce) {
    .p1-hero__slides .carousel-item.active { transition: opacity .3s ease; }
}

/*
 * Trong lúc cross-fade ảnh (JS gắn .is-fading ~1.3s): tạm tắt các hiệu ứng "vẽ lại liên tục" nằm TRÊN ảnh — ánh kim chữ (animation background-position),
 * drop-shadow lên chữ trong suốt (background-clip:text) và backdrop-filter blur của nút. Chúng bắt trình duyệt vẽ/làm mờ lại toàn bộ vùng ảnh
 * ở MỖI khung hình đang trộn hai lớp ảnh → nguyên nhân chính của cảm giác "giật lát" khi chuyển ảnh. Hết chuyển là bật lại như cũ.
 */
.p1-hero.is-fading .p1-hero__title span {
    animation: none !important;
    filter: none;
}
.company-p1-body .p1-hero.is-fading .p1-hero__actions .btn-p1-primary {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
.p1-hero__slides .carousel-item > img,
.p1-hero__slides .carousel-item > video {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    display: block;
}

/* Lớp bấm vào banner (nếu banner có link) nằm dưới nội dung hero; nút âm thanh/phóng to của ola-ads không dùng ở theme này. */
.p1-hero__slides .ola-ad-hitlayer {
    position: absolute;
    inset: 0;
    z-index: 2;
}

.p1-hero__slides .ola-ad-video__toolbar {
    display: none !important;
}

/* Chấm điều hướng slideshow (chỉ hiện khi có từ 2 ảnh). */
.p1-hero__dots {
    position: absolute;
    right: var(--p1-gutter);
    bottom: 28px;
    z-index: 3;
    display: flex;
    gap: 8px;
}

.p1-hero__dots button {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .4);
    cursor: pointer;
    transition: width .25s ease, background .25s ease;
}

.p1-hero__dots button.is-active {
    width: 28px;
    background: #fff;
}

/* Lớp tối để chữ trắng luôn đọc được trên ảnh: đậm ở trái/dưới, nhẹ ở phải; và mờ nhẹ phía trên cho header. */
.p1-hero__shade {
    position: absolute;
    inset: 0;
    z-index: 1; /* trên khối slide (z-index 0), dưới chữ (.p1-hero__inner z-index 2) và chấm điều hướng (3) */
    pointer-events: none; /* không chặn bấm vào banner có link (.ola-ad-hitlayer) */
    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%), /* dịu ảnh sáng để trắng + vàng nổi như ảnh mẫu */
        linear-gradient(0deg, rgba(0, 30, 96, .6) 0%, rgba(0, 30, 96, 0) 40%);
}

.p1-hero__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: calc(var(--p1-header-h) + 56px) var(--p1-gutter) 64px;
}

.p1-hero__title {
    max-width: 1100px; /* đủ rộng để dòng nhấn dài không bị bẻ thêm dòng khi chữ đã nhỏ lại */
    font-size: clamp(24px, 3vw, 38px); /* vừa hơn (trước tối đa 50px); vẫn lớn hơn H1 trang trong (34px) vì là tiêu đề hero trang chủ */
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.01em;
    color: #fff;
    text-shadow: 0 2px 20px rgba(0, 12, 40, .45); /* dòng trắng nổi rõ trên ảnh sáng */
    margin: 0 0 16px;
}

/*
 * Tiêu đề 2 màu (kiểu ảnh mẫu): dòng đầu TRẮNG đậm, dòng nhấn VÀNG KIM gradient chạy sáng — CÙNG kỹ thuật với
 * .p1-header__brand-accent / .p1-topthemes__title-shine (dùng lại đúng @keyframes p1ThemesTitleShine bên dưới).
 * Trắng + vàng trên nền tối tương phản mạnh, sang và dễ đọc hơn nhiều so với xanh trên nền xanh.
 */
.p1-hero__title span {
    display: block;
    width: fit-content; /* để dải màu chạy vừa đúng bề rộng chữ, không bị kéo dãn theo khung */
    margin-top: .06em;
    /* Gradient xanh nhạt như .accent ở monacloud.vn/bang-gia (--grad-accent) */
    background-image: linear-gradient(100deg, #c3cdff 0%, #8b9ffd 45%, #5b78ff 100%);
    background-size: 100% 100%;
    background-position: 0 0;
    text-shadow: none; /* text-shadow của tiêu đề sẽ lộ qua chữ trong suốt */
    filter: drop-shadow(0 2px 14px rgba(0, 12, 40, .4));
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/*
 * Con trỏ nháy khi dòng nhấn (vàng kim) đang được gõ ra từng ký tự (company-p1-home.js, typeAccentText) — chỉ bật
 * class này trong lúc gõ, JS tự gỡ khi gõ xong. Màu đặc (không dùng currentColor) vì chữ cha đang trong suốt do
 * background-clip:text ở trên.
 */
.p1-hero__title-typing::after {
    content: "";
    display: inline-block;
    width: 2px;
    height: .95em;
    margin-left: 3px;
    vertical-align: -0.12em;
    background: #fff;
    animation: p1HeroCaretBlink .8s steps(1) infinite;
}

@keyframes p1HeroCaretBlink {
    50% { opacity: 0; }
}

/* Tiêu đề lấy từ mô tả banner (HTML tự do): bỏ margin/cỡ chữ riêng của thẻ con để giữ nhịp như tiêu đề gốc. */
.p1-hero__title p,
.p1-hero__title h1,
.p1-hero__title h2,
.p1-hero__title h3 {
    margin: 0;
    font: inherit;
    letter-spacing: inherit;
}

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

/* Nút chỉ hiện khi banner có link: display:flex ở trên sẽ đè thuộc tính hidden nếu không ép lại. */
.p1-hero__actions[hidden] {
    display: none;
}

/*
 * Nút hero "Xem chi tiết": kính mờ trong suốt + viền vàng kim (cùng tông dòng nhấn của tiêu đề), bo tròn, mũi tên trượt khi rê chuột.
 * Selector dài để thắng luật nút trắng của .p1-hero trong company-p1-theme.css.
 */
.company-p1-body .p1-hero .p1-hero__actions .btn-p1-primary {
    gap: 8px;
    padding: 8px 20px; /* nhỏ gọn hơn (trước 11px 26px) để không nặng nề và bớt sát cụm nút liên hệ nổi ở góc trái dưới */
    border-radius: 999px;
    border: 1px solid rgba(248, 205, 79, .55);
    background: rgba(255, 255, 255, .08);
    color: #f8d36a;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .01em;
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
    backdrop-filter: blur(10px) saturate(1.2);
    box-shadow: 0 6px 24px rgba(0, 12, 40, .18), inset 0 1px 0 rgba(255, 255, 255, .12);
    transition: background .45s var(--p1-ease-out), border-color .45s var(--p1-ease-out), color .45s var(--p1-ease-out),
        box-shadow .45s var(--p1-ease-out), transform .45s var(--p1-ease-out);
}

.company-p1-body .p1-hero .p1-hero__actions .btn-p1-primary::after {
    content: "\2192"; /* → */
    display: inline-block;
    transition: transform .45s var(--p1-ease-out);
}

.company-p1-body .p1-hero .p1-hero__actions .btn-p1-primary:hover,
.company-p1-body .p1-hero .p1-hero__actions .btn-p1-primary:focus-visible {
    background: rgba(248, 205, 79, .2);
    border-color: rgba(248, 205, 79, .95);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(0, 12, 40, .28), 0 0 0 4px rgba(248, 205, 79, .12), inset 0 1px 0 rgba(255, 255, 255, .18);
}

.company-p1-body .p1-hero .p1-hero__actions .btn-p1-primary:hover::after,
.company-p1-body .p1-hero .p1-hero__actions .btn-p1-primary:focus-visible::after {
    transform: translateX(4px);
}

.company-p1-body .p1-hero .p1-hero__actions .btn-p1-primary:active {
    transform: translateY(0) scale(.98);
    transition-duration: .15s;
}

/* ===== Dịch vụ nổi bật =====
   grid-template-columns/gap thật sự áp dụng đặt ở block .p1-service-grid phía dưới (ghi đè, cùng file, không có
   media query) — chỉ giữ display:grid ở đây để tránh khai báo 2 lần gây nhầm khi sửa. */
.p1-service-grid {
    display: grid;
}

.p1-service-card {
    background: var(--p1-bg-card);
    border: 1px solid var(--p1-border);
    border-radius: var(--p1-radius);
    padding: 30px 26px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: transform .4s var(--p1-ease), border-color .4s var(--p1-ease), box-shadow .4s var(--p1-ease);
}

.p1-service-card:hover {
    transform: translateY(-4px);
    border-color: rgba(0, 104, 255, .28);
    box-shadow: var(--p1-shadow);
}

.p1-service-card__desc {
    font-size: 14px;
    line-height: 1.6;
    color: var(--p1-text-muted);
    margin: 0;
    flex-grow: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ===== Mẫu website (kho giao diện) — bố cục theo khối "Giao diện website" của Haravan ===== */
.p1-section__title--md {
    font-size: clamp(24px, 3vw, 40px); /* câu dài hơn tiêu đề thường nên nhỏ hơn một bậc */
}

/*
 * Thẻ mẫu kiểu themes.haravan.com: thẻ trắng có đệm 10px, ảnh xem trước LỚN dạng dọc (như chụp cả trang web, cắt từ đầu trang), bo góc riêng,
 * tên mẫu + giá cỡ lớn bên dưới.
 */
/* Không còn đệm 10px quanh thẻ (trước làm ảnh có viền trắng, không "full") — ảnh giờ tràn sát mép thẻ, góc bo tự động
   nhờ overflow:hidden + border-radius của chính .p1-theme-card, đúng kiểu .demo-card ở trang /themes (Showroom.aspx). */
.p1-theme-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: transparent;
    
    border-radius: 18px;
    box-shadow: 0 1px 3px rgba(20, 33, 61, .04);
    transition: transform .5s var(--p1-ease-out), box-shadow .5s var(--p1-ease-out), border-color .4s var(--p1-ease), opacity .35s var(--p1-ease);
}

.p1-theme-card[hidden] {
    display: none;
}

@media (hover: hover) {
    .p1-theme-card:hover {
        transform: translateY(-5px);
        border-color: rgba(0, 104, 255, .25);
       /* box-shadow: 0 18px 40px rgba(20, 33, 61, .12);*/
    }
}

/*
 * Ảnh xem trước tỉ lệ dọc 4:5 (trước 5:6 — hơi thấp, không đủ chỗ cho tiêu đề đè lên): cao hơn một chút để chữ tiêu đề
 * (đưa lên nằm ĐÈ trên ảnh, xem .p1-theme-card__title) có chỗ thoáng phía dưới, không che mất nội dung ảnh chụp trang.
 * Ảnh phủ kín khung, canh từ ĐẦU ảnh (top) như ảnh chụp trang; rê chuột thì ảnh tự "cuộn" từ trên xuống dưới (object-position)
 * để xem trước phần còn lại của trang. Nhãn nhóm · mã ở góc trái trên; lớp phủ tối dần ở đáy để chữ trắng luôn đọc rõ.
 */
.p1-theme-card__thumb {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--p1-bg-alt);
}

.p1-theme-card__thumb img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 0%;
    transition: object-position .8s var(--p1-ease-out);
}

@media (hover: hover) {
    .p1-theme-card:hover .p1-theme-card__thumb img {
        object-position: 50% 100%;
        transition: object-position 5s ease-in-out;
    }
}

/* Lớp phủ tối dần từ giữa xuống đáy ảnh — nền cho chữ tiêu đề trắng đè lên (bên dưới .p1-theme-card__tag nên không ăn vào nhãn góc trên). */
.p1-theme-card__thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(8, 16, 40, 0) 48%, rgba(8, 16, 40, .8) 100%);
    pointer-events: none;
}

.p1-theme-card__tag {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    padding: 3px 10px;
    border-radius: 6px;
    background: rgba(20, 33, 61, .8);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .03em;
}

/* Tiêu đề ĐÈ LÊN ảnh (đáy khung ảnh) thay vì nằm riêng bên dưới — chữ trắng + đổ bóng, đọc rõ nhờ lớp phủ ::after ở trên. */
.p1-theme-card__title {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 12px;
    z-index: 2;
    margin: 0;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .4);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Đệm thân thẻ tính riêng (không dựa vào đệm 10px của .p1-theme-card nữa — đã bỏ), khớp .demo-card-body của /themes. */
.p1-theme-card__body {
    display: flex;
    flex-direction: column;
    padding: 12px 14px 14px;
    background-color: #fec947;
}

/* Hàng giá (trái) + nút "Xem thực tế" (phải). */
.p1-theme-card__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.p1-theme-card__price {
    font-size: 17px;
    font-weight: 600;
    color: var(--p1-text);
}

/* Nút "Xem thực tế" — pill gradient thương hiệu đặc + icon, đúng kiểu .demo-btn-demo ở trang /themes (trước là viền xám nhạt). */
.company-p1-body .p1-theme-card__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    flex: none;
    height: 27px;
    padding: 0 13px 0 11px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--p1-brand-1), #7c3aed);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1;
    white-space: nowrap;
    transition: filter .2s ease, transform .2s ease, box-shadow .2s ease;
}

.company-p1-body .p1-theme-card__cta:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 104, 255, .3);
}

.p1-theme-card__cta-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 13px;
    height: 13px;
    flex: none;
}

.p1-theme-card__cta-ico svg {
    width: 12px;
    height: 12px;
    display: block;
}

/*
 * GIAO DIỆN NỔI BẬT — dải tiêu đề màu (chữ trắng trái, nút phải) + hàng thẻ chạy tự động full chiều ngang, gối lên dải
 * (kiểu "Top giao diện tuần" của Haravan cho phần tiêu đề + kỹ thuật băng chạy liên tục của dải "Đối tác" cho hàng thẻ:
 * xem .p1-partners__marquee/__track — cùng công thức mask mờ hai mép + animation translateX(-50%) trên bộ thẻ nhân đôi).
 */
.p1-topthemes {
    --p1-tt-pad: clamp(20px, 4vw, 72px); /* lề hai bên: dải tiêu đề và hàng thẻ cùng lề để mép trái thẳng hàng */
    position: relative;
 /*   padding-top: var(--p1-sec-y);*/
    padding-bottom: var(--p1-sec-y);
    /*background: #f2f4f9;*/
}

/* Full chiều ngang màn hình (không bó trong khung 1200px như các mục khác). */
.p1-topthemes .p1-container {
    max-width: none;
    padding-left: var(--p1-tt-pad);
    padding-right: var(--p1-tt-pad);
}

/* Đầu mục "Giao diện nổi bật" dùng .p1-section__head chung (không còn dải màu nền); chỉ cần style liên kết hotline trong dòng mô tả. */
/* Tiêu đề 2 màu có hiệu ứng: cụm đầu (chữ tối) được GÕ MÁY, cụm nhấn (xanh chuyển sắc) hiện ra rồi có vệt sáng chạy qua. */
.p1-topthemes__title-type-wrap {
    position: relative;
    display: inline-block;
    vertical-align: baseline;
}

.p1-topthemes__title-type-measure {
    visibility: hidden;     /* đo trước bề rộng chữ đầy đủ để khung không giật khi gõ */
    pointer-events: none;
    white-space: pre;
}

.p1-topthemes__title-typed-row {
    position: absolute;
    left: 0;
    top: 0;
    display: inline-flex;
    align-items: center;
    white-space: pre;
}

.p1-topthemes__title-caret {
    display: inline-block;
    flex: none;
    width: .07em;
    height: .85em;
    margin-left: 2px;
    background: currentColor;
    border-radius: 1px;
    animation: p1ThemesCaretBlink 1.05s steps(1, end) infinite;
    transition: opacity .3s ease;
}

.p1-topthemes__title-caret.is-done {
    opacity: 0;
    animation: none;
}

@keyframes p1ThemesCaretBlink {
    0%, 48% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

.p1-topthemes__title-rest {
    transition: opacity .55s ease;
}

.p1-topthemes__title-rest.is-waiting {
    opacity: 0;
    pointer-events: none;
}

/* Cụm nhấn: giữ MÀU XANH chuyển sắc gốc, thêm một vệt sáng trắng quét qua (cùng keyframes p1ThemesTitleShine với tiêu đề hero). */
.p1-topthemes__title-shine.p1-title-accent {
    display: inline;
    font-weight: inherit;
    /* Bảng màu xanh của monacloud.vn (--grad-button: #2442c4 → #2d50e0 → #5b78ff); nền mục này SÁNG nên dùng tông đậm của họ màu đó. */
    background-image: linear-gradient(110deg, #2442c4 0%, #2d50e0 38%, #8b9ffd 46%, #ffffff 50%, #8b9ffd 54%, #5b78ff 62%, #2442c4 100%);
    background-size: 300% 100%;
    background-position: 120% center;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.p1-topthemes__title-shine.is-ready {
    animation: p1ThemesTitleShine 7s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .p1-topthemes__title-shine.is-ready,
    .p1-topthemes__title-caret {
        animation: none !important;
    }
}
.p1-topthemes__hotline-link {
    font-weight: 800;
    color: var(--p1-brand-1);
    white-space: nowrap;
    text-decoration: none;
}

.p1-topthemes__hotline-link:hover {
    text-decoration: underline;
}
/* Hàng thẻ nằm NGAY SAU đầu mục (khoảng cách do .p1-section__head lo). */
.p1-topthemes__wrap {
    position: relative;
    background: transparent;
}

/*
 * Băng chạy full-bleed: tràn hết viền màn hình (không còn bó trong --p1-tt-pad), mép mờ dần hai bên bằng mask thay vì
 * cắt cứng — cùng công thức với .p1-partners__marquee. overflow:hidden để phần thẻ tràn ra ngoài màn hình không tạo
 * thanh cuộn ngang phụ; đệm dọc để thẻ nhấc lên + bóng đổ khi hover không bị mép mask/overflow cắt mất.
 */
.p1-topthemes__marquee {
    overflow: hidden;
    padding: 5px 0 2px;
    background: transparent;
   /* -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);*/
}

/* Track rộng bằng đúng nội dung (4 bộ thẻ nối liền) rồi tự trượt sang trái 25% quãng đường — 4 set giống hệt nhau nên tới đó lặp lại liền mạch, không giật. */
.p1-topthemes__track {
    display: flex;
    width: max-content;
    background: transparent;
    animation: p1ThemesScroll 46s linear infinite;
}

.p1-topthemes__marquee:hover .p1-topthemes__track {
    animation-play-state: paused;
}

.p1-topthemes__set {
    display: flex;
    flex-shrink: 0;
    gap: 20px;
    padding: 0 10px;
}

@keyframes p1ThemesScroll {
    from { transform: translateX(0); }
    to { transform: translateX(-25%); }
}

/* Cỡ thẻ CỐ ĐỊNH theo px (không chia % theo container như trước) — băng chạy tự do nên bề rộng track là tổng bề rộng thẻ thật, không phải 100%. */
.p1-topthemes__track .p1-theme-card {
    flex: 0 0 clamp(220px, 19vw, 270px);
    width: clamp(220px, 19vw, 270px);
}

@media (max-width: 575px) {
    .p1-topthemes__set { gap: 14px; }
    .p1-topthemes__track .p1-theme-card { flex-basis: 210px; width: 210px; }
}

@media (prefers-reduced-motion: reduce) {
    .p1-topthemes__track { animation: none; }
    .p1-topthemes__marquee { overflow-x: auto; }
}
/* ===== Thống kê ===== */
.p1-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--p1-grid-gap);
    text-align: center;
}

.p1-stats__item {
    padding: 24px 16px;
    border: 1px solid var(--p1-border);
    border-radius: var(--p1-radius);
    background: var(--p1-bg-card);
}

.p1-stats__num {
    font-size: clamp(30px, 4vw, 44px);
    font-weight: 800;
    color: var(--p1-accent-2);
    display: block;
    margin-bottom: 8px;
}

.p1-stats__label {
    color: var(--p1-text-muted);
    font-size: 14px;
}

/* ===== Đối tác: dải thẻ chạy (kiểu Zalo AI "Đã được tối ưu cho N ngành") ===== */
#doi-tac {
    scroll-margin-top: calc(var(--p1-header-h) + 40px);
}

/*
 * Tiêu đề có cụm chữ đổi ở GIỮA trên một dòng (kiểu Haravan "Giải pháp [bán hàng đa kênh] vượt trội"):
 *   chữ trước + [cụm chữ XANH đổi bằng 1 trong 2 kiểu, LUÂN PHIÊN mỗi lần đổi cụm] + chữ sau.
 *   Kiểu 1 — gõ máy: xoá cụm cũ từng ký tự rồi gõ cụm mới từng ký tự (không con trỏ nháy).
 *   Kiểu 2 — trượt dọc: cụm cũ trượt lên & biến mất, cụm mới trượt lên thế chỗ (.p1-rotator__stage.is-sliding).
 *   Luân phiên 2 kiểu để xem lâu đỡ nhàm — company-p1-home.js (initRotator) điều phối.
 * .p1-rotator__list là danh sách cụm render sẵn từ server — JS đọc rồi ẩn hẳn (display:none), hiển thị thật là
 * .p1-rotator__stage > .p1-rotator__typed (JS tạo/thay mới). Không JS: CSS tự hiện tĩnh cụm đầu tiên, không rỗng.
 */
.p1-rotator {
    line-height: 1.5;
}

/* Tiêu đề luôn một dòng trên màn hình từ 768px (điện thoại vẫn được xuống dòng để không tràn). */
.p1-section__head--wide {
    max-width: 1160px;
}

@media (min-width: 768px) {
    .p1-rotator--one-line {
        white-space: nowrap;
    }
}

.p1-rotator__box {
    display: inline-block;
    vertical-align: top;
    height: 1.5em; /* đúng 1 dòng — cắt phần cụm đang trượt ra/vào lúc chuyển kiểu trượt dọc */
    overflow: hidden;
    text-align: left;
    font-weight:800;
}

.p1-rotator__stage {
    display: block;
}

.p1-rotator__stage.is-sliding {
    transition: transform .5s var(--p1-ease-out);
}

.p1-rotator__list > span:not(:first-child) {
    display: none; /* không JS: chỉ hiện cụm đầu tĩnh */
}

.p1-rotator__list > span,
.p1-rotator__typed {
    display: block;
    height: 1.5em;
    line-height: 1.5;
    width: max-content; /* đo được bề rộng thật của cụm để khung ôm sát (khung .p1-rotator__box tự co theo) */
    white-space: nowrap;
    color: #2463eb; /* xanh dịu như tiêu đề Haravan; hai bên vẫn là màu chữ chính */
}

.p1-partners__caption {
    text-align: center;
    margin: -6px 0 26px;
    font-size: 16px;
    font-weight: 500;
    color: var(--p1-text-muted);
}

.p1-partners__caption strong {
    color: var(--p1-brand-1);
    font-weight: 800;
}

.p1-partners__marquee {
    overflow: hidden;
    padding: 6px 0 14px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.p1-partners__track {
    display: flex;
    width: max-content;
    animation: p1PartnersScroll 40s linear infinite;
}

.p1-partners__marquee:hover .p1-partners__track {
    animation-play-state: paused;
}

/* Mỗi "set" rộng theo nội dung, nhân 4 để vòng lặp liền mạch không khoảng trống. */
.p1-partners__set {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    flex-shrink: 0;
}

@keyframes p1PartnersScroll {
    from { transform: translateX(0); }
    to { transform: translateX(-25%); }
}

/*
 * Thẻ đối tác — CHỈ LOGO, không còn tên/loại kèm theo (giống dải logo phẳng của trang /themes: .demo-partner-card),
 * bỏ khung pill trắng + viền/bóng cũ, chỉ còn ảnh bo góc xám nhạt, rê chuột lên màu.
 */
.p1-partner-card {
    display: block;
    flex-shrink: 0;
    width: 148px;
    height: 80px;
    border-radius: 14px;
    overflow: hidden;
    background: var(--p1-bg-alt);
    transition: transform .4s var(--p1-ease);
}

.p1-partner-card:hover {
    transform: translateY(-3px);
}

.p1-partner-card__logo {
    display: block;
    width: 100%;
    height: 100%;
}

.p1-partner-card__logo img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: contain;
    filter: grayscale(1);
    opacity: .8;
    transition: transform .6s var(--p1-ease-out), filter .5s var(--p1-ease-out), opacity .5s var(--p1-ease-out);
}

.p1-partner-card:hover .p1-partner-card__logo img {
    transform: scale(1.05);
    filter: none;
    opacity: 1;
}

@media (max-width: 575px) {
    .p1-partner-card { width: 124px; height: 68px; }
}

@media (prefers-reduced-motion: reduce) {
    .p1-partners__track { animation: none; }
    .p1-partners__marquee { overflow-x: auto; }
}
/* ===== Tin tức ===== */
.p1-news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--p1-grid-gap);
}

/*
 * Không còn là <a> bao trọn thẻ (trước đây), vì danh mục giờ là LINK RIÊNG bấm được độc lập — không thể lồng
 * <a> trong <a>. Thay bằng kỹ thuật "stretched link": .p1-news-card__title-link::after phủ kín cả thẻ (position:
 * relative ở đây làm điểm neo), nên bấm bất kỳ đâu trên thẻ vẫn vào bài viết như cũ; badge danh mục nằm trên
 * lớp phủ đó (z-index cao hơn) nên vẫn bấm riêng được để sang trang danh mục.
 */
.p1-news-card {
    position: relative;
    background: var(--p1-bg-card);
    border: 1px solid var(--p1-border);
    border-radius: var(--p1-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .4s var(--p1-ease), border-color .4s var(--p1-ease), box-shadow .4s var(--p1-ease);
}

.p1-news-card:hover {
    transform: translateY(-4px);
    border-color: rgba(0, 104, 255, .28);
    box-shadow: var(--p1-shadow);
}

/*
 * Khung ảnh cố định tỉ lệ 16:10, ảnh phủ kín bằng position:absolute + object-fit:cover.
 * (Không dựa vào height:100% của phần tử có aspect-ratio — trình duyệt có lúc coi chiều cao đó là "auto" nên ảnh co nhỏ, chừa viền trống.)
 * Thẻ .p1-news-card__thumb là <span> nên phải display:block + width:100% mới nhận aspect-ratio/overflow đúng.
 */
.p1-news-card__thumb {
    position: relative;
    display: block;
    flex: none;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #eaf1ff;
}

.p1-news-card__thumb img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
    transition: transform .6s var(--p1-ease-out, ease);
}

.p1-news-card:hover .p1-news-card__thumb img {
    transform: scale(1.06);
}

.p1-news-card__body {
    display: block;
    padding: 15px 17px 19px;
}

/* Badge danh mục — link riêng, nổi trên lớp phủ "stretched link" của tiêu đề (z-index cao hơn) nên bấm được độc lập. */
.p1-news-card__category {
    position: relative;
    z-index: 2;
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-decoration: none;
    transition: color .25s var(--p1-ease);
}

/* 2 lớp để thắng ".company-p1-body a { color: inherit }" mà không cần !important (đúng cỡ :hover ngay dưới, vốn đã tự thắng nhờ pseudo-class). */
.company-p1-body .p1-news-card__category {
    color: #c9951a;
}

.p1-news-card__category:hover {
    color: var(--p1-brand-2);
    text-decoration: underline;
}

.p1-news-card__title {
    font-size: 15px;
    font-weight: 600;
    color: var(--p1-text);
    margin: 10px 0 0;
    line-height: 1.4;
}

/* Link thật sự của thẻ: chữ kế thừa màu tiêu đề, ::after phủ kín .p1-news-card (position:relative ở trên) để cả thẻ bấm được. */
.p1-news-card__title-link {
    display: -webkit-box;
    color: inherit;
    text-decoration: none;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.p1-news-card__title-link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

/*
 * ===== 6 bước xây dựng website chuyên nghiệp =====
 * Một khung trắng bo góc lớn DUY NHẤT chứa lưới 3x2, các ô LIỀN KỀ nhau (không khoảng cách),
 * ngăn cách bằng đường kẻ mảnh — đúng bố cục mẫu (kiểu "why-card" của skymax.vn), không phải các thẻ rời có bóng đổ riêng.
 */
.p1-steps-panel {
    background: var(--p1-bg-card);
    border-radius: 28px;
    box-shadow: var(--p1-shadow-soft);
    overflow: hidden;
}

.p1-steps-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.p1-step-cell {
    position: relative;
    padding: clamp(28px, 3vw, 40px) clamp(22px, 3vw, 36px);
    border-right: 1px solid var(--p1-border);
    border-bottom: 1px solid var(--p1-border);
    background-color: transparent;
    transition: background-color .35s var(--p1-ease);
}

/* Rê chuột: cả ô tô nền xanh nhạt (mép khớp đúng đường kẻ phân cách, viền panel bo tròn tự cắt gọn nhờ overflow:hidden),
   vạch màu trên đầu ô trượt ra, số thứ tự và tiêu đề chuyển sang xanh thương hiệu — hiệu ứng rõ ràng hơn nhiều so với chỉ đổi màu chữ. */
.p1-step-cell::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--p1-accent-grad);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .4s var(--p1-ease-out);
}

@media (hover: hover) {
    .p1-step-cell:hover {
        background-color: var(--p1-bg-alt);
    }

    .p1-step-cell:hover::before {
        transform: scaleX(1);
    }

    .p1-step-cell:hover .p1-step-cell__num {
        color: var(--p1-brand-1);
    }

    .p1-step-cell:hover .p1-step-cell__title {
        color: var(--p1-brand-1);
    }
}

/* Bỏ đường kẻ ở mép phải cột cuối và mép dưới hàng cuối (3 cột x 2 hàng). */
.p1-step-cell:nth-child(3n) { border-right: none; }
.p1-step-cell:nth-last-child(-n+3) { border-bottom: none; }

@media (max-width: 767px) {
    .p1-steps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* Nạp lại đường kẻ mà quy tắc 3 cột đã bỏ, rồi tính lại theo 2 cột. */
    .p1-step-cell:nth-child(3n) { border-right: 1px solid var(--p1-border); }
    .p1-step-cell:nth-last-child(-n+3) { border-bottom: 1px solid var(--p1-border); }
    .p1-step-cell:nth-child(2n) { border-right: none; }
    .p1-step-cell:nth-last-child(-n+2) { border-bottom: none; }
}

@media (max-width: 575px) {
    .p1-steps-grid { grid-template-columns: 1fr; }
    .p1-step-cell {
        border-right: none;
        border-bottom: 1px solid var(--p1-border);
    }
    .p1-step-cell:last-child { border-bottom: none; }
}

/* Số thứ tự: to, đậm nhưng MỜ (xám nhạt) — chỉ để định vị thị giác, không cạnh tranh với tiêu đề. */
.p1-step-cell__num {
    display: block;
    font-size: clamp(30px, 3vw, 38px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.02em;
    color: rgba(20, 33, 61, .16);
    margin-bottom: 18px;
    transition: color .35s var(--p1-ease);
}

.p1-step-cell__title {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 700;
    color: var(--p1-text);
    line-height: 1.4;
    transition: color .35s var(--p1-ease);
}

.p1-step-cell__desc {
    margin: 0;
    font-size: 14px;
    line-height: 1.65;
    color: var(--p1-text-muted);
}

/*
 * Hiệu ứng cuộn-tới-hiện (reveal): mờ dần + trượt nhẹ lên, so le theo --delay của từng ô (company-p1-home.js bật class .visible
 * bằng IntersectionObserver). Dùng chung được cho mọi mục sau này, không riêng gì khối 6 bước.
 */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s var(--p1-ease-out), transform .7s var(--p1-ease-out);
    transition-delay: var(--delay, 0s);
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ===== CTA cuối trang ===== */
.p1-cta-banner {
    position: relative;
    border-radius: 24px;
    padding:  36px;
    text-align: center;
    background:
        radial-gradient(55% 90% at 90% 0%, rgba(255, 255, 255, .2), transparent 60%),
        var(--p1-brand-grad);
    overflow: hidden;
}

.p1-cta-banner h2 {
    font-size: clamp(24px, 3.2vw, 34px);
    font-weight: 800;
    margin: 0 0 14px;
    color: #fff;
}

/* Chữ tiêu đề 2 màu: phần chính trắng, phần nhấn ánh kim vàng chạy sáng — CÙNG kỹ thuật với .p1-header__brand-accent. */
.p1-cta-banner__title-accent {
    background-image: var(--p1-gold-shine);
    background-size: 300% 100%;
    background-position: 120% center;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

@media (prefers-reduced-motion: no-preference) {
    .p1-cta-banner__title-accent {
        animation: p1ThemesTitleShine 7s ease-in-out infinite;
    }
}

.p1-cta-banner p {
    color: rgba(255, 255, 255, .9);
    margin: 0 0 8px;
    font-size: 16px;
}

/* Logo công ty trên nền xanh: khung kính mờ để logo (dù màu gì) vẫn nổi và có sức nặng thị giác. */
.p1-cta-banner__brand {
    display: flex;
    justify-content: center;
    margin: 0 0 20px;
}

.p1-cta-banner__logo {
    max-height: 44px;
    width: auto;
    padding: 8px 20px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .22);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    object-fit: contain;
}

/*
 * Thông tin liên hệ đầy đủ trong băng CTA: MỘT thanh kính mờ chứa hotline + địa chỉ + email, ngăn cách bằng vạch
 * dọc — đồng bộ cùng một kiểu icon tròn/nhãn thay vì mỗi mục một kiểu rời rạc như trước. Icon hotline dùng lại
 * hiệu ứng lan sóng (.p1-cta-card__phone-icon::after, xem company-p1-service.css) qua alias bên dưới.
 */
.p1-cta-banner__contact {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    gap: 18px 28px;
    margin: 28px 0 0;
    padding: 20px 28px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .18);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.p1-cta-banner__item {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    color: #fff;
    transition: transform .35s var(--p1-ease-out);
}

a.p1-cta-banner__item:hover {
    transform: translateY(-2px);
}

.p1-cta-banner__icon {
    position: relative;
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    font-size: 16px;
}

/* Icon hotline: nổi bật vàng kim + lan sóng — mượn đúng hiệu ứng ::after của .p1-cta-card__phone-icon. */
.p1-cta-banner__icon--ring {
    background: #f8d36a;
    color: #0b3fb5;
}

.p1-cta-banner__icon--ring::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-banner__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.p1-cta-banner__text small {
    font-size: 12px;
    color: rgba(255, 255, 255, .78);
}

.p1-cta-banner__text strong {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
}

.p1-cta-banner__divider {
    align-self: stretch;
    width: 1px;
    background: rgba(255, 255, 255, .22);
}

@media (max-width: 767.98px) {
    .p1-cta-banner__contact {
        flex-direction: column;
        align-items: stretch;
        padding: 18px 20px;
    }

    .p1-cta-banner__divider {
        width: 100%;
        height: 1px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .p1-cta-banner__icon--ring::after {
        animation: none;
    }
}

@media (max-width: 767.98px) {
    .p1-cta-banner { padding: 36px 20px; }
}

/* Thẻ trắng: bóng nhẹ để tách khỏi nền trắng / nền xanh nhạt. */
.p1-service-card,
.p1-news-card,
.p1-stats__item {
    box-shadow: var(--p1-shadow-soft);
}


/* =====================================================================
   THẺ DỊCH VỤ KIỂU BẢNG GIÁ (theo mẫu Zalo AI "Gói phù hợp"):
   tên nhỏ in hoa · giá lớn + "/ đơn vị" · mô tả · tick tính năng · nút. Gói nổi bật (hot + mới) viền xanh + huy hiệu.
   ===================================================================== */
/* Mục "Dịch vụ nổi bật": trước đây có thêm quầng sáng ảnh hr-pricing-bg1.png phủ ::before — bỏ để nền phẳng,
   đỡ rối (đã cộng dồn với nền hoạ tiết của .p1-section); thẻ trắng vẫn nổi lên nhờ box-shadow riêng của thẻ. */
#dich-vu {
    position: relative;
    padding-bottom: var(--p1-sec-y);   /* cùng đệm dưới như mọi mục (.p1-section) → nút cuối mục không dính sát dải màu kế tiếp */
}

#dich-vu > .p1-container {
    position: relative; /* nằm trên ảnh nền */
}

/* Thẻ trong mục "Dịch vụ nổi bật": viền và bóng ngả xanh nhẹ cho đồng bộ tông thương hiệu. */
#dich-vu .p1-service-card.p1-plan:not(.is-featured) {
    border-color: rgba(98, 170, 255, .28);
    box-shadow: 0 2px 6px rgba(20, 33, 61, .04), 0 16px 40px rgba(60, 130, 255, .12);
}

#dich-vu .p1-plan.is-featured {
    background: linear-gradient(180deg, #eaf6ff 0%, #fff 100%);
    box-shadow: 0 2px 6px rgba(20, 33, 61, .05), 0 22px 54px rgba(0, 104, 255, .2);
}

.p1-service-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--p1-grid-gap);
    padding-top: 14px; /* chỗ cho huy hiệu nhô lên khỏi mép thẻ */
}

.p1-service-card.p1-plan {
    position: relative;
    gap: 0;
    padding: 22px 22px 20px;
    border-radius: 22px;
    border: 1px solid var(--p1-border);
    background: #fff;
    margin-bottom: 10px;
}

.p1-plan.is-featured {
   /* border: 2px solid var(--p1-brand-1);*/
    background: linear-gradient(180deg, #f3f7ff 0%, #fff 100%);
    box-shadow: var(--p1-shadow);
}

.p1-plan__badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 16px;
    border-radius: 999px;
    background: var(--p1-brand-1);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 6px 16px rgba(0, 104, 255, .3);
}

.p1-plan__badge i {
    color: var(--p1-gold);
}

/*
 * Ảnh đại diện: tràn full khung thẻ (sát mép trái/phải/trên, bù đúng padding 22px của thẻ), chỉ bo hai góc trên cho khớp thẻ.
 * GIÁ nằm đè góc dưới-trái ảnh (chữ trắng trên lớp phủ tối) → thân thẻ gọn hơn; rê chuột thì ảnh phóng nhẹ.
 */
.p1-plan__thumb {
    position: relative;
    display: block;
    aspect-ratio: 16/9;
    margin: -22px -22px 16px;
    border-radius: 21px 21px 0 0; /* thẻ bo 22px, viền 1px */
    overflow: hidden;
    background: var(--p1-bg-alt);
}

.p1-plan.is-featured .p1-plan__thumb {
    border-radius: 19px 19px 0 0; /* viền nổi bật dày 2px */
}

.p1-plan__thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(8, 20, 50, 0) 40%, rgba(8, 20, 50, .72) 100%);
    pointer-events: none;
}

.p1-plan__price--on-image {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 14px;
    z-index: 1; /* trên lớp phủ ::after */
    margin: 0;
}

.p1-plan__price--on-image .p1-plan__price-value {
    font-size: clamp(24px, 2.3vw, 30px);
    color: #fff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}

.p1-plan__price--on-image .p1-plan__price-unit {
    font-size: 13px;
    color: rgba(255, 255, 255, .85);
}

/* Huy hiệu (nổi bật, giảm giá) nằm sau ảnh trong DOM nên phải nâng lên để không bị ảnh che. */
.p1-plan__badge,
.p1-plan__sale {
    z-index: 2;
}

.p1-plan__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s var(--p1-ease-out, ease);
}

.p1-plan:hover .p1-plan__thumb img {
    transform: scale(1.06);
}

/* Tên gói: chữ thường đậm, tối đa 2 dòng (bản in hoa giãn chữ cũ dài, chiếm nhiều chỗ) */
.p1-plan__name {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 700;
    color: var(--p1-text);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/*
 * Khối "Dịch vụ nổi bật" trang chủ (ServiceAvatarHtml titleOnImage=true): GIÁ + TÊN GÓI cùng đè lên ảnh, tên nằm ngay dưới giá —
 * .p1-plan__price--on-image đổi từ position:absolute (dùng ở các trang danh sách dịch vụ khác) sang tĩnh vì đã nằm trong wrapper này.
 */
.p1-plan__thumb-info {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 14px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.p1-plan__thumb-info .p1-plan__price--on-image {
    position: static;
}

.p1-plan__name--on-image {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .35);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Giá: số lớn đậm + đơn vị nhỏ nhạt cùng dòng cơ sở */
.p1-plan__price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.p1-plan__price-value {
    font-size: clamp(34px, 3.4vw, 44px);
    font-weight: 800;
    line-height: 1.1;    
    color: var(--p1-text);
}

.p1-plan__price-unit {
    font-size: 15px;
    color: var(--p1-text-muted);
}

.p1-plan .p1-service-card__desc {
    margin-bottom: 14px;
    font-size: 14px;
    line-height: 1.55;
    -webkit-line-clamp: 2;
    flex-grow: 0;
}

/* Danh sách tính năng có tick xanh lá */
.p1-plan__features {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
    flex-grow: 1;
}

.p1-plan__features li {
    position: relative;
    padding-left: 24px;
    font-size: 14px;
    line-height: 1.45;
    color: var(--p1-text);
}

.p1-plan__features li::before {
    content: "\f00c"; /* FontAwesome check */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 1px;
    font-size: 13px;
    color: #1fa971;
}

/* Nút: viền xanh, nền trắng — LUÔN như vậy lúc bình thường kể cả gói "nổi bật" (is-featured), chỉ đặc nền lúc rê
   chuột. Trước đây gói nổi bật đặc nền xanh ngay từ đầu (không phải chỉ lúc hover) khiến TOÀN BỘ nút trong mục
   "Dịch vụ nổi bật" trông đặc xanh giống hệt nhau — mất hẳn kiểu viền mỏng như mẫu tham khảo, và không còn phân
   biệt được trạng thái rê chuột. */
.p1-plan__cta {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 9px 18px;
    border-radius: 10px;
    border: 1px solid #dee2e6;
    color: var(--p1-brand-1);
    font-size: 14px;
    font-weight: 700;
    transition: background .3s var(--p1-ease), color .3s var(--p1-ease), box-shadow .3s var(--p1-ease);
}

.p1-plan:hover .p1-plan__cta {
    background: var(--p1-brand-1);
    color: #fff;
}

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

/* ----- Khuyến mãi trên thẻ dịch vụ (màu PHỤ đỏ, dùng tiết chế: chỉ huy hiệu % và dòng ưu đãi) ----- */
.p1-plan__sale {
    position: absolute;
    top: 18px;
    right: 18px;
    padding: 4px 11px;
    border-radius: 999px;
    background: var(--p1-secondary);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .02em;
    box-shadow: 0 4px 12px rgba(224, 32, 32, .28);
}

.p1-plan__deal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin: 0 0 10px;
}

.p1-plan__was {
    font-size: 13px;
    color: var(--p1-text-muted);
}

.p1-plan__was s {
    text-decoration-color: rgba(224, 32, 32, .55);
}

.p1-plan__promo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border-radius: 999px;
    background: rgba(224, 32, 32, .08);
    color: #c21a1a;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.4;
}

/* ===== Dịch vụ nổi bật: lưới "showcase" 3 cột sát nhau (tham khảo canhcam.vn) =====
   Chỉ ảnh; từ 1200px rê chuột hiện lớp phủ tối + tên + mô tả, dưới 1200px thông tin nằm dưới ảnh. */
.p1-showcase {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
    border-top: 1px solid var(--p1-border);
}

.p1-showcase__item {
    position: relative;
    overflow: hidden;
    border-right: 1px solid var(--p1-border);
    border-bottom: 1px solid var(--p1-border);
    background: #fff;
}

.p1-showcase__img {
    display: block;
    position: relative;
    aspect-ratio: 100 / 68;
    overflow: hidden;
    background: var(--p1-bg-alt);
}

.p1-showcase__img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s var(--p1-ease-out, ease);
}

.p1-showcase__item:hover .p1-showcase__img img,
.p1-showcase__item.is-auto .p1-showcase__img img {
    transform: scale(1.06);
}

.p1-showcase__info {
    padding: 16px 18px 20px;
}

.p1-showcase__name {
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--p1-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.p1-showcase__desc {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--p1-text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 1199.98px) {
    .p1-showcase { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

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

/* Desktop: lớp phủ gradient thương hiệu, nội dung hiện lần lượt (thanh vàng → tên → mô tả → nút "Xem chi tiết"), ảnh phóng nhẹ + tối lại.
   Dùng chung cho :hover (rê chuột thật) và .is-auto (tự chạy lần lượt qua từng thẻ). */
@media (min-width: 1200px) {
    .p1-showcase__img img {
        transition: transform .9s var(--p1-ease-out, ease), filter .6s ease;
    }

    .p1-showcase__item:hover .p1-showcase__img img,
    .p1-showcase__item.is-auto .p1-showcase__img img,
    .p1-showcase__item:focus-within .p1-showcase__img img {
        transform: scale(1.12);
        filter: saturate(1.15) brightness(.85);
    }

    .p1-showcase__info {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 16px 24px;
        text-align: center;
        overflow: hidden;
        background: linear-gradient(160deg, rgba(0, 70, 190, .78) 0%, rgba(6, 18, 60, .92) 100%);
        clip-path: inset(100% 0 0 0);
        pointer-events: none;
        transition: clip-path .55s cubic-bezier(.22, 1, .36, 1);
    }

    .p1-showcase__item:hover .p1-showcase__info,
    .p1-showcase__item.is-auto .p1-showcase__info,
    .p1-showcase__item:focus-within .p1-showcase__info {
        clip-path: inset(0 0 0 0);
    }

    /* Thanh nhấn vàng chạy dài ra */
    .p1-showcase__info::before {
        content: "";
        width: 0;
        height: 3px;
        border-radius: 3px;
        background: #ffc83d;
        transition: width .5s ease .15s;
    }

    .p1-showcase__item:hover .p1-showcase__info::before,
    .p1-showcase__item.is-auto .p1-showcase__info::before,
    .p1-showcase__item:focus-within .p1-showcase__info::before {
        width: 56px;
    }

    .p1-showcase__name,
    .p1-showcase__desc,
    .p1-showcase__info::after {
        opacity: 0;
        transform: translateY(22px);
        transition: opacity .5s ease, transform .55s cubic-bezier(.22, 1, .36, 1);
    }

    /* flex:none → không bị co lại khi lớp phủ chật (nguyên nhân dòng cuối bị cắt ngang); padding-bottom chừa chỗ cho dấu/chân chữ (ẹ, ậ, p, g...). */
    .p1-showcase__name,
    .p1-showcase__desc {
        flex: none;
        max-width: 100%;
    }

    .p1-showcase__name {
        margin: 0;
        padding-bottom: .18em;
        font-size: clamp(17px, 1.45vw, 21px);
        line-height: 1.35;
        color: #fff;
        text-shadow: 0 2px 12px rgba(0, 0, 0, .35);
        text-wrap: balance;
        -webkit-line-clamp: 2;
        transition-delay: .12s;
    }

    .p1-showcase__desc {
        padding-bottom: .2em;
        font-size: clamp(13px, 1.05vw, 14.5px);
        font-weight: 500;
        line-height: 1.5;
        color: rgba(255, 255, 255, .92);
        text-wrap: pretty;
        -webkit-line-clamp: 3;
        transition-delay: .2s;
    }

    /* Nút "Xem chi tiết →" (giả bằng ::after; bấm xuyên xuống link ảnh bên dưới) */
    .p1-showcase__info::after {
        content: "Xem chi tiết \2192";
        flex: none;
        margin-top: 2px;
        padding: 7px 18px;
        border-radius: 999px;
        background: #ffc83d;
        color: #1a2340;
        font-size: 13px;
        font-weight: 800;
        letter-spacing: .02em;
        transition-delay: .28s;
    }

    .p1-showcase__item:hover .p1-showcase__name,
    .p1-showcase__item:hover .p1-showcase__desc,
    .p1-showcase__item:hover .p1-showcase__info::after,
    .p1-showcase__item.is-auto .p1-showcase__name,
    .p1-showcase__item.is-auto .p1-showcase__desc,
    .p1-showcase__item.is-auto .p1-showcase__info::after,
    .p1-showcase__item:focus-within .p1-showcase__name,
    .p1-showcase__item:focus-within .p1-showcase__desc,
    .p1-showcase__item:focus-within .p1-showcase__info::after {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .p1-showcase__img img, .p1-showcase__info,
    .p1-showcase__info::before, .p1-showcase__info::after,
    .p1-showcase__name, .p1-showcase__desc { transition: none; }
}


/* Tên dịch vụ luôn hiện đè lên ảnh (chữ trắng trên dải mờ đen phía dưới). Từ 1200px lớp phủ hover đã có tên nên ẩn dòng này khi rê chuột;
   dưới 1200px tên đã nằm trên ảnh nên bỏ tên ở phần thông tin bên dưới, chỉ giữ mô tả. */
.p1-showcase__cap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    padding: 36px 18px 14px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .72) 100%);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .35);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: opacity .3s ease;
}

/* Tablet/điện thoại (<1200px): thẻ rời nhau, bo góc, đổ bóng nhẹ; tên dịch vụ nằm dưới ảnh (không đè lên ảnh) + mô tả. */
@media (max-width: 1199.98px) {
    .p1-showcase {
        gap: 18px;
        padding: 0 16px;
        border-top: 0;
    }

    .p1-showcase__item {
        display: flex;
        flex-direction: column;
        border: 1px solid var(--p1-border);
        border-radius: 16px;
        box-shadow: 0 6px 18px rgba(15, 30, 70, .07);
    }

    .p1-showcase__img { aspect-ratio: 16 / 10; }

    .p1-showcase__cap { display: none; }

    .p1-showcase__item.is-auto .p1-showcase__img img { transform: none; }

    .p1-showcase__info {
        flex: 1;
        padding: 16px 18px 20px;
    }

    .p1-showcase__name {
        font-size: 18px;
        margin: 0 0 8px;
    }

    .p1-showcase__desc {
        font-size: 14.5px;
        -webkit-line-clamp: 3;
    }
}

@media (max-width: 639.98px) {
    .p1-showcase {
        gap: 16px;
        padding: 0 14px;
    }

    .p1-showcase__item { border-radius: 14px; }

    .p1-showcase__name { font-size: 17px; }
}

@media (min-width: 1200px) {
    .p1-showcase__item:hover .p1-showcase__cap,
    .p1-showcase__item.is-auto .p1-showcase__cap,
    .p1-showcase__item:focus-within .p1-showcase__cap {
        opacity: 0;
    }
}


/* Mục "Dịch vụ nổi bật": mô tả đầu mục rộng hơn để câu mới gọn trong 2 dòng, căn giữa; chừa khoảng cách giữa lưới full-width và nút "Xem tất cả". */
#dich-vu .p1-section__desc {
    max-width: 900px;
    text-align: center;
    text-wrap: balance;
}

#dich-vu .p1-showcase + .p1-container .p1-section__foot {
    margin-top: 32px;
}