/* COMPANY/P1 — base tokens & typography (dark, minimal, kiểu Starlink) */
:root {
    /* Bảng màu nền tảng */
    --p1-blue: #007bff;
    --p1-indigo: #6610f2;
    --p1-purple: #6f42c1;
    --p1-white: #fff;

    /* ===== BỘ MÀU THƯƠNG HIỆU (đối chiếu web cũ ola.com.vn: nền trắng, logo đỏ, điểm nhấn vàng) =====
       CHÍNH  : xanh #0068ff (+ xanh đậm #0b3fb5 cho chiều sâu) — nền thương hiệu, nút, liên kết.
       PHỤ    : đỏ #e02020 lấy từ logo OLA — chỉ dùng chi tiết nhỏ (vạch tiêu đề, chấm nhãn, viền footer).
       NHẤN   : vàng #f6d24e (điểm nhấn của web cũ) — chỉ xuất hiện trên nền xanh cho chữ/icon nhấn.
       TRUNG TÍNH: trắng, xanh khói #f5f8ff, navy #14213d cho chữ. Tỉ lệ gợi ý: xanh 60% · trắng 32% · đỏ/vàng < 8%. */
    --p1-brand-1: #0068ff;
    --p1-brand-2: #0b3fb5;
    --p1-brand-grad: linear-gradient(160deg, #1a7bff 0%, #0068ff 42%, #0b3fb5 100%);
    --p1-secondary: #e02020;
    --p1-gold: #f6d24e;
    --p1-accent: var(--p1-brand-1);
    /* Chip icon / tab / nút nhấn: xanh → chàm nhạt, nhẹ và mượt (không dùng đỏ trên khối lớn). */
    --p1-accent-grad: linear-gradient(135deg, #0068ff 0%, #4a6cf7 100%);
    /* Chữ/icon nhấn trên nền trắng = xanh thương hiệu (4.9:1); trên vùng xanh được đổi sang vàng ở khối "VÙNG THƯƠNG HIỆU". */
    --p1-accent-2: #0068ff;

    /* Vùng nội dung (trắng, sáng) */
    --p1-bg: #f7f8ff;
    --p1-bg-alt: #f0f4ff;
    --p1-bg-card: #fff;
    --p1-text: #14213d;
    --p1-text-muted: #5f6f8a;
    --p1-border: rgba(20, 33, 61, .08);
    /* Bóng 2 lớp: một lớp sát mảnh + một lớp rộng mờ → thẻ "nổi nhẹ" thay vì viền cứng. */
    --p1-shadow: 0 2px 4px rgba(20, 33, 61, .04), 0 18px 44px rgba(0, 104, 255, .12);
    --p1-shadow-soft: 0 1px 2px rgba(20, 33, 61, .04), 0 10px 30px rgba(20, 33, 61, .06);
    --p1-ease: cubic-bezier(.22, .61, .36, 1);
    --p1-ease-out: cubic-bezier(.16, 1, .3, 1); /* expo-out: nhanh rồi êm dần — nhịp vào cảnh của Zalo AI */

    --p1-radius: 16px;
    --p1-radius-sm: 8px;
    --p1-container: 1200px;
    --p1-header-h: 64px;
    /* Độ xéo của các đường chuyển mục (tỉ lệ theo bề ngang màn hình, có chặn min/max). */
    --p1-slant: clamp(28px, 4.6vw, 88px);

    /* Thang khoảng cách DUY NHẤT — mọi khối dùng các biến này thay vì tự đặt số riêng, để nhịp dọc đều và gọn. */
    --p1-sec-y: clamp(28px, 3.2vw, 44px);   /* padding trên/dưới của một mục (đã thu nhỏ từ 44–68px cho trang gọn hơn) */
    --p1-head-gap: clamp(18px, 2vw, 26px);  /* từ tiêu đề mục tới nội dung */
    --p1-grid-gap: clamp(16px, 1.8vw, 22px);/* khoảng cách giữa các thẻ */
    --p1-gutter: clamp(20px, 3.4vw, 48px);
}

@font-face {
    font-family: "InterP1";
    src: url("../vendor/fonts/inter/InterVariable.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

.company-p1-body {
    background: var(--p1-bg);
    color: var(--p1-text);
    font-family: "InterP1", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    margin: 0;
    -webkit-font-smoothing: antialiased;
}

.company-p1-body a {
    color: inherit;
    text-decoration: none;
}

.company-p1-body img {
    max-width: 100%;
    height: auto;
}

.company-p1-body ::selection {
    background: var(--p1-accent);
    color: #fff;
}

/* Mọi trang đều mở đầu bằng khối xanh (hero / page-hero / svc-hero) đã chừa sẵn chỗ cho header cố định.
   Không thêm padding-top ở đây: nếu không sẽ lộ dải nền trắng phía sau header trong suốt (menu chữ trắng trên nền trắng). */
#p1Main {
    padding-top: 0;
    /*
     * KHÔNG dùng overflow-x:hidden: khi overflow-x khác visible thì overflow-y tự thành auto → #p1Main trở thành khung cuộn RIÊNG.
     * Nội dung con tràn vài px (mép xéo / margin âm của các mục) làm hiện thanh cuộn thứ hai cạnh thanh của trang, và lăn chuột bị
     * "chuỗi cuộn" qua hai khung nên giật. clip chỉ cắt phần tràn ngang, không tạo khung cuộn.
     */
    overflow-x: clip;
}

.p1-container {
    max-width: var(--p1-container);
    margin: 0 auto;
    padding: 0 20px;
}

.btn-p1 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 20px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.4;
    border: 1.5px solid transparent;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: background .3s var(--p1-ease), border-color .3s var(--p1-ease), color .3s var(--p1-ease), box-shadow .3s var(--p1-ease), transform .15s var(--p1-ease);
    white-space: nowrap;
}

/* Bấm xuống hơi lún — phản hồi chạm rõ ràng hơn cho mọi nút .btn-p1 (không phá layout vì chỉ scale). */
.btn-p1:active {
    transform: scale(.96);
    transition-duration: .1s;
}

/*
 * Vệt sáng mềm lướt qua nút khi rê chuột — dải trắng mờ, chéo nhẹ, chạy một lượt từ trái sang phải.
 * z-index -1 để nằm DƯỚI chữ/icon (không che nội dung), isolation:isolate ở .btn-p1 tạo ngữ cảnh xếp lớp riêng cho việc này.
 */
.btn-p1::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -60%;
    width: 40%;
    z-index: -1;
    background: linear-gradient(115deg, transparent, rgba(255, 255, 255, .5), transparent);
    transform: skewX(-20deg);
    pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
    .btn-p1::before {
        transition: left .65s var(--p1-ease);
    }

    .btn-p1:hover::before {
        left: 120%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .btn-p1::before {
        display: none;
    }
}

/* Mũi tên cho các nút "Xem thêm/Xem tất cả" đặt trong .p1-section__foot — luôn hiển thị, chỉ phần trượt là animation. */
.p1-section__foot .btn-p1::after {
    content: "\2192";
    display: inline-block;
}

@media (prefers-reduced-motion: no-preference) {
    .p1-section__foot .btn-p1::after {
        transition: transform .3s var(--p1-ease);
    }

    .p1-section__foot .btn-p1:hover::after {
        transform: translateX(5px);
    }
}

/*
 * Nút mặc định = dùng trên nền TRẮNG (xanh đặc / viền xanh).
 * Có tiền tố .company-p1-body để thắng `.company-p1-body a { color: inherit }`.
 */
.company-p1-body .btn-p1-primary {
    background: var(--p1-brand-1);
    color: #fff;
}

.company-p1-body .btn-p1-primary:hover {
    background: var(--p1-brand-2);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(0, 104, 255, .28);
}

/* Viền mờ bớt (trước dùng thẳng var(--p1-brand-1) đặc 100%) — dịu mắt hơn, chữ vẫn giữ màu thương hiệu đầy đủ để dễ đọc. */
.company-p1-body .btn-p1-outline {
    background: transparent;
    border-color: rgba(0, 104, 255, .35);
    color: var(--p1-brand-1);
}

.company-p1-body .btn-p1-outline:hover {
    background: var(--p1-brand-1);
    border-color: var(--p1-brand-1);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(0, 104, 255, .22);
}

/* Trên vùng thương hiệu (nền xanh): nút chính trắng chữ xanh, nút phụ kính mờ chữ trắng. */
.company-p1-body .p1-hero .btn-p1-primary,
.company-p1-body .p1-cta-banner .btn-p1-primary,
.company-p1-body .p1-page-hero .btn-p1-primary,
.company-p1-body .p1-svc-hero .btn-p1-primary {
    background: #fff;
    color: var(--p1-brand-1);
}

.company-p1-body .p1-hero .btn-p1-primary:hover,
.company-p1-body .p1-cta-banner .btn-p1-primary:hover,
.company-p1-body .p1-page-hero .btn-p1-primary:hover,
.company-p1-body .p1-svc-hero .btn-p1-primary:hover {
    background: rgba(255, 255, 255, .86);
    color: var(--p1-brand-2);
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .16);
}

.company-p1-body .p1-hero .btn-p1-outline,
.company-p1-body .p1-cta-banner .btn-p1-outline,
.company-p1-body .p1-page-hero .btn-p1-outline,
.company-p1-body .p1-svc-hero .btn-p1-outline {
    background: rgba(255, 255, 255, .16);
    border-color: transparent;
    color: #fff;
}

.company-p1-body .p1-hero .btn-p1-outline:hover,
.company-p1-body .p1-cta-banner .btn-p1-outline:hover,
.company-p1-body .p1-page-hero .btn-p1-outline:hover,
.company-p1-body .p1-svc-hero .btn-p1-outline:hover {
    background: rgba(255, 255, 255, .28);
    border-color: rgba(255, 255, 255, .5);
    color: #fff;
    transform: translateY(-1px);
}

/*
 * VÙNG THƯƠNG HIỆU (nền xanh): đổi lại biến để mọi thành phần con dùng var(--p1-text/-muted/-border/-accent-2)
 * tự ra chữ trắng / viền trắng mờ / xanh nhạt, không phải sửa từng rule.
 */
.p1-header,
.p1-overlay,
.p1-hero,
.p1-page-hero,
.p1-svc-hero,
.p1-cta-banner,
.p1-footer {
    --p1-text: #fff;
    --p1-text-muted: rgba(255, 255, 255, .82);
    --p1-border: rgba(255, 255, 255, .2);
    --p1-accent-2: var(--p1-gold);
    color: #fff;
}

.company-p1-body .btn-p1-accent {
    background: var(--p1-accent-grad);
    color: #fff;
}

.btn-p1-accent:hover {
    filter: brightness(1.08);
}

/*
 * Nền vùng nội dung: vẫn dùng 2 ảnh hoạ tiết background.png / bg-image-dev.png (không bỏ), nhưng lót thêm một lớp màu
 * TRONG SUỐT MỘT PHẦN (cùng tông với màu nền, phủ lên trên ảnh trong chính khai báo background — nhiều lớp cách nhau
 * bằng dấu phẩy, lớp đầu vẽ trên cùng) để dìm ảnh nhẹ xuống ~35–40% độ rõ. Ảnh vẫn còn đó tạo chiều sâu, nhưng không đủ
 * đậm để "đập" vào mắt hay cộng dồn gây rối khi nhiều mục xếp liền nhau.
 *   background.png    — sóng chấm mờ ở chân mục (mục thường, .p1-section)
 *   bg-image-dev.png  — sóng đường mảnh xanh nhạt (mục xen kẽ, .p1-section--alt) — nét dày hơn nên dìm sâu hơn một chút.
 */
.p1-section,
.p1-service-list,
.p1-svc-body {
    background-color: var(--p1-bg);
    background-image: linear-gradient(rgba(247, 248, 255, .6), rgba(247, 248, 255, .6)), url("../images/background.png");
    background-position: center bottom, center bottom;
    background-size: contain, contain;
    background-repeat: no-repeat, repeat;
}

.p1-section {
    padding: var(--p1-sec-y) 0;
}

.p1-section--alt {
    background-color: var(--p1-bg-alt);
    background-image: linear-gradient(rgba(240, 244, 255, .68), rgba(240, 244, 255, .68)), url("../images/bg-image-dev.png");
    background-position: center, center;
    background-size: cover, cover;
    background-repeat: no-repeat, no-repeat;
}

/* Đầu mục gọn: tiêu đề + một dòng mô tả ngắn, không dòng nhãn phụ. */
.p1-section__head {
    max-width: 960px; /* đủ rộng để tiêu đề cỡ lớn (có cụm chữ đổi giữa dòng) nằm gọn một dòng trên màn hình lớn */
    margin: 0 auto var(--p1-head-gap);
    text-align: center;
}

/* Tiêu đề mục — áp dụng cho MỌI h2.p1-section__title trong toàn site (một nơi định nghĩa duy nhất): co giãn 26 → tối đa 45px theo bề rộng màn hình. */
.p1-section__title {
    font-size: clamp(26px, 3.6vw, 45px);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.02em;
    margin: 0 0 10px;
}

/* Cụm chữ nhấn màu trong tiêu đề mục (vd. "Xây Dựng <span>Website</span>") — dùng chung cho mọi h2.p1-section__title cần tô điểm một cụm từ. */
.p1-title-accent {
    background: var(--p1-accent-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.p1-section__desc {
    max-width: 700px;
    color: var(--p1-text-muted);
    font-size: 16px;
    line-height: 1.6;
    margin: 0 auto;
}

.p1-section__foot {
    text-align: center;
    margin-top: var(--p1-head-gap);
}

/* (mobile: --p1-sec-y đã tự co qua clamp) */

/* ===== Điểm nhấn màu PHỤ (đỏ logo) — nhỏ, tiết chế ===== */
/* Vạch nhỏ dưới tiêu đề mục: xanh → đỏ, gợi lại logo mà không phô trương. */
.p1-section__title::after {
    content: "";
    display: block;
    width: 48px;
    height: 3px;
    margin: 12px auto 0;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--p1-brand-1), var(--p1-secondary));
}

.company-p1-body ::selection {
    background: rgba(0, 104, 255, .22);
    color: inherit;
}