/* COMPANY/P2 — 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-p2-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;
    background-image: var(--p1-gold-shine);
    background-size: 300% 100%;
    background-position: 120% center;
    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-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

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

/*
 * Con trỏ nháy khi dòng nhấn (vàng kim) đang được gõ ra từng ký tự (company-p2-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-p2-theme.css.
 */
.company-p2-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-p2-body .p1-hero .p1-hero__actions .btn-p1-primary::after {
    content: "\2192"; /* → */
    display: inline-block;
    transition: transform .45s var(--p1-ease-out);
}

.company-p2-body .p1-hero .p1-hero__actions .btn-p1-primary:hover,
.company-p2-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-p2-body .p1-hero .p1-hero__actions .btn-p1-primary:hover::after,
.company-p2-body .p1-hero .p1-hero__actions .btn-p1-primary:focus-visible::after {
    transform: translateX(4px);
}

.company-p2-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;
    flex: 1 1 auto; /* thẻ không có giá thấp hơn thẻ khác trong cùng hàng: thân vàng giãn kín, không để nền trắng bên dưới */
}

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

.p1-theme-card__price {
    
    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-p2-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-p2-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);
    position: relative;
    padding-top: var(--p1-sec-y);
    padding-bottom: var(--p1-sec-y);
    background: #e6ebf2;
}

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

/*
 * ===== Dải hero màu + aurora trôi + chữ gõ máy + gợn sóng — SAO CHÉP đúng kỹ thuật/markup của header trang /themes
 * (Themes.Master .demo-hero*, CSS demo-showroom-shell.css, JS demo-hero-type.js), đổi tên lớp p1-topthemes__* và nội
 * dung cho khớp ngữ cảnh trang chủ (COMPANY/P2 không có sẵn màu tím nên dùng đúng cặp #7c3aed/#5b21b6 như bên đó).
 * ===== */
/*
 * Độ xéo cạnh trên KHỚP hướng chung toàn trang (trái cao → phải thấp, xem BỐ CỤC DẢI XÉO trong
 * company-p2-service.css: .p1-footer dùng đúng polygon này) — trước dùng "0 35px,100% 0" là NGƯỢC hướng
 * (phải cao → trái thấp) và một số cố định 35px thay vì biến --p1-slant dùng chung nên nhìn lệch pha với
 * mọi chỗ xéo khác. padding-top cộng thêm --p1-slant để chữ không bị mép xéo cắt vào ở cạnh phải.
 */
.p1-topthemes__band {
    /* clip-path: polygon(0 0, 100% var(--p1-slant), 100% 100%, 0 100%);*/
    position: relative;
    z-index: 1;
    overflow: hidden;
    background: #3b9b9f;
    color: #fff;
    padding: 18px 0 0;
    text-align: center;
}

.p1-topthemes__glow {
    position: absolute;
    inset: 0;
    bottom: -20px;
    pointer-events: none;
    overflow: hidden;
    display: none; /* Ẩn toàn bộ lớp glow/spotlight/aurora để nền đơn sắc */
}

.p1-topthemes__spotlight {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(760px, 92%);
    height: 78%;
    background: radial-gradient(ellipse 75% 65% at 50% 38%, rgba(255, 255, 255, .16) 0%, transparent 70%);
}

.p1-topthemes__aurora {
    position: absolute;
    inset: 0;
}

.p1-topthemes__aurora-band {
    position: absolute;
    border-radius: 50%;
    filter: blur(72px);
    animation: p1ThemesAuroraDrift 24s ease-in-out infinite;
}

.p1-topthemes__aurora-band--1 {
    width: 52%;
    height: 48%;
    min-width: 260px;
    min-height: 180px;
    background: radial-gradient(circle, rgba(96, 165, 250, .75) 0%, transparent 68%);
    top: -18%;
    left: -12%;
    animation-duration: 26s;
}

.p1-topthemes__aurora-band--2 {
    width: 46%;
    height: 42%;
    min-width: 220px;
    min-height: 160px;
    background: radial-gradient(circle, rgba(192, 132, 252, .7) 0%, transparent 68%);
    top: 8%;
    right: -14%;
    animation-delay: -9s;
    animation-duration: 30s;
}

.p1-topthemes__aurora-band--3 {
    width: 44%;
    height: 38%;
    min-width: 200px;
    min-height: 140px;
    background: radial-gradient(circle, rgba(45, 212, 191, .35) 0%, transparent 68%);
    bottom: 0;
    left: 22%;
    animation-delay: -15s;
    animation-duration: 22s;
}

@keyframes p1ThemesAuroraDrift {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: .85; }
    33% { transform: translate(28px, -18px) scale(1.06); opacity: 1; }
    66% { transform: translate(-18px, 12px) scale(.94); opacity: .75; }
}

.p1-topthemes__glow::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 45%;
    background: linear-gradient(to bottom, transparent 0%, rgba(49, 19, 110, .18) 100%);
}

/* Chỉ đặt đệm dọc — đệm ngang để nguyên cho .p1-topthemes .p1-container (var(--p1-tt-pad)) lo, cùng mép với thanh công cụ + băng thẻ bên dưới. */
.p1-topthemes__inner {
    position: relative;
    z-index: 1;
    padding: 0 0 18px;
}

.p1-topthemes__title {
    margin: 8px 0 12px;
    font-size: clamp(24px, 3.2vw, 34px);
    line-height: 1.25;
    font-weight: 800;
    color: #fff;
}

/* Gõ máy: đo trước bề rộng chữ đầy đủ (measure, ẩn) để khung không giật khi gõ / hiện cụm chữ nhấn. */
.p1-topthemes__title-type-wrap {
    position: relative;
    display: inline-block;
    color: #fff;
    vertical-align: baseline;
}

.p1-topthemes__title-type-measure {
    visibility: hidden;
    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;
    color: #fff;
}

.p1-topthemes__title-type {
    color: #fff;
}

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

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

.p1-topthemes__title-sep {
    color: #fff;
}

.p1-topthemes__title-caret {
    display: inline-block;
    flex: none;
    width: .09em;
    height: .85em;
    margin-left: 2px;
    background: rgba(255, 255, 255, .92);
    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; }
}

/* Cụm chữ nhấn ánh kim cam/vàng chạy sáng — đúng kiểu vệt sáng DOMAIN của Admin/Dashboard. */
.p1-topthemes__title-shine {
    display: inline;
    font-weight: inherit;
    background-image: linear-gradient(110deg, #ffb347 0%, #ff9500 38%, #fff3c4 46%, #ffcc00 50%, #fff8dc 54%, #ff9500 62%, #ffb347 100%);
    background-size: 300% 100%;
    background-position: 120% center;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}

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

@keyframes p1ThemesTitleShine {
    0%, 58% { background-position: 120% center; }
    78%, 100% { background-position: -20% center; }
}

.p1-topthemes__trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-top: 14px;
    opacity: .95;
    font-size: 12px;
    font-weight: 600;
}

.p1-topthemes__trust span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.p1-topthemes__trust-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4ade80;
    flex: none;
}

/*
 * Gợn sóng cuối dải màu — CÙNG kỹ thuật với trang /themes: SVG nền vẽ đường viền sóng (fill = màu nền mục kế tiếp,
 * #f2f4f9) cắt cạnh đáy dải màu thành hình sóng, chồng 2 lớp SVG sóng trắng mờ trôi ngang hai chiều ngược nhau.
 * QUAN TRỌNG: nằm ở LUỒNG THƯỜNG (không absolute) như bản gốc — trước đây đặt absolute + để track thẻ đè lên bằng
 * margin âm nên gợn sóng bị thẻ che gần hết; giờ .p1-topthemes__wrap không còn gối lên nữa (xem bên dưới) nên sóng
 * luôn hiện trọn vẹn.
 */
