/* ============================================================================
   BA TRANG ĐIỀU KHOẢN — THIẾT KẾ 2026

   /terms-of-service/, /privacy-policy/,
   /synctrack-data-processing-agreement-dpa/

   Cả ba chạy trên template mặc định, nội dung soạn trong trình sửa bài nên chỉ
   có <p>, <strong>, <ul>, <a>. File này là LỚP PHỦ, không đụng vào template —
   xem [[styling-overlay-approach]]. Body class .sr-legal (functions.php).

   Bản cũ: chữ trải hết bề ngang 1380px (khoảng 190 ký tự một dòng, đọc rất
   mệt), tiêu đề trang không phải Phudu, không có dải mở đầu như mọi trang 2026.

   MỤC LỤC
     1. Dải tiêu đề
     2. Cột nội dung
     3. Chữ
     4. Mục đánh số (thẻ <strong> đứng riêng một đoạn)
     5. Danh sách, link, bảng
     6. Mobile
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. DẢI TIÊU ĐỀ

   Template không có khối hero riêng: tiêu đề là <h1 class="h1-template"> nằm
   ngay trong cột nội dung. Dựng dải bằng cách kéo chính thẻ h1 ra hết bề ngang
   rồi đắp nền vào — không phải sửa template.
   --------------------------------------------------------------------------- */
.sr-legal .fullcontent_des > .h1-template {
    margin: 0 0 clamp(40px, 5vw, 72px);
    padding: clamp(48px, 6vw, 88px) max(var(--sr-gutter), calc((100vw - var(--sr-container)) / 2));
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    max-width: none;
    background: linear-gradient(135deg, var(--sr-navy-900) 0%, var(--sr-purple-700) 100%);

    font-family: 'Phudu', var(--sr-font);
    font-size: clamp(32px, 4vw, 52px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    text-align: center;
    color: var(--sr-neutral-0);
}

/* Breadcrumb rỗng ở đầu template vẫn chiếm chỗ, đẩy dải tiêu đề xuống. */
.sr-legal .brecrum:empty {
    display: none;
}

.sr-legal .ent-single-sp {
    /* Dải tiêu đề kéo lề âm ra hai bên; clip cắt phần thừa mà không tạo vùng
       cuộn ngang mới. */
    overflow-x: clip;
}

/* ---------------------------------------------------------------------------
   2. CỘT NỘI DUNG

   Bài luật đọc theo dòng: giới hạn 760px (~90 ký tự) thay vì 1380px của bản cũ.
   --------------------------------------------------------------------------- */
.sr-legal .ent-container {
    max-width: var(--sr-container);
    padding-left: var(--sr-gutter);
    padding-right: var(--sr-gutter);
    box-sizing: border-box;
}

.sr-legal .content-nh-post {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: clamp(56px, 7vw, 104px);
}

/* ---------------------------------------------------------------------------
   3. CHỮ
   --------------------------------------------------------------------------- */
.sr-legal .content-nh-post {
    font-family: var(--sr-font);
    font-size: 17px;
    line-height: 1.75;
    color: var(--sr-neutral-700);
}

.sr-legal .content-nh-post p {
    margin: 0 0 20px;
    /* Bản cũ canh đều hai bên, chữ giãn thành từng khoảng rộng hẹp khác nhau. */
    text-align: left;
}

.sr-legal .content-nh-post h2,
.sr-legal .content-nh-post h3,
.sr-legal .content-nh-post h4 {
    margin: 48px 0 16px;
    font-family: 'Phudu', var(--sr-font);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--sr-navy-900);
}

.sr-legal .content-nh-post h2 {
    font-size: clamp(24px, 2.4vw, 32px);
}

.sr-legal .content-nh-post h3,
.sr-legal .content-nh-post h4 {
    font-size: clamp(19px, 1.8vw, 22px);
}

/* ---------------------------------------------------------------------------
   4. CHỮ ĐẬM

   Đầu mục ("1. Acceptance of Terms") trong nội dung là <p><strong>...</strong></p>
   — về mặt HTML không phải tiêu đề. KHÔNG nắn bằng CSS: bộ chọn
   `p > strong:only-child` đếm phần tử con chứ không đếm chữ, nên nó trúng luôn
   cả `<p>1.1 <strong>Personal Data</strong>: Any information…</p>` ở trang DPA
   và bẻ câu đó thành ba dòng rời. Việc đổi thẻ làm bằng bộ lọc the_content
   trong functions.php, chỗ đó đọc được toàn bộ đoạn văn.
   --------------------------------------------------------------------------- */
.sr-legal .content-nh-post strong {
    font-weight: 700;
    color: var(--sr-navy-900);
}

/* ---------------------------------------------------------------------------
   5. DANH SÁCH, LINK, BẢNG
   --------------------------------------------------------------------------- */
.sr-legal .content-nh-post ul,
.sr-legal .content-nh-post ol {
    margin: 0 0 20px;
    padding-left: 24px;
}

.sr-legal .content-nh-post li {
    margin-bottom: 8px;
    line-height: 1.75;
    color: var(--sr-neutral-700);
}

.sr-legal .content-nh-post li::marker {
    color: var(--sr-purple-500);
}

.sr-legal .content-nh-post a {
    color: var(--sr-purple-700);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

.sr-legal .content-nh-post a:hover {
    color: var(--sr-purple-500);
}

.sr-legal .content-nh-post table {
    width: 100%;
    margin: 0 0 24px;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgb(219, 221, 225);
    font-size: 15px;
}

.sr-legal .content-nh-post th {
    background: rgb(248, 244, 255);
    font-family: var(--sr-font-menu);
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sr-purple-700);
}

.sr-legal .content-nh-post th,
.sr-legal .content-nh-post td {
    padding: 12px 16px;
    border-bottom: 1px solid rgb(230, 232, 236);
    text-align: left;
    vertical-align: top;
}

.sr-legal .content-nh-post tr:last-child td {
    border-bottom: 0;
}

/* Bảng rộng hơn cột chữ thì cho cuộn ngang trong khung riêng, không nong trang. */
.sr-legal .content-nh-post table {
    display: block;
    overflow-x: auto;
}

/* ---------------------------------------------------------------------------
   6. MOBILE
   --------------------------------------------------------------------------- */
@media (max-width: 900px) {
    .sr-legal .fullcontent_des > .h1-template {
        margin-bottom: 40px;
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .sr-legal .content-nh-post {
        font-size: 16px;
        padding-bottom: 56px;
    }
}