/* =========================================================
   POLICY DOCUMENT PAGES (fti-policy-*)

   Áp cho 4 trang: Chính sách bảo vệ dữ liệu cá nhân, Chính sách bảo mật thông
   tin, Chính sách và điều khoản chung, Điều khoản và điều kiện mua bán hàng hoá.

   Nội dung các trang này được soạn bằng hệ class fti-policy-* nhưng theme chưa
   hề có CSS tương ứng, nên trước đó render bằng default của trình duyệt.

   Bố cục: từ 1200px trở lên là tài liệu 2 cột, mục lục thành sidebar dính bên
   phải kèm trạng thái active theo vị trí đọc (js/fti-policy.js) - cùng mô hình
   với .contract-viettel-layout sẵn có trong theme. Dưới 1200px mục lục quay về
   dạng card một cột.

   TYPOGRAPHY - lý do các trị letter-spacing bên dưới:
   Toàn bộ tiêu đề trong nội dung là chữ IN HOA (h1, h2, mục lục). Chữ in hoa
   cần tracking DƯƠNG: nó không có nét lên/nét xuống để tạo nhịp, và sidebearing
   của font được thiết kế cho mixed case nên khi xếp caps liền nhau sẽ bị bó.
   Tracking âm (đúng cho chữ thường cỡ lớn) làm caps trông chật và rẻ. Vì vậy
   h1/h2/mục lục đều dùng trị dương, chỉ h3 (mixed case) để 0.

   Bảng màu / khoảng cách theo block .contract-page và .contract-viettel-* ở cuối
   style.css. Lưu ý html/body có font-size 14px nên file này dùng px.
   ========================================================= */