.p1-topthemes__wave {
    position: relative;
    z-index: 2;
    line-height: 0;
    width: 100%;
    margin-bottom: -8px;
}

.p1-topthemes__wave-base {
    display: block;
    width: 100%;
    height: clamp(48px, 7vw, 76px);
    vertical-align: bottom;
}

    .p1-topthemes__wave-base path {
        fill: var(--p1-bg);
        shape-rendering: geometricPrecision;
    }

.p1-topthemes__wave-anim {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: clamp(48px, 7vw, 76px);
    overflow: hidden;
    pointer-events: none;
}

.p1-topthemes__wave-anim svg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 200%;
    height: 100%;
    display: block;
    animation: p1ThemesWaveDrift 16s linear infinite;
}

.p1-topthemes__wave-anim--2 svg {
    animation: p1ThemesWaveDrift 24s linear infinite reverse;
}

@keyframes p1ThemesWaveDrift {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/*
 * ===== Hotline — chữ trần, KHÔNG khung/nền/viền (đúng kiểu ban đầu trước khi thêm icon điện thoại). Không còn ghim góc
 * riêng nữa: giờ nằm chung MỘT hàng với dòng "trust" (.p1-topthemes__trust là flex + justify-content:center + gap sẵn
 * nên chỉ cần làm phần tử flex bình thường ở đây, tự xuống hàng cùng 2 mục kia khi màn hình hẹp).
 * "Xem tất cả" không còn ở đây — đã chuyển xuống dưới băng thẻ (dùng chung btn-p1 btn-p1-outline, xem .p1-section__foot).
 * ===== */
.company-p2-body .p1-topthemes__hotline {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    text-decoration: none;
    transition: opacity .22s ease;
}

.company-p2-body .p1-topthemes__hotline:hover {
    opacity: .85;
}

.p1-topthemes__hotline-label {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, .82);
    white-space: nowrap;
}

.p1-topthemes__hotline-number {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .02em;
    white-space: nowrap;
    background-image: linear-gradient(105deg, #fff 0%, #bcd4ff 18%, #fff 36%, #ffd782 50%, #fff 64%, #bcd4ff 82%, #fff 100%);
    background-size: 240% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: p1ThemesHotlineNumberShine 2.2s ease-in-out infinite;
}

.company-p2-body .p1-topthemes__hotline:hover .p1-topthemes__hotline-number {
    animation-duration: 1.4s;
}

@keyframes p1ThemesHotlineNumberShine {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .p1-topthemes__wave-anim svg,
    .p1-topthemes__aurora-band,
    .p1-topthemes__title-shine.is-ready,
    .p1-topthemes__title-caret,
    .p1-topthemes__hotline-number {
        animation: none !important;
    }
}

/* Không còn gối âm lên dải màu (trước -84px che mất gợn sóng) — thanh công cụ + băng thẻ nằm NGAY SAU sóng, đúng như /themes. */
.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: 30px 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; }
}

/* Slider "Dự án nổi bật": bó 1200px; hàng tiêu đề trái + Xem tất cả phải. */
.p1-topthemes .p1-topthemes__slider-box {
    max-width: var(--p1-container);
    margin-left: auto;
    margin-right: auto;
    padding: 0 20px 4px;
}
.p1-topthemes .pd-listhead { align-items: center; }
.p1-topthemes .pd-slider { margin: 0; }
/* ===== 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-p2-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 đôi để 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: 20px 22px 24px;
}

/* 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-p2-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-p2-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: 17px;
    font-weight: 700;
    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-p2-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-p2-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;
}

#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: 6/4;
    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ủ / danh mục dịch vụ (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 khi không có titleOnImage) 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;
}
/* ===== Bộ tìm kiếm trên hero (kính mờ, đè lên banner) =====
   Cỡ chữ đồng bộ với menu: 14px / 600. */
.p2-search {
    position: relative;
    width: min(850px, 100%);
    margin: 32px auto 0;
    padding: 16px 18px 18px;
    border-radius: 20px;
    /*background: linear-gradient(160deg, rgba(255, 255, 255, .20), rgba(255, 255, 255, .08));*/
    border: 0px solid rgba(255, 255, 255, .30);
    box-shadow: 0 24px 60px rgba(0, 12, 40, .35), inset 0 1px 0 rgba(255, 255, 255, .35);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
   /* backdrop-filter: blur(14px) saturate(140%);*/
    color: #fff;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
}

.p2-search__tabs {
    display: flex;
    gap: 4px;
    margin: 0 0 12px;
    padding: 4px;
    width: max-content;
    max-width: 100%;
    border-radius: 30px;
    background: rgba(0, 12, 40, .28);
}

.p2-search__tabs button {
    padding: 7px 18px;
    border: 0;
    border-radius: 30px;
    background: transparent;
    color: rgba(255, 255, 255, .85);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}

.p2-search__tabs button:hover { color: #fff; background: rgba(255, 255, 255, .12); }

    .p2-search__tabs button.is-active {
        background: rgba(255, 255, 255, .16);
        color: #fff;
        box-shadow: 0 4px 14px rgba(0, 12, 40, .25);
    }

.p2-search__row {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) auto;
    gap: 10px;
    align-items: stretch;
}
.p2-search__row > input[type="hidden"] { display: none !important; }
.p2-search .p2-lf-area {
    height: 46px;
    padding: 0 14px;
    border: 0;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 12, 40, .12);
    font-size: 14px;
    font-weight: 600;
}
.p2-search .p2-lf-area:hover,
.p2-search .p2-lf-area.is-open {
    border-color: transparent;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .45), 0 2px 10px rgba(0, 12, 40, .12);
}

.p2-search__field {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    height: 46px;
    padding: 0 14px;
    border-radius: 12px;
    background: #fff;
    color: #0b1f44;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 2px 10px rgba(0, 12, 40, .12);
    transition: box-shadow .2s ease;
}

.p2-search__field:focus-within,
.p2-search__field.is-open { box-shadow: 0 0 0 3px rgba(255, 255, 255, .45), 0 2px 10px rgba(0, 12, 40, .12); }