.fti-policy-shell {
    --pol-ink: #0b1220;
    --pol-strong: #1c2637;
    --pol-text: #414d63;
    --pol-muted: #6b7789;
    --pol-faint: #8a94a4;
    --pol-line: #e4e7ec;
    --pol-hairline: #edf0f4;
    --pol-accent: #f27227;
    --pol-accent-ink: #c9531a;
    --pol-accent-tint: rgba(242, 114, 39, 0.09);
    --pol-link: #1f4fbf;
    --pol-surface: #ffffff;
    --pol-tint: #f8f9fb;

    max-width: 1060px;
    margin: 0 auto;
    color: var(--pol-text);
    /* Số thứ tự khoản xếp thành cột nên cần chữ số đều bề rộng. */
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.fti-policy {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8;
    /* Nội dung có URL dài (https://fti.fpt.vn/), tránh tràn cột. */
    overflow-wrap: break-word;
}

.fti-policy p {
    margin: 0 0 15px;
    color: var(--pol-text);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8;
    text-align: left;
    hyphens: none;
}

.fti-policy a {
    color: var(--pol-link);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(31, 79, 191, 0.35);
    text-underline-offset: 3px;
    transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.fti-policy a:hover,
.fti-policy a:focus {
    color: var(--pol-accent);
    text-decoration-color: currentColor;
}

.fti-policy :focus-visible {
    outline: 2px solid rgba(242, 114, 39, 0.5);
    outline-offset: 3px;
    border-radius: 3px;
}

.fti-policy strong {
    font-weight: 650;
    color: var(--pol-strong);
}

.fti-policy em {
    color: var(--pol-muted);
}

.fti-policy ::selection {
    background: rgba(242, 114, 39, 0.16);
}

/* CHỐT text-transform CHO PHẦN THÂN BÀI.
   text-transform là thuộc tính kế thừa. Có 3 chỗ cố ý viết hoa: nhãn eyebrow,
   tiêu đề mục lục, và <th> của bảng. Nếu markup bị lỗi lồng thẻ thì uppercase
   của mấy nhãn đó lan xuống toàn bộ nội dung.

   Đã xảy ra thật trên production: trang Chính sách bảo vệ dữ liệu cá nhân bị dán
   lồng nội dung - <div class="fti-policy-hero__eyebrow"> ngoài cùng mở mà không
   đóng, cả tài liệu nằm bên trong nó nên CẢ TRANG bị viết hoa.

   Chốt none cho các vùng chứa văn bản thật để lỗi markup kiểu đó không lan ra
   được nữa. Ba chỗ uppercase cố ý đều nằm ngoài các vùng này. */
.fti-policy-content,
.fti-policy-intro,
.fti-policy-hero h1 {
    text-transform: none;
}

/* =========================
   Bố cục 2 cột (>= 1200px)
   Cột nội dung ~650px ở 16px cho khoảng 72-76 ký tự mỗi dòng - vùng dễ đọc.
   ========================= */

@media screen and (min-width: 1200px) {
    .fti-policy {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 262px;
        grid-template-areas:
            'hero    hero'
            'intro   toc'
            'content toc';
        column-gap: 76px;
    }

    .fti-policy-hero {
        grid-area: hero;
    }

    .fti-policy-intro {
        grid-area: intro;
    }

    .fti-policy-toc {
        grid-area: toc;
    }

    .fti-policy-content {
        grid-area: content;
    }
}

/* =========================
   Hero
   ========================= */

.fti-policy-hero {
    margin: 0 0 44px;
    padding-bottom: 34px;
    border-bottom: 1px solid var(--pol-line);
}

.fti-policy-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 18px;
    color: var(--pol-accent-ink);
    font-size: 11px;
    line-height: 1.4;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.fti-policy-hero__eyebrow::before {
    content: '';
    width: 24px;
    height: 2px;
    border-radius: 999px;
    background: var(--pol-accent);
}

.fti-policy-hero h1 {
    max-width: 24ch;
    margin: 0;
    color: var(--pol-ink);
    font-size: 38px;
    line-height: 1.2;
    font-weight: 750;
    /* Chữ in hoa: tracking dương. */
    letter-spacing: 0.006em;
    text-wrap: balance;
}

.fti-policy-hero__title--single-line {
    max-width: none;
}

/* .fti-policy-hero__line là vạch phân cách trong markup gốc; hero đã có
   border-bottom nên không vẽ thêm vạch, chỉ giữ vai trò khoảng đệm. */
.fti-policy-hero__line {
    height: 0;
    margin: 0;
}

.fti-policy-hero > p {
    max-width: 62ch;
    margin: 20px 0 0;
    color: var(--pol-muted);
    font-size: 16px;
    line-height: 1.65;
    font-weight: 450;
}

/* =========================
   Đoạn mở đầu
   ========================= */

.fti-policy-intro {
    margin: 0 0 40px;
}

.fti-policy-intro p {
    color: var(--pol-text);
    font-size: 16px;
    line-height: 1.85;
}

.fti-policy-intro p:first-child {
    color: var(--pol-strong);
    font-size: 17px;
    line-height: 1.75;
    font-weight: 450;
}

.fti-policy-intro p:last-child {
    margin-bottom: 0;
}

/* =========================
   Mục lục
   wpautop gom toàn bộ <a> vào một <p> và nối bằng <br />, nên phải vô hiệu hoá
   <br /> và margin của <p> để các mục xếp thành khối.
   ========================= */

.fti-policy-toc {
    margin: 0 0 44px;
    padding: 26px 28px;
    border: 1px solid var(--pol-line);
    border-radius: 14px;
    background: var(--pol-surface);
    box-shadow: 0 14px 38px rgba(11, 18, 32, 0.05);
}

.fti-policy-toc__title {
    margin: 0 0 10px;
    color: var(--pol-faint);
    font-size: 10.5px;
    line-height: 1.4;
    font-weight: 750;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.fti-policy-toc p {
    margin: 0;
}

.fti-policy-toc br {
    display: none;
}

/* Grid 2 cột thay vì flex: trang Chính sách bảo mật thông tin viết số mục là
   text trần (<a>1<strong>...</strong></a>) chứ không bọc <span> như 3 trang kia.
   Grid gom text trần thành một ô ẩn danh nên cả hai kiểu markup đều thẳng cột. */
.fti-policy .fti-policy-toc__item {
    display: grid;
    /* 26px để số hai chữ số (10, 11, 12) không bị ngắt dòng. */
    grid-template-columns: 26px minmax(0, 1fr);
    align-items: baseline;
    column-gap: 13px;
    padding: 11px 0;
    border-top: 1px solid var(--pol-hairline);
    color: var(--pol-strong);
    text-decoration: none;
    transition: color 0.15s ease;
}

.fti-policy .fti-policy-toc__item:first-of-type {
    border-top: 0;
}

.fti-policy .fti-policy-toc__item > span {
    color: var(--pol-faint);
    font-size: 12px;
    font-weight: 650;
    transition: color 0.15s ease;
}

.fti-policy .fti-policy-toc__item > strong {
    color: inherit;
    font-size: 12.5px;
    line-height: 1.6;
    font-weight: 600;
    /* Tiêu đề mục là chữ in hoa, cần tracking dương mới đọc thoáng. */
    letter-spacing: 0.03em;
}

.fti-policy .fti-policy-toc__item:hover,
.fti-policy .fti-policy-toc__item:focus,
.fti-policy .fti-policy-toc__item.is-active {
    color: var(--pol-accent-ink);
    text-decoration: none;
}

.fti-policy .fti-policy-toc__item:hover > span,
.fti-policy .fti-policy-toc__item:focus > span,
.fti-policy .fti-policy-toc__item.is-active > span {
    color: var(--pol-accent);
}

/* Mục lục ở chế độ sidebar: bỏ dáng card, thành danh sách điều hướng dính. */
@media screen and (min-width: 1200px) {
    .fti-policy-toc {
        align-self: start;
        position: sticky;
        top: 96px;
        margin: 0;
        padding: 2px 0 2px 20px;
        border: 0;
        border-left: 1px solid var(--pol-line);
        border-radius: 0;
        background: none;
        box-shadow: none;
        max-height: calc(100vh - 150px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .fti-policy-toc__title {
        margin-bottom: 14px;
        padding-left: 1px;
    }

    .fti-policy .fti-policy-toc__item {
        position: relative;
        column-gap: 11px;
        padding: 8px 0;
        border-top: 0;
        color: var(--pol-muted);
    }

    /* Vạch chỉ vị trí đang đọc, nằm trùng lên border-left của sidebar. */
    .fti-policy .fti-policy-toc__item::before {
        content: '';
        position: absolute;
        left: -21px;
        top: 7px;
        bottom: 7px;
        width: 2px;
        border-radius: 999px;
        background: var(--pol-accent);
        opacity: 0;
        transition: opacity 0.18s ease;
    }

    .fti-policy .fti-policy-toc__item.is-active::before {
        opacity: 1;
    }

    .fti-policy .fti-policy-toc__item.is-active {
        color: var(--pol-ink);
    }

    .fti-policy .fti-policy-toc__item.is-active > strong {
        font-weight: 700;
    }

    .fti-policy .fti-policy-toc__item > strong {
        font-size: 12px;
        line-height: 1.55;
        font-weight: 550;
    }

    .fti-policy-toc {
        scrollbar-width: thin;
        scrollbar-color: #d9dde4 transparent;
    }

    .fti-policy-toc::-webkit-scrollbar {
        width: 5px;
    }

    .fti-policy-toc::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: #d9dde4;
    }
}

/* =========================
   Thân tài liệu
   ========================= */

.fti-policy-section {
    /* Header .navbar-dark cao 70px và position:fixed nên chừa chỗ khi nhảy
       tới mục từ mục lục. */
    scroll-margin-top: 100px;
}

/* Vạch ngăn cách giữa các điều.
   Phải có CẢ HAI selector: trang Bảo vệ dữ liệu cá nhân có các <section> LỒNG
   vào nhau (10/11 điều nằm trong điều trước, đóng thẻ dồn hết ở cuối), nên
   selector anh em kề "+" không khớp một lần nào trên trang đó. Ba trang còn lại
   thì các section là anh em phẳng. */
.fti-policy-section + .fti-policy-section,
.fti-policy-section .fti-policy-section {
    margin-top: 52px;
    padding-top: 52px;
    border-top: 1px solid var(--pol-hairline);
}

.fti-policy-section h2 {
    margin: 0 0 24px;
    color: var(--pol-ink);
    font-size: 19px;
    line-height: 1.45;
    font-weight: 750;
    /* Chữ in hoa: tracking dương, nếu không caps sẽ bị bó. */
    letter-spacing: 0.045em;
}

/* "ĐIỀU 1" trong <span> thành chip nền cam nhạt phía trên tiêu đề. Chỉ 30/42
   thẻ h2 có <span> sẵn; số còn lại được js/fti-policy.js tách ra. */
.fti-policy-section h2 > span {
    /* Nằm cùng hàng với tiêu đề. vertical-align đặt theo em để chip canh giữa
       theo cỡ chữ của h2, không bị lệch khi h2 đổi size ở các breakpoint. */
    display: inline-block;
    margin: 0 14px 0 0;
    padding: 6px 14px 5px;
    vertical-align: 0.1em;
    border-radius: 999px;
    background: var(--pol-accent-tint);
    color: var(--pol-accent-ink);
    font-size: 13px;
    line-height: 1.35;
    font-weight: 750;
    /* Cỡ chữ lớn hơn thì giảm tracking lại, nếu không chip bị dài ra quá. */
    letter-spacing: 0.11em;
}

.fti-policy-section h3 {
    margin: 36px 0 16px;
    color: var(--pol-ink);
    font-size: 16.5px;
    line-height: 1.55;
    font-weight: 700;
    /* h3 là mixed case, không cần tracking. */
    letter-spacing: 0;
}

/* Số mục "2.1." trong <span>, cần khoảng cách với phần chữ đi sau. */
.fti-policy-section h3 > span {
    display: inline-block;
    min-width: 44px;
    color: var(--pol-accent-ink);
}

.fti-policy-section > h2:first-child,
.fti-policy-section > h3:first-child {
    margin-top: 0;
}

/* =========================
   Khoản
   <strong class="__number">2.1.1.</strong><span>nội dung</span>

   KHÔNG dùng flex ở đây. Nội dung khoản không có cấu trúc thống nhất giữa các
   trang: nhiều khoản không bọc nội dung trong <span> mà để text trần lẫn <a>,
   <strong> ngay trong <p>. Với display:flex thì MỖI đoạn text và MỖI thẻ inline
   thành một flex item riêng, nên một khoản dài bị xé thành nhiều cột hẹp.

   Thay bằng thụt lề treo: số đặt absolute trong máng lề trái, nội dung chảy
   bình thường trong hộp đã thụt 68px nên mọi dòng đều thẳng cột.
   ========================= */

/* MỘT CỘT CHỮ DUY NHẤT.
   Đây là chỗ trước đây gây so le "đoạn thụt ra đoạn thụt vào". Nội dung được
   soạn/sửa trong wp-admin nên rất nhiều đoạn là text trần trong <section>,
   wpautop bọc thành <p> KHÔNG có class - những đoạn đó nằm ở 0px trong khi các
   khoản ở 68px và gạch đầu dòng ở 100px. Đo được 3 mức thụt lề cùng tồn tại
   (trang Bảo vệ dữ liệu: 18 đoạn ở 0px, 37 ở 68px, 90 ở 100px).

   Nên style theo VỊ TRÍ trong tài liệu chứ không theo class: mọi <p> trong thân
   tài liệu đều thụt 68px, số khoản và dấu gạch đầu dòng treo ở máng lề trái.
   Cách này không phụ thuộc class nào còn hay rụng. */
.fti-policy-content p {
    position: relative;
    padding-left: 68px;
}

.fti-policy-clause {
    margin: 0 0 15px;
}

.fti-policy-clause__number {
    position: absolute;
    left: 0;
    top: 0;
    width: 60px;
    color: var(--pol-faint);
    font-size: 14px;
    /* Theo line-height của đoạn để chân chữ số thẳng với dòng đầu nội dung. */
    line-height: inherit;
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* =========================
   Gạch đầu dòng
   <span class="__marker">a.</span>nội dung
   Lùi thêm một bậc: chữ ở 100px, marker ở 68px (thẳng với số khoản).
   Chọn cả theo class và theo :has() để không phụ thuộc class còn hay rụng.
   ========================= */

.fti-policy-content .fti-policy-item,
.fti-policy-content p:has(> .fti-policy-item__marker) {
    margin: 0 0 11px;
    padding-left: 100px;
}

.fti-policy-item__marker {
    position: absolute;
    left: 68px;
    top: 0;
    width: 26px;
    color: var(--pol-accent);
    line-height: inherit;
    font-weight: 650;
}

/* =========================
   Danh sách
   ========================= */

/* Thẳng cột với phần chữ của khoản: hộp danh sách bắt đầu ở 68px, dấu đầu dòng
   nằm trong 26px kế tiếp. */
.fti-policy-content .fti-policy-list {
    margin: 0 0 20px 68px;
    padding-left: 26px;
}

.fti-policy-list {
    color: var(--pol-text);
    font-size: 16px;
    line-height: 1.8;
}

.fti-policy-list > li {
    margin-bottom: 11px;
    padding-left: 8px;
}

.fti-policy-list > li::marker {
    color: var(--pol-accent);
    font-weight: 650;
}

.fti-policy-list > li:last-child {
    margin-bottom: 0;
}

/* =========================
   Bảng
   ========================= */

.fti-policy-table-wrap {
    margin: 6px 0 24px;
    border: 1px solid var(--pol-line);
    border-radius: 14px;
    overflow: hidden;
    overflow-x: auto;
}

.fti-policy-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    line-height: 1.7;
}

.fti-policy-table th,
.fti-policy-table td {
    padding: 16px 20px;
    border-bottom: 1px solid var(--pol-hairline);
    border-right: 1px solid var(--pol-hairline);
    color: var(--pol-text);
    text-align: left;
    vertical-align: top;
}

.fti-policy-table th {
    background: var(--pol-tint);
    color: var(--pol-ink);
    font-size: 11px;
    font-weight: 750;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.fti-policy-table tr > :last-child {
    border-right: 0;
}

.fti-policy-table tr:last-child > * {
    border-bottom: 0;
}

/* =========================
   Điều chỉnh vỏ trang
   ========================= */

/* Tiêu đề trang do page.php in ra bị trùng với <h1> trong hero, ẩn đi.
   Trình duyệt không hỗ trợ :has() sẽ bỏ qua khối này và giữ nguyên tiêu đề cũ,
   không làm vỡ layout. */
body:has(.fti-policy) #section_content > .container > .page-title,
body:has(.fti-policy) #section_content > .container > .single-date {
    display: none;
}

body:has(.fti-policy) .single-wrapper {
    padding: 64px 56px 56px;
    border-radius: 16px;
}

@media (prefers-reduced-motion: no-preference) {
    html:has(.fti-policy) {
        scroll-behavior: smooth;
    }
}

/* =========================
   Responsive
   ========================= */

@media screen and (max-width: 1199px) {
    .fti-policy-shell {
        max-width: 780px;
    }
}

@media screen and (max-width: 991px) {
    .fti-policy-hero h1 {
        font-size: 31px;
    }

    .fti-policy-intro p:first-child {
        font-size: 16px;
    }

    body:has(.fti-policy) .single-wrapper {
        padding: 44px 34px 40px;
    }
}

@media screen and (max-width: 767px) {
    .fti-policy {
        font-size: 15.5px;
    }

    .fti-policy p,
    .fti-policy-intro p,
    .fti-policy-intro p:first-child,
    .fti-policy-list {
        font-size: 15.5px;
    }

    .fti-policy-hero {
        margin-bottom: 32px;
        padding-bottom: 26px;
    }

    .fti-policy-hero h1 {
        max-width: none;
        font-size: 24px;
        line-height: 1.28;
    }

    .fti-policy-hero > p {
        margin-top: 16px;
        font-size: 15px;
    }

    body:has(.fti-policy) .single-wrapper {
        padding: 30px 20px 32px;
        border-radius: 12px;
    }

    .fti-policy-toc {
        padding: 20px 18px;
        border-radius: 12px;
    }

    .fti-policy-section h2 {
        font-size: 17px;
        letter-spacing: 0.035em;
    }

    .fti-policy-section + .fti-policy-section {
        margin-top: 36px;
        padding-top: 36px;
    }

    .fti-policy-section h3 {
        margin-top: 28px;
        font-size: 16px;
    }

    .fti-policy-content p {
        padding-left: 46px;
    }

    .fti-policy-clause__number {
        width: 40px;
        font-size: 13.5px;
    }

    .fti-policy-section h3 > span {
        min-width: 0;
        margin-right: 8px;
    }

    .fti-policy-content .fti-policy-item,
    .fti-policy-content p:has(> .fti-policy-item__marker) {
        padding-left: 72px;
    }

    .fti-policy-item__marker {
        left: 46px;
        width: 22px;
    }

    .fti-policy-content .fti-policy-list {
        margin-left: 46px;
        padding-left: 22px;
    }

    .fti-policy-table th,
    .fti-policy-table td {
        padding: 13px 14px;
    }
}

/* =========================
   Bản in - tài liệu pháp lý thường được in ra
   ========================= */

@media print {
    body:has(.fti-policy) .containerHeaderHome,
    body:has(.fti-policy) .footer,
    body:has(.fti-policy) .fti-policy-toc,
    body:has(.fti-policy) #fb-root,
    body:has(.fti-policy) #fb-customer-chat {
        display: none !important;
    }

    body:has(.fti-policy) .single-wrapper {
        padding: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .fti-policy-shell {
        max-width: none;
        color: #000;
    }

    .fti-policy {
        display: block;
        font-size: 11pt;
    }

    .fti-policy-section {
        break-inside: avoid;
    }

    .fti-policy-section h2,
    .fti-policy-section h3 {
        break-after: avoid;
    }

    .fti-policy-section h2 > span {
        background: none;
        padding-left: 0;
    }

    .fti-policy a {
        color: #000;
        text-decoration: none;
    }
}