.p2-search__field > i { flex: none; color: var(--p1-brand-1, #0b3d91); opacity: .8; font-size: 14px; }

.p2-search__field input[type="text"],
.p2-search__field select {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    height: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    text-overflow: ellipsis;
}

.p2-search__field input::placeholder { color: #64748b; font-weight: 500; }

/* Chip loại hình đã chọn nằm trong ô từ khóa */
.p2-search__chip {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 46%;
    padding: 4px 6px 4px 10px;
    border-radius: 999px;
    background: rgba(0, 104, 255, .10);
    color: var(--p1-brand-1, #0b3d91);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}
.p2-search__chip[hidden] { display: none; }
.p2-search__chip > span { overflow: hidden; text-overflow: ellipsis; }
.p2-search__chip button {
    width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%;
    background: rgba(11, 61, 145, .15); color: inherit; font-size: 13px; line-height: 18px; cursor: pointer;
}
.p2-search__chip button:hover { background: rgba(11, 61, 145, .3); }

/* Danh sách loại hình sổ ra dưới ô từ khóa, nằm giữa ô */
.p2-type-dd {
    position: absolute;   /* gắn vào <body>, toạ độ do company-p2-search.js tính (nằm giữa ô từ khóa) */
    z-index: 10050;
    max-height: 330px;
    overflow-y: auto;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .22);
    padding: 0 0 6px;
    scrollbar-width: none;          /* ẩn thanh cuộn, vẫn lăn chuột / vuốt được */
    -ms-overflow-style: none;
}
.p2-type-dd[hidden] { display: none; }
.p2-type-dd::-webkit-scrollbar { display: none; width: 0; height: 0; }
.p2-type-dd::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
.p2-type-dd::-webkit-scrollbar-track { background: #f1f5f9; }
.p2-type-dd::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
.p2-type-dd__head { padding: 12px 18px 6px; color: #94a3b8; font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.p2-type-dd__item {
    display: block;
    width: 100%;
    padding: 10px 18px;
    border: 0;
    border-bottom: 1px solid #f8fafc;
    background: #fff;
    color: #334155;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.p2-type-dd__item:hover,
.p2-type-dd__item.is-active { background: #f1f5f9; color: #1e293b; }
.p2-type-dd__item.is-selected { background: #eff6ff; color: #1d4ed8; font-weight: 600; }
.p2-type-dd__empty { padding: 12px 18px; color: #94a3b8; font-size: 13px; font-weight: 500; }

.p2-search__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 46px;
    padding: 0 20px;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, #f6d24e, #f0a81c);
    color: #1b2a4a;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(240, 168, 28, .38);
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.p2-search__btn:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 12px 28px rgba(240, 168, 28, .5); }
.p2-search__btn:active { transform: translateY(0); }

@media (max-width: 860px) {
    .p2-search { margin-top: 22px; padding: 12px; border-radius: 16px; }
    .p2-search__row { grid-template-columns: 1fr; }
    .p2-search__tabs { width: 100%; }
    .p2-search__tabs button { flex: 1; padding: 8px 6px; }
}

/* ----- Select2 (ô Tỉnh / thành) ----- */
.p2-search__field--sel .select2-container { flex: 1 1 auto; min-width: 0; height: 100%; }
.p2-search__field--sel .select2-container--default .select2-selection--single {
    display: flex;
    align-items: center;
    height: 100%;
    border: 0;
    border-radius: 0;
    background: transparent;
    outline: 0;
}
.p2-search__field--sel .select2-container--default .select2-selection--single .select2-selection__rendered {
    flex: 1 1 auto;
    padding: 0 22px 0 0;
    color: #0b1f44;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.p2-search__field--sel .select2-container--default .select2-selection--single .select2-selection__placeholder { color: #64748b; }
.p2-search__field--sel .select2-container--default .select2-selection--single .select2-selection__arrow { top: 0; right: -4px; height: 100%; width: 22px; }
.p2-search__field--sel .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--p1-brand-1, #0b3d91) transparent transparent;
    border-width: 5px 4px 0;
    margin-left: -4px;
    margin-top: -2px;
}
.p2-search__field--sel .select2-container--default.select2-container--open .select2-selection__arrow b {
    border-color: transparent transparent var(--p1-brand-1, #0b3d91);
    border-width: 0 4px 5px;
}
.p2-search.has-select2 .p2-search__field--sel select { visibility: hidden; }

/* Danh sách thả xuống (render ở cuối body) — kiểu ô "Bạn muốn đi đâu?" của TRAVEL/P2:
   bo đều 4 góc 12px, nằm GIỮA ô chọn, rộng hơn ô để chữ không rớt dòng, ô gõ tìm bo tròn, thanh cuộn mảnh. */
.select2-container--open { z-index: 10050; }
.select2-container--default .p2-select2-dd--sm.select2-dropdown { min-width: 0; }
.select2-container--default .p2-select2-dd--sm .select2-search,
.select2-container--default .p2-select2-dd--sm .select2-search--dropdown {
    display: none !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
}
.select2-container--default .p2-select2-dd.select2-dropdown {
    width: 100%;   /* đúng bằng chiều ngang ô chọn */
    margin-top: 6px;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;   /* select2 mặc định bỏ bo 2 góc trên khi mở xuống */
    overflow: hidden;
    background: #fff;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .22);
    font-family: inherit;
}
.select2-container--default .p2-select2-dd .select2-search--dropdown { padding: 10px 10px 6px; }
.select2-container--default .p2-select2-dd .select2-search--dropdown .select2-search__field {
    width: 100%;
    height: 38px;
    padding: 0 16px;
    border: 1px solid rgba(100, 116, 139, .45);
    border-radius: 8px;
    outline: 0;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    color: #1e293b;
}
.select2-container--default .p2-select2-dd .select2-search--dropdown .select2-search__field::placeholder { color: #94a3b8; }
.select2-container--default .p2-select2-dd .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--p1-brand-1, #0b3d91);
    box-shadow: 0 0 0 3px rgba(0, 104, 255, .14);
}
.select2-container--default .p2-select2-dd .select2-results__options { max-height: 300px; padding: 0 0 6px; }
.select2-container--default .p2-select2-dd .select2-results__option {
    padding: 10px 18px;
    border-bottom: 1px solid #f8fafc;
    border-radius: 0;
    color: #334155;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background .2s ease, color .2s ease;
}
.select2-container--default .p2-select2-dd .select2-results__option:first-child { background: #f1f5f9; color: #475569; font-weight: 600; }
.select2-container--default .p2-select2-dd .select2-results__option--highlighted.select2-results__option--selectable { background: #f1f5f9; color: #1e293b; }
.select2-container--default .p2-select2-dd .select2-results__option--selected { background: #eff6ff; color: #1d4ed8; font-weight: 600; }
.select2-container--default .p2-select2-dd .select2-results__option--selected.select2-results__option--highlighted { background: #e0ecff; color: #1d4ed8; }
.select2-container--default .p2-select2-dd .select2-results__message { padding: 14px 18px; color: #94a3b8; font-size: 13px; }
.p2-select2-dd .select2-results__options::-webkit-scrollbar { display: none; width: 0; height: 0; }
.p2-select2-dd .select2-results__options::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
.p2-select2-dd .select2-results__options::-webkit-scrollbar-track { background: #f1f5f9; }
.p2-select2-dd .select2-results__options::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
.p2-select2-dd .select2-results__options { scrollbar-width: none; -ms-overflow-style: none; }

/* Hiệu ứng sổ xuống mượt: chỉ hiện sau khi JS đã căn giữa (class is-placed) rồi mờ dần + trượt nhẹ — không còn giật vị trí. */
@keyframes p2DdIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}
.select2-container--default .p2-select2-dd.select2-dropdown:not(.is-placed) { visibility: hidden; }
.select2-container--default .p2-select2-dd.select2-dropdown.is-placed { animation: p2DdIn .18s ease-out both; }
.select2-container--default .p2-select2-dd--sm.select2-dropdown,
.select2-container--default .p2-select2-dd--sm.select2-dropdown:not(.is-placed),
.select2-container--default .p2-select2-dd--sm.select2-dropdown.is-placed,
.select2-container--default .p2-select2-dd--area.select2-dropdown,
.select2-container--default .p2-select2-dd--area.select2-dropdown:not(.is-placed),
.select2-container--default .p2-select2-dd--area.select2-dropdown.is-placed {
    visibility: visible;
    animation: none;
    transform: none;
    opacity: 1;
}
/* Giá / diện tích: đúng bằng ô chọn — không ép min-width (tránh rộng hơn DDL). */
.select2-container--default .p2-select2-dd--sm.select2-dropdown {
    min-width: 0 !important;
    max-width: none;
    box-sizing: border-box;
}
/* Tỉnh/phường trong panel: tối thiểu 280px để tên không bị cắt. */
.select2-container--default .p2-select2-dd--area.select2-dropdown {
    min-width: 280px;
    max-width: calc(100vw - 16px);
}
.select2-container--default .p2-select2-dd--sm .select2-results > .select2-results__options {
    max-height: min(240px, calc(100vh - 120px));
    overflow-y: auto;
    scrollbar-width: none; /* Firefox: ẩn thanh, vẫn cuộn bánh xe */
    -ms-overflow-style: none; /* IE/Edge cũ */
}
.select2-container--default .p2-select2-dd--sm .select2-results > .select2-results__options::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}
.p2-type-dd:not([hidden]) { animation: none; }
@media (prefers-reduced-motion: reduce) {
    .select2-container--default .p2-select2-dd.select2-dropdown.is-placed,
    .p2-type-dd:not([hidden]) { animation: none; }
}

/* Hàng đầu thẻ tìm kiếm: tab bên trái, câu truyền cảm hứng lấp khoảng trống bên phải (đổi theo tab). */
.p2-search__head {
    display: flex;
    align-items: center;
    gap: 8px 22px;
    flex-wrap: wrap;
    margin: 0 0 12px;
}
.p2-search__head .p2-search__tabs { margin: 0; }
.p2-search__slogan {
    margin: 0;
    flex: 1 1 260px;
    min-width: 0;
    color: rgb(198 247 37 / 94%);
    font-size: 14px;
    font-style: italic;
    font-weight: 500;
    letter-spacing: .01em;
    text-shadow: 0 2px 12px rgba(0, 12, 40, .45);
    transition: opacity .16s ease, transform .16s ease;
}
.p2-search__slogan.is-out { opacity: 0; transform: translateY(4px); }
@media (max-width: 860px) {
    .p2-search__slogan { flex-basis: 100%; font-size: 14px; }
}

/* =====================================================================
   GỢI Ý HÔM NAY — tin rao (tab nhóm + thẻ kiểu batdongsan: ảnh ghép, giá · m² · phòng · tỉnh, chân thẻ người đăng)
   ===================================================================== */
.p2-listings { padding: 40px 0 24px; background: #fff; }

.p2-listings__title {
    margin: 0 0 18px;
    font-size: 22px;
    font-weight: 700;
    color: darkorange;
}

.p2-listings__tabs {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
    margin: 0 0 24px;
}

.p2-listings__tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 96px;
    padding: 12px 8px;
    border: 1px solid #e5eaf1;   /* viền mảnh 1px nhẹ cho mọi ô tab */
    border-radius: 14px;
    background: transparent;
    color: #475569;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}

.p2-listings__tab > i { font-size: 30px; color: #94a3b8; transition: color .2s ease; }
.p2-listings__tab:hover { background: #f1f5f9; color: #0b1f44; border-color: #d5dbe3; }
.p2-listings__tab:hover > i { color: var(--p1-brand-1, #0b3d91); }

    .p2-listings__tab.is-active {
        background: #dfeaffa8;
        border-width: 1.5px;
        border-color: rgba(0, 104, 255, .18);
        color: var(--p1-brand-1, #0b3d91);
    }
.p2-listings__tab.is-active > i { color: var(--p1-brand-1, #0b3d91); }

.p2-listings__tab--link > i { color: #2f6df6; }

.p2-listings__panel.is-in { animation: p2DdIn .25s ease-out both; }
.p2-listings__panel[hidden] { display: none; }
.p2-listings__empty { text-align: center; color: #94a3b8; padding: 24px 0; }

.p2-listings__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;   /* 1 cột tin bên trái + cột lọc bên phải — giống /tindangs */
    gap: 24px;
    align-items: start;
}
.p2-listings__main { min-width: 0; }
.p2-listings__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}
.p2-listings__grid .p2-listing__media { height: 300px; }
.p2-listings__grid .p2-listing__title { font-size: 16px; }

/*
 * Tin thường / VIP Bạc / VIP Vàng: bố cục ngang (ảnh trái — nội dung phải — chân thẻ full).
 * Tin Đặc Biệt + VIP Kim Cương (.p2-lq--hero) giữ thẻ dọc chuẩn, không đụng rule .p2-listing ở dưới.
 */
.p2-lq--gold > .p2-listing,
.p2-lq--silver > .p2-listing,
.p2-lq--std > .p2-listing,
.p2-lq--free > .p2-listing {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: stretch;
}
.p2-lq--gold > .p2-listing > .p2-listing__media,
.p2-lq--silver > .p2-listing > .p2-listing__media,
.p2-lq--std > .p2-listing > .p2-listing__media,
.p2-lq--free > .p2-listing > .p2-listing__media {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
}
.p2-lq--gold > .p2-listing > .p2-listing__body,
.p2-lq--silver > .p2-listing > .p2-listing__body,
.p2-lq--std > .p2-listing > .p2-listing__body,
.p2-lq--free > .p2-listing > .p2-listing__body { grid-column: 2; grid-row: 1; }
.p2-lq--gold > .p2-listing > .p2-listing__foot,
.p2-lq--silver > .p2-listing > .p2-listing__foot,
.p2-lq--std > .p2-listing > .p2-listing__foot { grid-column: 1 / -1; grid-row: 2; }

/* Vàng / thường / miễn phí: một ảnh lớn (ẩn ô ghép). */
.p2-lq--gold .p2-listing__media,
.p2-lq--std .p2-listing__media,
.p2-lq--free .p2-listing__media {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}
.p2-lq--gold .p2-listing__img--sub1,
.p2-lq--gold .p2-listing__img--sub2,
.p2-lq--gold .p2-listing__img--sub3,
.p2-lq--std .p2-listing__img--sub1,
.p2-lq--std .p2-listing__img--sub2,
.p2-lq--std .p2-listing__img--sub3,
.p2-lq--free .p2-listing__img--sub1,
.p2-lq--free .p2-listing__img--sub2,
.p2-lq--free .p2-listing__img--sub3 { display: none; }
.p2-lq--gold .p2-listing__img--main,
.p2-lq--std .p2-listing__img--main,
.p2-lq--free .p2-listing__img--main { grid-row: auto; }
.p2-listings__grid .p2-lq--gold .p2-listing__media,
.p2-listpage__list .p2-lq--gold .p2-listing__media,
.pd-lpanel .p2-lq--gold .p2-listing__media { height: 210px; }
.p2-listings__grid .p2-lq--std .p2-listing__media,
.p2-listpage__list .p2-lq--std .p2-listing__media,
.pd-lpanel .p2-lq--std .p2-listing__media,
.p2-listings__grid .p2-lq--free .p2-listing__media,
.p2-listpage__list .p2-lq--free .p2-listing__media,
.pd-lpanel .p2-lq--free .p2-listing__media { height: 210px; }

/* Bạc: ảnh lớn + 2 ảnh nhỏ dưới (bố cục ảnh 4). */
.p2-lq--silver .p2-listing__media {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 56px;
}
.p2-lq--silver .p2-listing__img--main { grid-column: 1 / -1; grid-row: 1; }
.p2-lq--silver .p2-listing__img--sub1 { grid-column: 1; grid-row: 2; }
.p2-lq--silver .p2-listing__img--sub2 { grid-column: 2; grid-row: 2; }
.p2-lq--silver .p2-listing__img--sub3 { display: none; }
.p2-lq--silver .p2-listing__media--n1 {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}
.p2-lq--silver .p2-listing__media--n2 { grid-template-columns: 1fr; }
.p2-lq--silver .p2-listing__media--n2 .p2-listing__img--sub1 { grid-column: 1; }
.p2-listings__grid .p2-lq--silver .p2-listing__media,
.p2-listpage__list .p2-lq--silver .p2-listing__media,
.pd-lpanel .p2-lq--silver .p2-listing__media { height: 210px; }

/* Khung ảnh giữ chiều cao cố định. Cột chữ flex: mô tả chiếm leftover, không đụng chiều cao thẻ. */
.p2-lq--gold > .p2-listing { grid-template-rows: 210px auto; }
.p2-lq--silver > .p2-listing { grid-template-rows: 210px auto; }
.p2-lq--std > .p2-listing { grid-template-rows: 210px auto; }
.p2-lq--free > .p2-listing { grid-template-rows: 210px; }
.p2-lq--gold > .p2-listing > .p2-listing__media { height: 210px; }
.p2-lq--silver > .p2-listing > .p2-listing__media { height: 210px; }
.p2-lq--std > .p2-listing > .p2-listing__media { height: 210px; }
.p2-lq--free > .p2-listing > .p2-listing__media { height: 210px; }
.p2-lq--gold > .p2-listing > .p2-listing__body,
.p2-lq--silver > .p2-listing > .p2-listing__body,
.p2-lq--std > .p2-listing > .p2-listing__body,
.p2-lq--free > .p2-listing > .p2-listing__body {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}
.p2-lq--gold .p2-listing__desc,
.p2-lq--silver .p2-listing__desc,
.p2-lq--std .p2-listing__desc,
.p2-lq--free .p2-listing__desc {
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    text-overflow: ellipsis;
    word-break: break-word;
    overflow-wrap: anywhere;
}

@media (max-width: 640px) {
    .p2-lq--gold > .p2-listing,
    .p2-lq--silver > .p2-listing,
    .p2-lq--std > .p2-listing,
    .p2-lq--free > .p2-listing {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
    }
    .p2-lq--free > .p2-listing { grid-template-rows: auto auto; }
    .p2-lq--gold > .p2-listing > .p2-listing__media,
    .p2-lq--silver > .p2-listing > .p2-listing__media,
    .p2-lq--std > .p2-listing > .p2-listing__media,
    .p2-lq--free > .p2-listing > .p2-listing__media { grid-column: 1; grid-row: 1; }
    .p2-lq--gold > .p2-listing > .p2-listing__body,
    .p2-lq--silver > .p2-listing > .p2-listing__body,
    .p2-lq--std > .p2-listing > .p2-listing__body,
    .p2-lq--free > .p2-listing > .p2-listing__body { grid-column: 1; grid-row: 2; }
    .p2-lq--gold > .p2-listing > .p2-listing__foot,
    .p2-lq--silver > .p2-listing > .p2-listing__foot,
    .p2-lq--std > .p2-listing > .p2-listing__foot { grid-column: 1; grid-row: 3; }
    .p2-listings__grid .p2-lq--gold .p2-listing__media,
    .p2-listings__grid .p2-lq--silver .p2-listing__media,
    .p2-listpage__list .p2-lq--gold .p2-listing__media,
    .p2-listpage__list .p2-lq--silver .p2-listing__media,
    .pd-lpanel .p2-lq--gold .p2-listing__media,
    .pd-lpanel .p2-lq--silver .p2-listing__media { height: 200px; }
    .p2-listings__grid .p2-lq--std .p2-listing__media,
    .p2-listpage__list .p2-lq--std .p2-listing__media,
    .pd-lpanel .p2-lq--std .p2-listing__media,
    .p2-listings__grid .p2-lq--free .p2-listing__media,
    .p2-listpage__list .p2-lq--free .p2-listing__media,
    .pd-lpanel .p2-lq--free .p2-listing__media { height: 200px; }
    .p2-lq--gold > .p2-listing,
    .p2-lq--silver > .p2-listing,
    .p2-lq--std > .p2-listing { grid-template-rows: auto auto auto; }
    .p2-lq--free > .p2-listing { grid-template-rows: auto auto; }
    .p2-lq--gold > .p2-listing > .p2-listing__media { height: 200px; }
    .p2-lq--silver > .p2-listing > .p2-listing__media { height: 200px; }
    .p2-lq--std > .p2-listing > .p2-listing__media { height: 200px; }
    .p2-lq--free > .p2-listing > .p2-listing__media { height: 200px; }
}

/* ----- Thẻ tin ----- */
.p2-listing {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 2px 14px rgba(15, 23, 42, .10);
    overflow: hidden;
    transition: box-shadow .25s ease, transform .25s ease;
}
.p2-listing:hover { box-shadow: 0 10px 28px rgba(15, 23, 42, .16); transform: translateY(-2px); }

.p2-listing__media {
    position: relative;
    display: grid;
    gap: 3px;
    height: 250px;
    background: #e2e8f0;
    overflow: hidden;
}
/* 1 ảnh: lớn đủ khung; 2 ảnh: lớn + 1; 3 ảnh: lớn + 2 xếp dọc; 4 ảnh: lớn + 1 trên + 2 dưới */
.p2-listing__media--n1 { grid-template-columns: 1fr; }
.p2-listing__media--n2 { grid-template-columns: 2fr 1fr; }
.p2-listing__media--n3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.p2-listing__media--n4 { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; }
.p2-listing__img { position: relative; display: block; overflow: hidden; min-width: 0; min-height: 0; background: #cbd5e1; }
.p2-listing__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.p2-listing:hover .p2-listing__img img { transform: scale(1.04); }
.p2-listing__img--main { grid-row: 1 / -1; }
.p2-listing__media--n4 .p2-listing__img--sub1 { grid-column: 2 / 4; grid-row: 1; }
.p2-listing__media--n4 .p2-listing__img--sub2 { grid-column: 2; grid-row: 2; }
.p2-listing__media--n4 .p2-listing__img--sub3 { grid-column: 3; grid-row: 2; }

/* Ghi đè mosaic: VIP Bạc = ảnh lớn + 2 thumb dưới; Vàng/thường = 1 ảnh. */
.p2-lq--gold > .p2-listing,
.p2-lq--silver > .p2-listing,
.p2-lq--std > .p2-listing,
.p2-lq--free > .p2-listing { display: grid; }
.p2-lq--gold .p2-listing__media--n2,
.p2-lq--gold .p2-listing__media--n3,
.p2-lq--gold .p2-listing__media--n4,
.p2-lq--std .p2-listing__media--n2,
.p2-lq--std .p2-listing__media--n3,
.p2-lq--std .p2-listing__media--n4,
.p2-lq--free .p2-listing__media--n2,
.p2-lq--free .p2-listing__media--n3,
.p2-lq--free .p2-listing__media--n4 {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}
.p2-lq--silver .p2-listing__media--n2,
.p2-lq--silver .p2-listing__media--n3,
.p2-lq--silver .p2-listing__media--n4 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: minmax(0, 1fr) 56px;
}
.p2-lq--silver .p2-listing__img--main { grid-column: 1 / -1; grid-row: 1; }
.p2-lq--silver .p2-listing__media--n4 .p2-listing__img--sub1 { grid-column: 1; grid-row: 2; }
.p2-lq--silver .p2-listing__media--n4 .p2-listing__img--sub2 { grid-column: 2; grid-row: 2; }
.p2-lq--silver .p2-listing__media--n4 .p2-listing__img--sub3 { display: none; }

.p2-listing__tier {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    padding: 4px 10px;
    border-radius: 0 0 8px 0;
    background: #d9473f;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
}
.p2-listing__owner {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    padding: 4px 10px;
    border-radius: 0 0 0 8px;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    background: #0f766e;
}

/* Có video: nút play tròn giữa ảnh lớn (neo theo .p2-listing__img--main). */
.p2-listing__play {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    width: 40px;
    height: 40px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, .45);
    border: 0;
    color: #fff;
    font-size: 18px;
    padding: 0 0 0 3px;
    backdrop-filter: blur(2px);
    transform: translate(-50%, -50%);
    transition: transform .2s ease, background .2s ease, opacity .3s ease;
}
.p2-listing:hover .p2-listing__play { transform: translate(-50%, -50%) scale(1.1); background: rgba(0, 0, 0, .6); }
/* Markup cũ: play là con trực tiếp của mosaic — căn theo đúng cột ảnh lớn. */
.p2-listing__media--n2 > .p2-listing__play,
.p2-listing__media--n3 > .p2-listing__play { left: 33.333%; }
.p2-listing__media--n4 > .p2-listing__play { left: 25%; }
.p2-lq--gold .p2-listing__media > .p2-listing__play,
.p2-lq--std .p2-listing__media > .p2-listing__play,
.p2-lq--free .p2-listing__media > .p2-listing__play,
.p2-lq--silver .p2-listing__media > .p2-listing__play { left: 50%; }
.p2-lq--silver .p2-listing__media > .p2-listing__play { top: calc((100% - 59px) / 2); }
.p2-lq--silver .p2-listing__media--n1 > .p2-listing__play { top: 50%; }

.p2-listing__count {
    position: absolute;
    right: 10px;
    bottom: 8px;
    z-index: 2;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .6);
}

.p2-listing__body { padding: 14px 16px 10px; min-width: 0; }
.p2-listing__title { margin: 0 0 8px; font-size: 15px; font-weight: 700; line-height: 1.4; text-transform: uppercase; }
.p2-listing__title a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    overflow-wrap: anywhere;
    color: #1e293b;
    text-decoration: none;
}
.p2-listing__title a:hover { color: var(--p1-brand-1, #0b3d91); }

.p2-listing__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    margin: 0 0 8px;
    min-width: 0;
    color: #475569;
    font-weight: 600;
    font-size: 14px;
}
.p2-listing__meta > span + span::before { content: "·"; margin-right: 10px; color: #94a3b8; }
.p2-listing__price { color: #c0392b; font-weight: 700; }
.p2-listing__area { color: #c0392b; font-weight: 600; }
.p2-listing__meta i { color: #64748b; }

.p2-listing__desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    overflow-wrap: anywhere;
    margin: 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.5;
}

.p2-listing__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding: 5px 15px 12px;
    border-top: 1px solid #f1f5f9;
}
.p2-listing__who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.p2-listing__avatar {
    flex: none;
    overflow: hidden;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fde8e6;
    color: #c0392b;
    font-size: 13px;
    font-weight: 700;
}
.p2-listing__who-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.p2-listing__who-text strong { font-size: 14px; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p2-listing__who-text strong a { color: inherit; } .p2-listing__who-text strong a:hover { color: var(--p1-brand-1, #0068ff); }
.p2-listing__who-text small { font-size: 13px; color: #94a3b8; }

.p2-listing__actions { display: flex; align-items: center; gap: 8px; flex: none; }
.p2-listing__phone {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border: 0;
    border-radius: 30px;
    background: #3b9b9f;
    color: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: filter .2s ease, background .2s ease;
}
.p2-listing__phone:hover { filter: brightness(1.08); }
.p2-listing__phone.is-revealed { background: #1d8a4f; }

.p2-listing__heart { width: 32px; height: 32px; border: 1px solid #d5dbe3; border-radius: 30px; background: #fff; font-size: 14px; }
.p2-listing__heart:hover { border-color: #e11d48; }

@media (max-width: 991px) {
    .p2-listings__layout { grid-template-columns: 1fr; }
    .p2-listings__grid .p2-listing__media { height: 240px; }
    .p2-listings .p2-listpage__side { position: static; }
}
@media (max-width: 760px) {
    .p2-listings__tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .p2-listing__media { height: 210px; }
    .p2-listing__foot {
        flex-wrap: nowrap;
        align-items: center;
        gap: 6px;
        padding: 5px 10px 10px;
        min-width: 0;
    }
    .p2-listing__who {
        flex: 1 1 0;
        min-width: 0;
        gap: 6px;
        overflow: hidden;
    }
    .p2-listing__who-text { min-width: 0; overflow: hidden; }
    .p2-listing__who-text strong { display: block; }
    .p2-listing__who-text small {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .p2-listing__actions {
        flex: 0 0 auto;
        width: auto;
        max-width: none;
        gap: 6px;
    }
    .p2-listing__phone {
        flex: 0 0 auto;
        max-width: none;
        padding: 0 8px;
        font-size: 0;
    }
    .p2-listing__phone i,
    .p2-listing__phone span { font-size: 12px; }
    .p2-listing__phone b { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .p2-listings__panel.is-in { animation: none; }
    .p2-listing, .p2-listing__img img { transition: none; }
}

/* =====================================================================
   TRANG DANH SÁCH TIN RAO (TinDangs / DanhMucTinDang) — bố cục batdongsan: cột trái thẻ tin xếp dọc, cột phải lọc
   ===================================================================== */
.p2-crumbs { margin: 0 0 8px; color: rgba(255, 255, 255, .75); font-size: 14px; }
.p2-crumbs a { color: rgba(255, 255, 255, .85); text-decoration: none; }
.p2-crumbs a:hover { color: #fff; text-decoration: underline; }
.p2-crumbs span { color: #fff; }

.p2-listpage { padding: 16px 0 56px; }
.p2-lf {
    position: relative;
    z-index: 8;
    display: grid;
    grid-template-columns: minmax(160px, 1.5fr) minmax(96px, 0.5fr) minmax(96px, 0.5fr) minmax(110px, 0.68fr) auto auto;
    gap: 8px;
    align-items: stretch;
    margin: 0 0 18px;
    padding: 10px;
    border: 1px solid #e5eaf1;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .08);
}
.p2-lf > script,
.p2-lf > input[type="hidden"] { display: none !important; }
.p2-lf__q {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    height: 40px;
    padding: 0 12px;
    border: 1px solid #dfe5ee;
    border-radius: 10px;
    background: #fff;
    color: #64748b;
}
.p2-lf__q:focus-within,
.p2-lf__q.is-open { border-color: var(--p1-brand-1, #0b3d91); box-shadow: 0 0 0 3px rgba(0, 104, 255, .12); }
.p2-lf__q > i { flex: none; color: var(--p1-brand-1, #0b3d91); opacity: .8; }
.p2-lf__q input[type="text"],
.p2-lf__q input[type="search"] {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: #0b1f44;
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
}
.p2-lf__q input::placeholder { color: #94a3b8; font-weight: 500; }
.p2-lf__q .p2-search__chip { max-width: 46%; }
.p2-lf__go {
    height: 40px;
    padding: 0 16px;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--p1-brand-1, #0068ff), #7c3aed);
    color: #fff;
    font: inherit;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: filter .2s ease, transform .2s ease;
}
.p2-lf__go:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* Lọc Tất cả / Chính chủ — xám = tất cả, xanh lá = chỉ chính chủ; chiều ngang cố định */
.p2-lf-nd {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: 156px;
    height: 40px;
    margin: 0;
    padding: 0 12px 0 14px;
    border: 1px solid #dfe5ee;
    border-radius: 10px;
    background: #fff;
    box-sizing: border-box;
    flex-shrink: 0;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: border-color .15s ease, background .15s ease;
}
.p2-lf-nd:hover { border-color: #94a3b8; }
.p2-lf-nd.is-on {
    border-color: rgba(34, 197, 94, .45);
    background: #f0fdf4;
}
.p2-lf-nd.is-on:hover { border-color: #16a34a; }
.p2-lf-nd__txt {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13.5px;
    font-weight: 650;
    color: #64748b;
}
.p2-lf-nd.is-on .p2-lf-nd__txt { color: #15803d; }
.p2-lf-nd .ios-switch {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 24px;
    margin: 0;
    flex-shrink: 0;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
}
.p2-lf-nd .ios-switch input[type="checkbox"] {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
    pointer-events: none;
}
.p2-lf-nd .ios-switch .ios-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: #cbd5e1; /* Tất cả */
    transition: .3s;
    border-radius: 23px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
}
.p2-lf-nd .ios-switch .ios-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: #fff;
    transition: .3s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
}
.p2-lf-nd .ios-switch input:checked + .ios-slider {
    background-color: #22c55e; /* Chính chủ */
}
.p2-lf-nd .ios-switch input:checked + .ios-slider:before {
    transform: translateX(22px);
}

.p2-lf-sel {
    min-width: 0;
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border: 1px solid #dfe5ee;
    border-radius: 10px;
    background: #fff;
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    color: #0b1f44;
}
.p2-lf-area {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    width: 100%;
    height: 40px;
    padding: 0 10px 0 12px;
    border: 1px solid #dfe5ee;
    border-radius: 10px;
    background: #fff;
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    color: #0b1f44;
    cursor: pointer;
    text-align: left;
}
.p2-lf-area__txt {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.p2-lf-area > .fa-location-dot { flex: none; font-size: 14px; color: var(--p1-brand-1, #0b3d91); opacity: .8; }
.p2-lf-area > .fa-chevron-down { flex: none; font-size: 11px; color: var(--p1-brand-1, #0b3d91); opacity: .85; transition: transform .18s ease; }
.p2-lf-area:hover,
.p2-lf-area.is-open { border-color: var(--p1-brand-1, #0068ff); }
.p2-lf-area.is-open > .fa-chevron-down { transform: rotate(180deg); }
.p2-area-dd {
    position: absolute;
    z-index: 12000;
    width: auto;
    min-width: 280px;
    max-width: calc(100vw - 16px);
    box-sizing: border-box;
    padding: 10px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .22);
}
.p2-area-dd[hidden] { display: none !important; }
.p2-area-fld {
    display: block;
    margin: 0 0 8px;
    padding: 8px 12px 6px;
    border: 1px solid #e5eaf1;
    border-radius: 12px;
    background: #fff;
}
.p2-area-fld:last-child { margin: 0; }
.p2-area-fld.is-off { background: #f1f5f9; }
.p2-area-fld__cap {
    display: block;
    margin: 0 0 2px;
    font-size: 11px;
    font-weight: 600;
    color: #94a3b8;
}
.p2-area-fld select {
    width: 100%;
    height: 28px;
    padding: 0 22px 0 0;
    border: 0;
    outline: 0;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%230b3d91' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E") no-repeat right 4px center;
    font: inherit;
    font-size: 13.5px;
    font-weight: 700;
    color: #0b1f44;
    appearance: none;
    -webkit-appearance: none;
}
.p2-area-fld.is-off select { color: #94a3b8; }
.p2-area-fld .select2-container { width: 100% !important; }
.p2-area-fld .select2-container--default .select2-selection--single {
    height: 28px;
    border: 0 !important;
    background: transparent;
}
.p2-area-fld .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: 0 22px 0 0;
    line-height: 28px;
    font-size: 13.5px;
    font-weight: 700;
    color: #0b1f44;
}
.p2-area-fld.is-off .select2-container--default .select2-selection--single .select2-selection__rendered { color: #94a3b8; }
.p2-area-fld .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 28px;
    right: 0;
}
.p2-area-fld .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--p1-brand-1, #0b3d91) transparent transparent;
}
.select2-container--open { z-index: 12000; }
.p2-lf > .select2-container { width: 100% !important; min-width: 0; }
.p2-lf > .select2-container--default .select2-selection--single {
    height: 40px;
    border: 1px solid #dfe5ee;
    border-radius: 10px;
    background: #fff;
    display: flex;
    align-items: center;
}
.p2-lf > .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 38px;
    padding: 0 26px 0 10px;
    font-size: 13px;
    font-weight: 600;
    color: #0b1f44;
}
.p2-lf > .select2-container--default .select2-selection--single .select2-selection__arrow { height: 38px; right: 4px; }
.p2-lf > .select2-container--open .select2-selection--single,
.p2-lf > .select2-container--default .select2-selection--single:hover { border-color: var(--p1-brand-1, #0068ff); }
@media (max-width: 1100px) {
    .p2-lf { grid-template-columns: minmax(0, 0.9fr) minmax(0, 0.9fr) minmax(0, 1fr); }
    .p2-lf__q, .p2-lf__go { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
    .p2-lf { grid-template-columns: 1fr; }
}

.p2-listpage__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 24px;
    align-items: start;
}
.p2-listpage__main,
.p2-listpage__list { min-width: 0; }

.p2-listpage__head {
    margin: 0 0 16px;
    padding: 10px 12px;
    border: 1px solid #e8edf4;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .05);
}
.p2-listpage__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0 0 16px;
    min-height: 40px;
}
.p2-listpage__head .p2-listpage__bar { margin: 0; }
.p2-listpage__count { margin: 0; color: #64748b; font-size: 14px; line-height: 1.4; }
.p2-listpage__count b { color: #0b1f44; font-size: 16px; font-weight: 800; }

.p2-listpage__sort { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: #64748b; font-size: 13px; font-weight: 600; }
.p2-listpage__sort .p2-lf-sel {
    min-width: 180px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid #dfe5ee;
    border-radius: 10px;
    background: #fff;
    color: #0b1f44;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
}
.p2-listpage__sort .select2-container { min-width: 180px; width: 200px !important; }
.p2-listpage__sort .select2-container--default .select2-selection--single {
    height: 36px;
    border: 1px solid #dfe5ee;
    border-radius: 10px;
    background: #f8fafc;
    display: flex;
    align-items: center;
}
.p2-listpage__sort .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 34px;
    padding: 0 26px 0 12px;
    font-size: 13px;
    font-weight: 600;
    color: #0b1f44;
}
.p2-listpage__sort .select2-container--default .select2-selection--single .select2-selection__arrow { height: 34px; right: 4px; }
.p2-listpage__sort .select2-container--open .select2-selection--single,
.p2-listpage__sort .select2-container--default .select2-selection--single:hover { border-color: var(--p1-brand-1, #0068ff); background: #fff; }

.p2-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 10px 0 0;
    padding: 10px 0 0;
    border-top: 1px solid #eef2f7;
}
.p2-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 8px 0 12px;
    border: 1px solid #dbe7ff;
    border-radius: 10px;
    background: #f4f8ff;
    color: var(--p1-brand-1, #0b3d91);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.p2-chip i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(11, 61, 145, .1);
    font-size: 10px;
    opacity: 1;
}
.p2-chip:hover { border-color: var(--p1-brand-1, #0068ff); background: #e8f1ff; }
.p2-chip--clear {
    height: 32px;
    padding: 0 8px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #64748b;
    font-weight: 600;
    text-decoration: none;
}
.p2-chip--clear:hover { color: #dc2626; background: #fef2f2; text-decoration: none; }

.p2-listpage__list { display: grid; grid-template-columns: 1fr; gap: 20px; }
.p2-lq { min-width: 0; }
.p2-listpage__list .p2-listing__media,
.pd-lpanel .p2-listing__media { height: 300px; }
.p2-listpage__list .p2-listing__title,
.pd-lpanel .p2-listing__title { font-size: 16px; }

/* Cột lọc bên phải */
.p2-listpage__side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: calc(var(--p1-header-h, 72px) + 12px); }
.p2-filter {
    padding: 16px 18px;
    border: 1px solid #e5eaf1;
    border-radius: 10px;
    background: #fff;
}
.p2-filter--gray { background: #f3f4f6; border-color: transparent; }
.p2-filter__title { margin: 0 0 12px; font-size: 15px; font-weight: 700; color: #1e293b; }
.p2-filter ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.p2-filter a {
    display: block;
    padding: 6px 0;
    color: #475569;
    font-size: 14px;
    text-decoration: none;
    transition: color .15s ease, padding-left .2s ease;
}
    .p2-filter a:hover {
        color: var(--p1-brand-1, #0b3d91);
        padding-left: 4px;
        font-weight: 800;
    }
.p2-filter a.is-active { color: var(--p1-brand-1, #0b3d91); font-weight: 700; }

@media (max-width: 991px) {
    .p2-listpage__grid { grid-template-columns: 1fr; }
    .p2-listpage__side { position: static; }
    .p2-listpage__list .p2-listing__media { height: 240px; }
}

/* Cột lọc: thu gọn / mở rộng (JS company-p2-listings.js bọc danh sách trong .p2-filter__body) */
.p2-filter__title { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; user-select: none; }
.p2-filter__title::after {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    margin-right: 2px;
    border-right: 2px solid #94a3b8;
    border-bottom: 2px solid #94a3b8;
    transform: rotate(45deg) translateY(-2px);
    transition: transform .3s ease, border-color .2s ease;
}
.p2-filter__title:hover::after { border-color: var(--p1-brand-1, #0b3d91); }
.p2-filter__title:focus-visible { outline: 2px solid rgba(0, 104, 255, .45); outline-offset: 4px; border-radius: 6px; }
.p2-filter.is-collapsed .p2-filter__title::after { transform: rotate(-45deg); }

.p2-filter__body {
    display: grid;
    grid-template-rows: 1fr;
    margin-top: 12px;
    transition: grid-template-rows .3s ease, margin-top .3s ease, opacity .3s ease;
}
.p2-filter__inner { min-height: 0; overflow: hidden; }
.p2-filter.is-collapsed .p2-filter__body { grid-template-rows: 0fr; margin-top: 0; opacity: 0; }
.p2-filter.is-collapsed .p2-filter__title { margin-bottom: 0; }
.p2-filter__title { margin-bottom: 0; }

/* Danh sách dài: mục thứ 9 trở đi ẩn cho tới khi bấm "Xem thêm" */
.p2-filter ul li.is-extra { display: none; }
.p2-filter ul.show-extra li.is-extra { display: list-item; animation: p2DdIn .25s ease-out both; }
.p2-filter__more {
    margin: 8px 0 0;
    padding: 4px 0;
    border: 0;
    background: none;
    color: var(--p1-brand-1, #0b3d91);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.p2-filter__more:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
    .p2-filter__title::after, .p2-filter__body { transition: none; }
    .p2-filter ul.show-extra li.is-extra { animation: none; }
}

/* Rê chuột vào tin có video: video phủ ảnh lớn, mờ dần hiện ra / mờ dần biến mất; nút play + nhãn ẩn trong lúc phát.
   Trong lúc tải: ảnh dịu đi nhẹ + vạch sáng chạy ngang để biết video đang nạp. */
.p2-listing__vid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
    background: #000;
    opacity: 0;
    transform: scale(1.04);
    pointer-events: none;    /* chuột vẫn bấm xuyên vào liên kết của thẻ */
    transition: opacity .45s cubic-bezier(.22, .61, .36, 1), transform .6s cubic-bezier(.22, .61, .36, 1);
}
.p2-listing__vid.is-ready { opacity: 1; transform: scale(1); }
.p2-listing__media:not(.is-playing) .p2-listing__vid { transition: opacity .35s ease, transform .35s ease; }

.p2-listing__play { transition: opacity .3s ease, transform .3s cubic-bezier(.22, .61, .36, 1), background .2s ease; }
.p2-listing__media.is-playing .p2-listing__play { opacity: 0; transform: translate(-50%, -50%) scale(.7); }
.p2-listing__count { transition: opacity .3s ease; }
.p2-listing__media.is-playing .p2-listing__count { opacity: 0; }

.p2-listing__img--main img { transition: transform .5s ease, filter .4s ease; }
.p2-listing__media.is-loading .p2-listing__img--main img { filter: brightness(.88) saturate(.95); }
.p2-listing__media.is-loading .p2-listing__img--main::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    z-index: 3;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, .95) 50%, transparent 100%);
    background-size: 40% 100%;
    background-repeat: no-repeat;
    animation: p2VidLoad 1s ease-in-out infinite;
}
@keyframes p2VidLoad {
    from { background-position: -40% 0; }
    to { background-position: 140% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .p2-listing__vid, .p2-listing__media:not(.is-playing) .p2-listing__vid { transition: none; transform: none; }
    .p2-listing__media.is-loading .p2-listing__img--main::after { animation: none; }
}

/* Khung YouTube phóng kiểu "cover": căn giữa theo kích thước JS đặt, không còn vệt đen hai bên */
.p2-listing__vid--yt {
    inset: auto;
    top: 50%;
    left: 50%;
    max-width: none;
}

/* Danh bạ môi giới */
.p2-agents { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; }
.p2-agent {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 22px 16px 18px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 2px 14px rgba(15, 23, 42, .10);
    color: #1e293b;
    text-align: center;
    text-decoration: none;
    transition: box-shadow .25s ease, transform .25s ease;
}
.p2-agent:hover { box-shadow: 0 10px 28px rgba(15, 23, 42, .16); transform: translateY(-2px); }
.p2-agent__avatar {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 50%;
    background: #fde8e6;
    color: #c0392b;
    font-size: 26px;
    font-weight: 700;
    text-transform: uppercase;
}
.p2-agent__name { font-weight: 700; font-size: 15px; }
.p2-agent__count { color: #64748b; font-size: 13px; }
.p2-agent__cta { margin-top: 6px; color: var(--p1-brand-1, #0b3d91); font-size: 13px; font-weight: 600; }
.p2-agent:hover .p2-agent__cta i { transform: translateX(3px); }
.p2-agent__cta i { transition: transform .2s ease; }

/* Gợi ý hôm nay: nới nhẹ cột trái vài px (đã trả lại bố cục cũ, không ép hai cột bằng nhau) */
.p2-listings__main { padding-bottom: 12px; }


/* Danh bạ môi giới: nhãn công ty + mô tả giới thiệu */
.p2-agent__badge { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 3px 10px; border-radius: 999px; background: #eef4ff; color: var(--p1-brand-1, #0b3d91); font-size: 12px; font-weight: 600; }
.p2-agent__badge i { flex: none; }
.p2-agent__bio {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 2px 0 4px;
    color: #64748b;
    font-size: 13px;
    line-height: 1.5;
    white-space: pre-line;
}
/* Thẻ dự án chưa có giá: hiện Quy mô (chữ nhỏ hơn, tối đa 2 dòng) để thân thẻ không trống. */
.p1-theme-card__price--scale {
    min-width: 0;
    font-size: 13px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Giá / Quy mô trong thẻ dự án: căn giữa thân thẻ (đã bỏ nút "Xem dự án"). */
.p1-theme-card__row { justify-content: center; }
.p1-theme-card__price { text-align: center; }

/* Thẻ "Dự án nổi bật": giá (đậm) + Phường/Xã, Tỉnh + Quy mô (mỗi dòng 1 hàng, quá dài thì cắt ...), căn giữa. */
.p1-theme-card__row--col { flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; min-width: 0; width: 100%; }
.p1-theme-card__row--col .p1-theme-card__price { font-weight: 800; }
.p1-theme-card__line { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; line-height: 1.45; color: rgba(11, 31, 68, .78); }
.p1-theme-card__line i { margin-right: 6px; color: #e0402e; }
.p1-theme-card__line b { font-weight: 600; color: #0b1f44; }