/* ========================================
   VPN VIET NAM — HỆ THỐNG GIAO DIỆN TRANG TRONG
   Áp dụng cho: intro, support-apps, FAQ, support247,
   terms, policy, back-money.

   Cùng hệ thiết kế với index.php / bang-gia.php:
   ivory ấm · mực sâu · son đỏ · vàng đồng;
   chữ Be Vietnam Pro (nội dung) + Playfair Display (tiêu đề).

   Nguyên tắc:
   - Nạp SAU css/style.css nên ghi đè được các rule cũ.
   - Mọi rule đều bị giới hạn trong .pg-body để không rò
     sang các trang khác (trang chủ, bảng giá).
   - Không đụng tới .navbar, .btn-primary, .btn-download-*.
   ======================================== */

/* ========================================
   1. TOKEN
   ======================================== */
.pg-body {
    --pg-ivory: #faf7f2;
    --pg-ivory-2: #f3ece1;
    --pg-cream: #fffdfa;
    --pg-ink: #171310;
    --pg-ink-2: #2c2621;
    --pg-body: #4a4239;
    --pg-muted: #776c60;
    --pg-gold: #b08d4f;
    --pg-gold-soft: #d9c08a;
    --pg-crimson: #a8172a;
    --pg-crimson-bright: #c9243a;
    --pg-line: #e4dccd;
    --pg-line-soft: #efe8db;
    --pg-glass: rgba(255, 253, 250, 0.66);
    --pg-glass-strong: rgba(255, 253, 250, 0.86);
    --pg-glass-border: rgba(255, 255, 255, 0.78);
    --pg-shadow: 0 24px 56px rgba(58, 42, 24, 0.09);
    --pg-shadow-lg: 0 32px 72px rgba(58, 42, 24, 0.13);
    --pg-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --pg-serif: 'Playfair Display', 'Times New Roman', Georgia, serif;
    --pg-sans: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    --pg-shell: 1180px;

    /* Đồng bộ token font toàn cục của style.css sang bộ chữ mới,
       để các component cũ chưa được ghi đè cũng hiển thị đồng nhất. */
    --font-primary: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    --font-secondary: 'Playfair Display', 'Times New Roman', Georgia, serif;

    background: var(--pg-cream);
    color: var(--pg-body);
    font-family: var(--pg-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-synthesis: none;
}

/* Nền giấy — cùng hệ quầng sáng như trang chủ */
.pg-body .bg-animation {
    background:
        radial-gradient(1100px 640px at 78% -12%, rgba(99, 102, 241, 0.16), transparent 62%),
        radial-gradient(880px 520px at 6% 2%, rgba(139, 92, 246, 0.12), transparent 60%),
        radial-gradient(760px 520px at 94% 58%, rgba(217, 192, 138, 0.24), transparent 62%),
        radial-gradient(700px 460px at 2% 74%, rgba(201, 36, 58, 0.08), transparent 60%),
        linear-gradient(180deg, #fffdfa 0%, var(--pg-ivory) 36%, #f7f1e8 68%, var(--pg-cream) 100%);
}

.pg-body .shape {
    opacity: 0.45;
    filter: blur(90px);
    mix-blend-mode: multiply;
}

.pg-body .shape-1 { background: radial-gradient(circle, #6366f1 0%, transparent 68%); animation-duration: 26s; }
.pg-body .shape-2 { background: radial-gradient(circle, #8b5cf6 0%, transparent 68%); animation-duration: 32s; animation-delay: -6s; }
.pg-body .shape-3 { background: radial-gradient(circle, #d9c08a 0%, transparent 68%); animation-duration: 38s; animation-delay: -12s; }
.pg-body .shape-4 { background: radial-gradient(circle, #c9243a 0%, transparent 68%); animation-duration: 30s; animation-delay: -18s; }

/* ========================================
   2. KHUNG CHUNG
   ======================================== */
.pg-shell {
    max-width: var(--pg-shell);
    margin: 0 auto;
    padding-left: 2rem;
    padding-right: 2rem;
}

.pg-body main {
    padding-bottom: 5rem;
}

/* Nhãn nhỏ chữ hoa — dùng chung */
.pg-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0 0 1.15rem;
    font-family: var(--pg-sans);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--pg-crimson);
}

.pg-eyebrow i {
    font-size: 0.85rem;
    opacity: 0.85;
}

/* Vạch vàng trang trí */
.pg-rule {
    display: block;
    width: 62px;
    height: 1px;
    background: linear-gradient(90deg, var(--pg-gold), transparent);
    margin: 1.5rem 0;
}

/* Tiêu đề cấp 2 dùng chung cho các khối nội dung */
.pg-body h2.pg-heading,
.pg-body .pg-section__title {
    margin: 0 0 1.1rem;
    font-family: var(--pg-serif);
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 600;
    line-height: 1.22;
    letter-spacing: -0.012em;
    color: var(--pg-ink);
}

.pg-body h2.pg-heading i,
.pg-body .pg-section__title i {
    font-size: 0.62em;
    color: var(--pg-gold);
    vertical-align: 0.12em;
    margin-right: 0.35rem;
}

.pg-lead {
    margin: 0 0 2rem;
    font-size: 1.02rem;
    font-weight: 400;
    line-height: 1.85;
    color: var(--pg-body);
    max-width: 60ch;
}

/* ========================================
   3. HERO THỐNG NHẤT
   ======================================== */
.pg-hero {
    position: relative;
    overflow: hidden;
    padding: 9rem 0 4.5rem;
    border-bottom: 1px solid var(--pg-line-soft);
}

.pg-hero::after {
    content: '';
    position: absolute;
    right: -12%;
    top: -30%;
    width: 620px;
    height: 620px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(217, 192, 138, 0.22) 0%, transparent 68%);
    pointer-events: none;
}

.pg-hero__inner {
    position: relative;
    z-index: 1;
    max-width: 760px;
}

.pg-hero__title {
    margin: 0;
    font-family: var(--pg-serif);
    font-size: clamp(2.5rem, 5.2vw, 4rem);
    font-weight: 600;
    line-height: 1.14;
    letter-spacing: -0.018em;
    color: var(--pg-ink);
    text-wrap: balance;
}

.pg-hero__title em {
    font-style: italic;
    color: var(--pg-crimson);
}

.pg-hero__lead {
    margin: 0;
    max-width: 56ch;
    font-size: 1.06rem;
    line-height: 1.85;
    color: var(--pg-body);
}

.pg-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    margin-top: 2.1rem;
}

/* Nút dùng chung cho các trang trong */
.pg-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    padding: 0.95rem 1.9rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-family: var(--pg-sans);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.35s var(--pg-ease), box-shadow 0.35s var(--pg-ease),
                background 0.3s ease, color 0.3s ease, border-color 0.3s ease,
                letter-spacing 0.3s ease;
}

.pg-btn i { font-size: 0.8em; transition: transform 0.35s var(--pg-ease); }
.pg-btn:hover i { transform: translateX(4px); }

.pg-btn--primary {
    background: linear-gradient(135deg, var(--pg-crimson-bright) 0%, var(--pg-crimson) 55%, #8f1322 100%);
    color: #fff;
    box-shadow: 0 12px 28px rgba(168, 23, 42, 0.28);
}

.pg-btn--primary:hover {
    background: linear-gradient(135deg, #d92a41 0%, var(--pg-crimson-bright) 55%, var(--pg-crimson) 100%);
    color: #fff;
    letter-spacing: 0.17em;
    transform: translateY(-2px);
    box-shadow: 0 18px 38px rgba(168, 23, 42, 0.36);
}

.pg-btn--ghost {
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-color: var(--pg-line);
    color: var(--pg-ink);
}

.pg-btn--ghost:hover {
    border-color: var(--pg-crimson);
    color: var(--pg-crimson);
    letter-spacing: 0.17em;
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(58, 42, 24, 0.11);
}

/* ========================================
   4. BỘ KHUNG THẺ DÙNG CHUNG
   ======================================== */
.pg-card {
    position: relative;
    background: var(--pg-glass);
    backdrop-filter: blur(18px) saturate(135%);
    -webkit-backdrop-filter: blur(18px) saturate(135%);
    border: 1px solid var(--pg-glass-border);
    border-radius: 18px;
    box-shadow: 0 14px 34px rgba(58, 42, 24, 0.07);
    transition: transform 0.4s var(--pg-ease), box-shadow 0.4s var(--pg-ease),
                border-color 0.4s var(--pg-ease);
}

.pg-card:hover {
    transform: translateY(-6px);
    border-color: rgba(176, 141, 79, 0.45);
    box-shadow: var(--pg-shadow);
}

/* Icon vuông bo — đường viền vàng thay vì gradient tím */
.pg-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(176, 141, 79, 0.16), rgba(217, 192, 138, 0.1));
    border: 1px solid rgba(176, 141, 79, 0.34);
    color: var(--pg-crimson);
    font-size: 1.35rem;
    transition: transform 0.4s var(--pg-ease), border-color 0.4s var(--pg-ease);
}

.pg-card:hover .pg-icon {
    transform: translateY(-2px);
    border-color: rgba(176, 141, 79, 0.6);
}

/* Số chữ — thống nhất chữ số lining, tabloid */
.pg-body .stat-number,
.pg-body .stat-box h4,
.pg-body .faq-stats h4,
.pg-body .step-number,
.pg-body .question-number {
    font-variant-numeric: lining-nums tabular-nums;
}

/* ========================================
   5. HERO CŨ — CẦN VỀ NỀN SẠCH, KHÔNG GRADIENT TÍM
   ======================================== */
.pg-body .intro-hero,
.pg-body .terms-hero,
.pg-body .support-hero,
.pg-body .faq-hero,
.pg-body .policy-hero,
.pg-body .refund-hero,
.pg-body .support-apps-hero {
    min-height: 0;
    display: block;
    padding: 9rem 0 4.5rem;
    text-align: left;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--pg-line-soft);
}

/* Hero cũ dùng div con duy nhất — canh theo khung shell */
.pg-body .intro-hero > div,
.pg-body .terms-hero > div,
.pg-body .support-hero > div,
.pg-body .faq-hero > div,
.pg-body .policy-hero > div,
.pg-body .refund-hero > div,
.pg-body .support-apps-hero > div {
    max-width: 760px;
    margin: 0 auto;
    padding-left: 2rem;
    padding-right: 2rem;
}

.pg-body .intro-hero h1,
.pg-body .terms-hero h1,
.pg-body .support-hero h1,
.pg-body .faq-hero h1,
.pg-body .policy-hero h1,
.pg-body .refund-hero h1,
.pg-body .support-apps-hero h1 {
    margin: 0 0 1.4rem;
    font-family: var(--pg-serif);
    font-size: clamp(2.4rem, 5vw, 3.7rem);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.016em;
    color: var(--pg-ink);
    text-wrap: balance;
}

.pg-body .intro-hero p,
.pg-body .terms-hero p,
.pg-body .support-hero p,
.pg-body .faq-hero p,
.pg-body .policy-hero p,
.pg-body .refund-hero p,
.pg-body .support-apps-hero p {
    margin: 0;
    max-width: 56ch;
    font-size: 1.06rem;
    line-height: 1.85;
    color: var(--pg-body);
}

/* Badge kiểu cũ -> nhãn chữ hoa mảnh */
.pg-body .hero-badge,
.pg-body .support-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 1.1rem;
    margin-bottom: 1.5rem;
    background: rgba(255, 253, 250, 0.6);
    border: 1px solid rgba(176, 141, 79, 0.42);
    border-radius: 999px;
    color: var(--pg-crimson);
    font-family: var(--pg-sans);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    backdrop-filter: blur(10px);
    animation: none;
}

.pg-body .hero-badge i,
.pg-body .support-badge i {
    font-size: 0.8rem;
    animation: none;
}

/* Chữ gradient tím -> son đỏ */
.pg-body .gradient-text {
    background: none;
    -webkit-text-fill-color: currentColor;
    color: var(--pg-crimson);
    animation: none;
}

/* ========================================
   6. KHUNG NỘI DUNG
   ======================================== */
.pg-body .intro-container,
.pg-body .terms-container,
.pg-body .support-container,
.pg-body .faq-container,
.pg-body .policy-container,
.pg-body .refund-container,
.pg-body .main-container {
    max-width: var(--pg-shell);
    margin: 0 auto;
    padding: 0 2rem;
}

/* ========================================
   7. KHỐI VĂN BẢN DÀI (TERMS / POLICY / REFUND)
   ======================================== */
.pg-body .terms-content,
.pg-body .policy-content,
.pg-body .refund-content {
    position: relative;
    margin: 3.5rem 0 0;
    padding: 3.4rem 3.6rem;
    background: var(--pg-glass-strong);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--pg-glass-border);
    border-radius: 20px;
    box-shadow: var(--pg-shadow);
    overflow: hidden;
}

.pg-body .terms-content::before,
.pg-body .policy-content::before,
.pg-body .refund-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--pg-crimson), var(--pg-gold-soft) 55%, transparent);
}

.pg-body .terms-content h2,
.pg-body .policy-content h2,
.pg-body .refund-content h2 {
    margin: 0 0 1.6rem;
    font-family: var(--pg-serif);
    font-size: clamp(1.6rem, 2.6vw, 2.1rem);
    font-weight: 600;
    line-height: 1.25;
    color: var(--pg-ink);
}

.pg-body .terms-content h2 i,
.pg-body .policy-content h2 i,
.pg-body .refund-content h2 i {
    font-size: 0.66em;
    color: var(--pg-gold);
    vertical-align: 0.1em;
    margin-right: 0.35rem;
}

.pg-body .terms-content h3,
.pg-body .policy-content h3,
.pg-body .refund-content h3 {
    position: relative;
    margin: 2.6rem 0 1rem;
    padding-left: 1.05rem;
    font-family: var(--pg-serif);
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--pg-ink);
}

.pg-body .terms-content h3::before,
.pg-body .policy-content h3::before,
.pg-body .refund-content h3::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.34em;
    width: 3px;
    height: 1.05em;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--pg-crimson), var(--pg-gold));
}

.pg-body .terms-content h4,
.pg-body .policy-content h4,
.pg-body .refund-content h4 {
    margin: 1.8rem 0 0.7rem;
    font-family: var(--pg-sans);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--pg-ink-2);
}

.pg-body .terms-content p,
.pg-body .policy-content p,
.pg-body .refund-content p {
    margin: 0 0 1.1rem;
    font-size: 1rem;
    line-height: 1.9;
    color: var(--pg-body);
}

.pg-body .terms-content strong,
.pg-body .policy-content strong,
.pg-body .refund-content strong {
    color: var(--pg-ink);
    font-weight: 600;
}

.pg-body .terms-content ul,
.pg-body .policy-content ul,
.pg-body .refund-content ul {
    margin: 0 0 1.4rem;
    padding: 0;
    list-style: none;
}

.pg-body .terms-content ul li,
.pg-body .policy-content ul li,
.pg-body .refund-content ul li {
    position: relative;
    margin: 0 0 0.7rem;
    padding-left: 1.6rem;
    font-size: 0.99rem;
    line-height: 1.8;
    color: var(--pg-body);
}

.pg-body .terms-content ul li::before,
.pg-body .policy-content ul li::before,
.pg-body .refund-content ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.72em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--pg-gold);
}

.pg-body .terms-content ul li:hover,
.pg-body .policy-content ul li:hover,
.pg-body .refund-content ul li:hover {
    color: var(--pg-ink);
}

.pg-body .terms-content a,
.pg-body .policy-content a,
.pg-body .refund-content a {
    color: var(--pg-crimson);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(168, 23, 42, 0.32);
    transition: border-color 0.25s ease, color 0.25s ease;
}

.pg-body .terms-content a:hover,
.pg-body .policy-content a:hover,
.pg-body .refund-content a:hover {
    color: var(--pg-crimson-bright);
    border-bottom-color: rgba(168, 23, 42, 0.7);
}

/* Mục lục */
.pg-body .toc {
    margin: 2.2rem 0 2.6rem;
    padding: 1.9rem 2.1rem;
    background: rgba(243, 236, 225, 0.6);
    border: 1px solid var(--pg-line);
    border-radius: 14px;
}

.pg-body .toc h4 {
    margin: 0 0 1rem;
    font-family: var(--pg-sans);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--pg-crimson);
}

.pg-body .toc h4::before { content: none; }

.pg-body .toc ul {
    margin: 0;
    padding: 0;
    list-style: none;
    columns: 2;
    column-gap: 2.2rem;
}

.pg-body .toc ul li {
    margin: 0 0 0.55rem;
    break-inside: avoid;
}

.pg-body .toc ul li::before { content: none; }

.pg-body .toc a {
    font-size: 0.94rem;
    font-weight: 500;
    color: var(--pg-ink-2);
    text-decoration: none;
    border: 0;
    transition: color 0.25s ease, padding-left 0.25s ease;
}

.pg-body .toc a:hover {
    color: var(--pg-crimson);
    padding-left: 4px;
}

/* Hộp cảnh báo / thông tin / thành công */
.pg-body .warning-box,
.pg-body .info-box,
.pg-body .success-box {
    display: flex;
    gap: 1.1rem;
    margin: 1.8rem 0;
    padding: 1.5rem 1.7rem;
    border-radius: 14px;
    border: 1px solid;
    font-size: 0.97rem;
    line-height: 1.8;
}

.pg-body .warning-box {
    background: rgba(168, 23, 42, 0.05);
    border-color: rgba(168, 23, 42, 0.24);
}

.pg-body .info-box {
    background: rgba(176, 141, 79, 0.07);
    border-color: rgba(176, 141, 79, 0.3);
}

.pg-body .success-box {
    background: rgba(47, 143, 78, 0.06);
    border-color: rgba(47, 143, 78, 0.26);
}

.pg-body .warning-box i,
.pg-body .info-box i,
.pg-body .success-box i {
    flex-shrink: 0;
    font-size: 1.15rem;
    margin-top: 0.15rem;
}

.pg-body .warning-box i { color: var(--pg-crimson); }
.pg-body .info-box i { color: var(--pg-gold); }
.pg-body .success-box i { color: #2f8f4e; }

.pg-body .warning-box p,
.pg-body .info-box p,
.pg-body .success-box p,
.pg-body .warning-box div h4,
.pg-body .success-box div h4 {
    margin: 0 0 0.5rem;
    font-size: 0.97rem;
    line-height: 1.8;
    color: var(--pg-body);
}

.pg-body .warning-box div h4,
.pg-body .success-box div h4 {
    font-family: var(--pg-sans);
    font-weight: 600;
    color: var(--pg-ink);
}

.pg-body .warning-box div p:last-child,
.pg-body .success-box div p:last-child,
.pg-body .info-box div p:last-child { margin-bottom: 0; }

/* Khối liên hệ cuối trang (terms / policy / refund / faq / support) */
.pg-body .policy-contact,
.pg-body .refund-contact,
.pg-body .faq-contact,
.pg-body .quick-support {
    position: relative;
    margin: 3.2rem 0 0;
    padding: 3rem 2.6rem;
    border-radius: 20px;
    background:
        radial-gradient(700px 340px at 82% 0%, rgba(217, 192, 138, 0.2), transparent 66%),
        linear-gradient(135deg, #2c2621 0%, #171310 100%);
    border: 1px solid rgba(176, 141, 79, 0.34);
    overflow: hidden;
}

.pg-body .policy-contact-content,
.pg-body .refund-contact-content,
.pg-body .faq-contact-content,
.pg-body .quick-support-content {
    position: relative;
    z-index: 1;
    text-align: center;
}

.pg-body .policy-contact h2,
.pg-body .refund-contact h2,
.pg-body .faq-contact h2,
.pg-body .quick-support h2 {
    margin: 0 0 0.75rem;
    font-family: var(--pg-serif);
    font-size: clamp(1.6rem, 2.6vw, 2.1rem);
    font-weight: 600;
    color: #fff;
}

.pg-body .policy-contact p,
.pg-body .refund-contact p,
.pg-body .faq-contact p,
.pg-body .quick-support p {
    margin: 0 auto 1.8rem;
    max-width: 52ch;
    font-size: 1rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.72);
}

.pg-body .contact-buttons,
.pg-body .quick-support-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    justify-content: center;
}

.pg-body .contact-btn,
.pg-body .support-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1.7rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-family: var(--pg-sans);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-decoration: none;
    transition: transform 0.3s var(--pg-ease), background 0.3s ease, border-color 0.3s ease;
}

.pg-body .contact-btn:hover,
.pg-body .support-btn:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.55);
}

.pg-body .contact-btn:first-child,
.pg-body .support-btn:first-child {
    background: linear-gradient(135deg, var(--pg-crimson-bright) 0%, var(--pg-crimson) 60%, #8f1322 100%);
    border-color: transparent;
    box-shadow: 0 12px 26px rgba(168, 23, 42, 0.32);
}

/* ========================================
   8. INTRO PAGE
   ======================================== */
.pg-body .about-section,
.pg-body .team-section {
    margin: 3rem 0 0;
    padding: 3.2rem 3.4rem;
    background: var(--pg-glass-strong);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--pg-glass-border);
    border-radius: 20px;
    box-shadow: var(--pg-shadow);
    position: relative;
    overflow: hidden;
}

.pg-body .about-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--pg-crimson), var(--pg-gold-soft) 55%, transparent);
}

.pg-body .about-section h2,
.pg-body .team-section h2 {
    margin: 0 0 1.6rem;
    font-family: var(--pg-serif);
    font-size: clamp(1.6rem, 2.6vw, 2.1rem);
    font-weight: 600;
    line-height: 1.25;
    color: var(--pg-ink);
}

.pg-body .about-section h2 i,
.pg-body .team-section h2 i {
    font-size: 0.66em;
    color: var(--pg-gold);
    vertical-align: 0.1em;
    margin-right: 0.35rem;
}

.pg-body .about-section p {
    margin: 0 0 1.15rem;
    font-size: 1.01rem;
    line-height: 1.9;
    color: var(--pg-body);
}

.pg-body .team-description {
    margin: 0 0 2rem;
    font-size: 1.01rem;
    line-height: 1.9;
    color: var(--pg-body);
}

/* Mission / Vision / Values */
.pg-body .mvv-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.6rem;
    margin: 2.4rem 0 0;
}

.pg-body .mvv-card {
    position: relative;
    padding: 2.4rem 1.9rem;
    background: var(--pg-glass);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid var(--pg-glass-border);
    border-radius: 18px;
    box-shadow: 0 14px 34px rgba(58, 42, 24, 0.06);
    text-align: center;
    overflow: hidden;
    transition: transform 0.4s var(--pg-ease), box-shadow 0.4s var(--pg-ease),
                border-color 0.4s var(--pg-ease);
}

.pg-body .mvv-card::before {
    content: '';
    position: absolute;
    top: 0; left: 1.6rem; right: 1.6rem;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--pg-gold), transparent);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.pg-body .mvv-card:hover {
    transform: translateY(-6px);
    border-color: rgba(176, 141, 79, 0.45);
    box-shadow: var(--pg-shadow);
}

.pg-body .mvv-card:hover::before { opacity: 1; }

.pg-body .mvv-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 1.4rem;
    background: linear-gradient(135deg, rgba(176, 141, 79, 0.16), rgba(217, 192, 138, 0.1));
    border: 1px solid rgba(176, 141, 79, 0.34);
    color: var(--pg-crimson);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    transition: transform 0.4s var(--pg-ease);
}

.pg-body .mvv-card:hover .mvv-icon { transform: translateY(-3px); }

.pg-body .mvv-card h3 {
    margin: 0 0 0.8rem;
    font-family: var(--pg-serif);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--pg-ink);
    text-align: center;
}

.pg-body .mvv-card p {
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.8;
    color: var(--pg-body);
    text-align: center;
}

/* Chỉ số */
.pg-body .stats-section {
    margin: 2.4rem 0 0;
    padding: 2.6rem 2rem;
    background: var(--pg-glass);
    border: 1px solid var(--pg-glass-border);
    border-radius: 18px;
    position: relative;
    overflow: hidden;
}

.pg-body .stats-section::before { content: none; }

.pg-body .stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.4rem;
    position: relative;
    z-index: 1;
}

.pg-body .stat-item {
    text-align: center;
    padding: 0.6rem 0.5rem;
}

.pg-body .stat-number {
    font-family: var(--pg-serif);
    font-size: clamp(2.1rem, 4vw, 3rem);
    font-weight: 600;
    line-height: 1.1;
    color: var(--pg-ink);
}

.pg-body .stat-label {
    margin-top: 0.5rem;
    font-family: var(--pg-sans);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--pg-muted);
}

/* Lý do chọn */
.pg-body .why-choose-section {
    margin: 3rem 0 0;
}

.pg-body .why-choose-section h2 {
    margin: 0 0 1.8rem;
    font-family: var(--pg-serif);
    font-size: clamp(1.6rem, 2.6vw, 2.1rem);
    font-weight: 600;
    color: var(--pg-ink);
}

.pg-body .why-choose-section h2 .gradient-text { color: var(--pg-crimson); }

.pg-body .reasons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

.pg-body .reason-card {
    padding: 2.2rem 1.9rem;
    background: var(--pg-glass);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid var(--pg-glass-border);
    border-radius: 18px;
    box-shadow: 0 14px 34px rgba(58, 42, 24, 0.06);
    transition: transform 0.4s var(--pg-ease), box-shadow 0.4s var(--pg-ease),
                border-color 0.4s var(--pg-ease);
}

.pg-body .reason-card:hover {
    transform: translateY(-6px);
    border-color: rgba(176, 141, 79, 0.45);
    box-shadow: var(--pg-shadow);
}

.pg-body .reason-icon {
    width: 52px;
    height: 52px;
    margin-bottom: 1.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(176, 141, 79, 0.16), rgba(217, 192, 138, 0.1));
    border: 1px solid rgba(176, 141, 79, 0.34);
    color: var(--pg-crimson);
    font-size: 1.3rem;
    transition: transform 0.4s var(--pg-ease);
}

.pg-body .reason-card:hover .reason-icon { transform: translateY(-3px); }

.pg-body .reason-card h4 {
    margin: 0 0 0.65rem;
    font-family: var(--pg-serif);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--pg-ink);
}

.pg-body .reason-card p {
    margin: 0;
    font-size: 0.97rem;
    line-height: 1.8;
    color: var(--pg-body);
}

/* Đội ngũ */
.pg-body .team-values {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1.5rem;
}

.pg-body .team-value {
    padding: 1.9rem 1.5rem;
    border-radius: 16px;
    background: rgba(243, 236, 225, 0.5);
    border: 1px solid var(--pg-line);
    transition: transform 0.4s var(--pg-ease), border-color 0.4s var(--pg-ease),
                background 0.4s ease;
}

.pg-body .team-value:hover {
    transform: translateY(-4px);
    border-color: rgba(176, 141, 79, 0.45);
    background: rgba(243, 236, 225, 0.75);
}

.pg-body .team-value i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 1rem;
    border-radius: 12px;
    background: rgba(168, 23, 42, 0.08);
    border: 1px solid rgba(168, 23, 42, 0.2);
    color: var(--pg-crimson);
    font-size: 1.1rem;
}

.pg-body .team-value h4 {
    margin: 0 0 0.55rem;
    font-family: var(--pg-serif);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--pg-ink);
}

.pg-body .team-value p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.8;
    color: var(--pg-body);
}

/* CTA cuối trang */
.pg-body .intro-cta {
    margin: 3rem 0 0;
    padding: 3.4rem 2.6rem;
    border-radius: 20px;
    text-align: center;
    background:
        radial-gradient(700px 340px at 82% 0%, rgba(217, 192, 138, 0.2), transparent 66%),
        linear-gradient(135deg, #2c2621 0%, #171310 100%);
    border: 1px solid rgba(176, 141, 79, 0.34);
    overflow: hidden;
}

.pg-body .intro-cta h2 {
    margin: 0 0 0.8rem;
    font-family: var(--pg-serif);
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    font-weight: 600;
    color: #fff;
}

.pg-body .intro-cta p {
    margin: 0 auto 1.9rem;
    max-width: 50ch;
    font-size: 1rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.72);
}

.pg-body .cta-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    justify-content: center;
}

.pg-body .cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.95rem 1.9rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-family: var(--pg-sans);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    text-decoration: none;
    transition: transform 0.35s var(--pg-ease), box-shadow 0.35s var(--pg-ease),
                background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.pg-body .cta-btn.primary {
    background: linear-gradient(135deg, var(--pg-crimson-bright) 0%, var(--pg-crimson) 55%, #8f1322 100%);
    color: #fff;
    box-shadow: 0 12px 28px rgba(168, 23, 42, 0.3);
}

.pg-body .cta-btn.primary:hover {
    transform: translateY(-2px);
    color: #fff;
    box-shadow: 0 18px 38px rgba(168, 23, 42, 0.38);
}

.pg-body .cta-btn.secondary {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.32);
    color: #fff;
}

.pg-body .cta-btn.secondary:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.6);
    color: #fff;
}

/* ========================================
   9. SUPPORT 24/7
   ======================================== */
.pg-body .contact-methods-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.6rem;
    margin: 3.2rem 0 0;
}

.pg-body .contact-card {
    position: relative;
    padding: 2.4rem 1.9rem;
    background: var(--pg-glass);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid var(--pg-glass-border);
    border-radius: 18px;
    box-shadow: 0 14px 34px rgba(58, 42, 24, 0.07);
    overflow: hidden;
    transition: transform 0.4s var(--pg-ease), box-shadow 0.4s var(--pg-ease),
                border-color 0.4s var(--pg-ease);
}

.pg-body .contact-card::before {
    content: '';
    position: absolute;
    top: 0; left: 1.6rem; right: 1.6rem;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--pg-gold), transparent);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.pg-body .contact-card:hover {
    transform: translateY(-6px);
    border-color: rgba(176, 141, 79, 0.45);
    box-shadow: var(--pg-shadow);
}

.pg-body .contact-card:hover::before { opacity: 1; }

.pg-body .contact-icon {
    width: 56px;
    height: 56px;
    margin-bottom: 1.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    background: linear-gradient(135deg, rgba(176, 141, 79, 0.16), rgba(217, 192, 138, 0.1));
    border: 1px solid rgba(176, 141, 79, 0.34);
    color: var(--pg-crimson);
    font-size: 1.35rem;
    transition: transform 0.4s var(--pg-ease);
}

.pg-body .contact-card:hover .contact-icon { transform: translateY(-3px); }

.pg-body .contact-card h3 {
    margin: 0 0 0.65rem;
    font-family: var(--pg-serif);
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--pg-ink);
}

.pg-body .contact-card p {
    margin: 0 0 1.3rem;
    font-size: 0.96rem;
    line-height: 1.8;
    color: var(--pg-body);
}

.pg-body .contact-link {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.7rem 1.2rem;
    border-radius: 999px;
    border: 1px solid rgba(176, 141, 79, 0.4);
    background: rgba(255, 253, 250, 0.7);
    color: var(--pg-crimson);
    font-family: var(--pg-sans);
    font-size: 0.86rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s var(--pg-ease);
}

.pg-body .contact-link:hover {
    background: var(--pg-crimson);
    border-color: var(--pg-crimson);
    color: #fff;
    transform: translateY(-2px);
}

/* Khối thông tin (yêu cầu hỗ trợ) */
.pg-body .info-section {
    margin: 3.2rem 0 0;
    padding: 2.9rem 3.2rem;
    background: var(--pg-glass-strong);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--pg-glass-border);
    border-radius: 20px;
    box-shadow: var(--pg-shadow);
}

.pg-body .info-section h2 {
    margin: 0 0 1.8rem;
    font-family: var(--pg-serif);
    font-size: clamp(1.6rem, 2.6vw, 2.1rem);
    font-weight: 600;
    color: var(--pg-ink);
}

.pg-body .info-section h3 {
    position: relative;
    margin: 2.1rem 0 0.9rem;
    padding-left: 1.05rem;
    font-family: var(--pg-serif);
    font-size: 1.28rem;
    font-weight: 600;
    color: var(--pg-ink);
}

.pg-body .info-section h3::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.34em;
    width: 3px;
    height: 1.05em;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--pg-crimson), var(--pg-gold));
}

.pg-body .info-section p {
    margin: 0 0 1.1rem;
    font-size: 1rem;
    line-height: 1.9;
    color: var(--pg-body);
}

.pg-body .info-section ul {
    margin: 0 0 1.2rem;
    padding: 0;
    list-style: none;
}

.pg-body .info-section ul li {
    position: relative;
    margin: 0 0 0.65rem;
    padding-left: 1.6rem;
    font-size: 0.99rem;
    line-height: 1.8;
    color: var(--pg-body);
}

.pg-body .info-section ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.72em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--pg-gold);
}

/* Lợi ích */
.pg-body .benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.6rem;
    margin: 1.8rem 0 0;
}

.pg-body .benefit-item {
    padding: 2.1rem 1.8rem;
    background: var(--pg-glass);
    border: 1px solid var(--pg-glass-border);
    border-radius: 18px;
    box-shadow: 0 14px 34px rgba(58, 42, 24, 0.06);
    transition: transform 0.4s var(--pg-ease), border-color 0.4s var(--pg-ease);
}

.pg-body .benefit-item:hover {
    transform: translateY(-5px);
    border-color: rgba(176, 141, 79, 0.45);
}

.pg-body .benefit-item i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 1.1rem;
    border-radius: 13px;
    background: rgba(168, 23, 42, 0.08);
    border: 1px solid rgba(168, 23, 42, 0.2);
    color: var(--pg-crimson);
    font-size: 1.2rem;
}

.pg-body .benefit-item h4 {
    margin: 0 0 0.55rem;
    font-family: var(--pg-serif);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--pg-ink);
}

.pg-body .benefit-item p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.8;
    color: var(--pg-body);
}

/* ========================================
   10. FAQ
   ======================================== */
.pg-body .faq-search { margin: 3.2rem 0 0; }

.pg-body .search-box { max-width: 620px; margin: 0 auto; }

.pg-body .search-box input {
    width: 100%;
    padding: 1.05rem 3.4rem 1.05rem 1.6rem;
    background: var(--pg-glass-strong);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid var(--pg-line);
    border-radius: 999px;
    color: var(--pg-ink);
    font-family: var(--pg-sans);
    font-size: 1rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.pg-body .search-box input:focus {
    outline: none;
    border-color: rgba(176, 141, 79, 0.7);
    background: rgba(255, 253, 250, 0.94);
    box-shadow: 0 0 0 4px rgba(176, 141, 79, 0.13);
}

.pg-body .search-box input::placeholder { color: var(--pg-muted); }

.pg-body .search-icon {
    right: 1.5rem;
    color: var(--pg-gold);
    font-size: 1.1rem;
}

.pg-body .faq-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.4rem;
    margin: 2.4rem 0 0;
}

.pg-body .stat-box {
    padding: 1.8rem 1.4rem;
    text-align: center;
    background: var(--pg-glass);
    border: 1px solid var(--pg-glass-border);
    border-radius: 16px;
    box-shadow: 0 12px 28px rgba(58, 42, 24, 0.06);
    transition: transform 0.4s var(--pg-ease), border-color 0.4s var(--pg-ease);
}

.pg-body .stat-box:hover {
    transform: translateY(-4px);
    border-color: rgba(176, 141, 79, 0.45);
}

.pg-body .stat-box i {
    font-size: 1.15rem;
    color: var(--pg-gold);
    margin-bottom: 0.6rem;
}

.pg-body .stat-box h4 {
    margin: 0 0 0.3rem;
    font-family: var(--pg-serif);
    font-size: 1.9rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--pg-ink);
}

.pg-body .stat-box p {
    margin: 0;
    font-family: var(--pg-sans);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--pg-muted);
}

.pg-body .faq-items {
    display: grid;
    gap: 0.9rem;
    margin: 2.6rem 0 0;
}

.pg-body .faq-item {
    background: var(--pg-glass-strong);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid var(--pg-glass-border);
    border-radius: 16px;
    box-shadow: 0 12px 28px rgba(58, 42, 24, 0.055);
    overflow: hidden;
    transition: border-color 0.35s ease, box-shadow 0.35s ease;
}

.pg-body .faq-item:hover,
.pg-body .faq-item.active {
    border-color: rgba(176, 141, 79, 0.5);
    box-shadow: var(--pg-shadow);
}

.pg-body .faq-question {
    padding: 1.35rem 1.6rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.4rem;
    user-select: none;
    transition: background 0.3s ease;
}

.pg-body .faq-question:hover { background: rgba(243, 236, 225, 0.55); }

.pg-body .question-text { gap: 0.95rem; }

.pg-body .question-number {
    width: 34px;
    height: 34px;
    background: rgba(168, 23, 42, 0.08);
    border: 1px solid rgba(168, 23, 42, 0.24);
    color: var(--pg-crimson);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--pg-sans);
    font-weight: 600;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.pg-body .question-text h3 {
    margin: 0;
    font-family: var(--pg-serif);
    font-size: 1.14rem;
    font-weight: 600;
    line-height: 1.45;
    color: var(--pg-ink);
}

.pg-body .question-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--pg-line);
    color: var(--pg-crimson);
    font-size: 0.8rem;
    transition: transform 0.3s var(--pg-ease), border-color 0.3s ease,
                background 0.3s ease, color 0.3s ease;
}

.pg-body .faq-item.active .question-icon {
    transform: rotate(180deg);
    background: var(--pg-crimson);
    border-color: var(--pg-crimson);
    color: #fff;
}

.pg-body .faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.42s var(--pg-ease);
}

.pg-body .faq-item.active .faq-answer { max-height: 640px; }

.pg-body .answer-content { padding: 0 1.6rem 1.5rem; }

.pg-body .answer-content p {
    margin: 0;
    padding-top: 1.1rem;
    border-top: 1px solid var(--pg-line-soft);
    font-size: 0.98rem;
    line-height: 1.85;
    color: var(--pg-body);
}

/* ========================================
   11. POLICY / REFUND — KHỐI ĐẶC BIỆT
   ======================================== */
.pg-body .security-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
    margin: 3.2rem 0 0;
}

.pg-body .security-card {
    padding: 2.1rem 1.8rem;
    background: var(--pg-glass);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid var(--pg-glass-border);
    border-radius: 18px;
    box-shadow: 0 14px 34px rgba(58, 42, 24, 0.07);
    transition: transform 0.4s var(--pg-ease), border-color 0.4s var(--pg-ease),
                box-shadow 0.4s var(--pg-ease);
}

.pg-body .security-card:hover {
    transform: translateY(-6px);
    border-color: rgba(176, 141, 79, 0.45);
    box-shadow: var(--pg-shadow);
}

.pg-body .security-icon {
    width: 54px;
    height: 54px;
    margin-bottom: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(176, 141, 79, 0.16), rgba(217, 192, 138, 0.1));
    border: 1px solid rgba(176, 141, 79, 0.34);
    color: var(--pg-crimson);
    font-size: 1.3rem;
    transition: transform 0.4s var(--pg-ease);
}

.pg-body .security-card:hover .security-icon { transform: translateY(-3px); }

.pg-body .security-card h4 {
    margin: 0 0 0.6rem;
    font-family: var(--pg-serif);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--pg-ink);
}

.pg-body .security-card p {
    margin: 0;
    font-size: 0.96rem;
    line-height: 1.8;
    color: var(--pg-body);
}

/* Cam kết hoàn tiền */
.pg-body .guarantee-badge {
    position: relative;
    margin: 3.2rem 0 0;
    padding: 2.8rem 2.4rem;
    border-radius: 20px;
    text-align: center;
    background:
        radial-gradient(700px 320px at 80% 0%, rgba(217, 192, 138, 0.22), transparent 66%),
        linear-gradient(135deg, #2c2621 0%, #171310 100%);
    border: 1px solid rgba(176, 141, 79, 0.36);
    overflow: hidden;
}

.pg-body .guarantee-badge::before {
    content: '';
    position: absolute;
    inset: 9px;
    border: 1px solid rgba(176, 141, 79, 0.22);
    border-radius: 13px;
    pointer-events: none;
}

.pg-body .guarantee-content { position: relative; z-index: 1; }

.pg-body .guarantee-badge i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    margin-bottom: 1.2rem;
    border-radius: 50%;
    background: rgba(217, 192, 138, 0.14);
    border: 1px solid rgba(217, 192, 138, 0.42);
    color: var(--pg-gold-soft);
    font-size: 1.5rem;
}

.pg-body .guarantee-badge h2 {
    margin: 0 0 0.7rem;
    font-family: var(--pg-serif);
    font-size: clamp(1.7rem, 3vw, 2.3rem);
    font-weight: 600;
    color: #fff;
}

.pg-body .guarantee-badge p {
    margin: 0 auto;
    max-width: 52ch;
    font-size: 1rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.72);
}

/* Các bước hoàn tiền */
.pg-body .refund-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1.4rem;
    margin: 1.6rem 0 0;
}

.pg-body .step-card {
    padding: 1.9rem 1.6rem;
    background: rgba(243, 236, 225, 0.5);
    border: 1px solid var(--pg-line);
    border-radius: 16px;
    transition: transform 0.4s var(--pg-ease), border-color 0.4s var(--pg-ease),
                background 0.4s ease;
}

.pg-body .step-card:hover {
    transform: translateY(-4px);
    border-color: rgba(176, 141, 79, 0.45);
    background: rgba(243, 236, 225, 0.78);
}

.pg-body .step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: 1rem;
    border-radius: 50%;
    background: rgba(168, 23, 42, 0.08);
    border: 1px solid rgba(168, 23, 42, 0.24);
    color: var(--pg-crimson);
    font-family: var(--pg-serif);
    font-size: 1.15rem;
    font-weight: 600;
}

.pg-body .step-content h4 {
    margin: 0 0 0.5rem;
    font-family: var(--pg-serif);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--pg-ink);
}

.pg-body .step-content p {
    margin: 0;
    font-size: 0.94rem;
    line-height: 1.75;
    color: var(--pg-body);
}

/* Cách liên hệ (refund) */
.pg-body .contact-methods-grid .contact-method {
    padding: 1.9rem 1.6rem;
    background: var(--pg-glass);
    border: 1px solid var(--pg-glass-border);
    border-radius: 16px;
    box-shadow: 0 12px 28px rgba(58, 42, 24, 0.06);
    transition: transform 0.4s var(--pg-ease), border-color 0.4s var(--pg-ease);
}

.pg-body .contact-method:hover {
    transform: translateY(-4px);
    border-color: rgba(176, 141, 79, 0.45);
}

.pg-body .contact-method-text h4 {
    margin: 0 0 0.45rem;
    font-family: var(--pg-serif);
    font-size: 1.18rem;
    font-weight: 600;
    color: var(--pg-ink);
}

.pg-body .contact-method-text p {
    margin: 0;
    font-size: 0.94rem;
    line-height: 1.75;
    color: var(--pg-body);
}

/* ========================================
   12. SUPPORT APPS
   ======================================== */
.pg-body .tab-navigation {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin: 3.2rem 0 0;
}

.pg-body .tab-button {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.8rem 1.6rem;
    border-radius: 999px;
    border: 1px solid var(--pg-line);
    background: rgba(255, 253, 250, 0.65);
    color: var(--pg-body);
    font-family: var(--pg-sans);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s var(--pg-ease);
}

.pg-body .tab-button i { font-size: 0.85em; }

.pg-body .tab-button:hover {
    border-color: rgba(176, 141, 79, 0.55);
    color: var(--pg-ink);
}

.pg-body .tab-button.active {
    background: linear-gradient(135deg, var(--pg-crimson-bright) 0%, var(--pg-crimson) 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 10px 24px rgba(168, 23, 42, 0.26);
}

.pg-body .tab-content { display: none; }
.pg-body .tab-content.active { display: block; animation: pgFade 0.45s var(--pg-ease); }

@keyframes pgFade {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.pg-body .download-box {
    position: relative;
    margin: 1.8rem 0 0;
    padding: 2.6rem 2.4rem;
    background: var(--pg-glass-strong);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--pg-glass-border);
    border-radius: 20px;
    box-shadow: var(--pg-shadow);
    overflow: hidden;
}

.pg-body .download-box::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--pg-crimson), var(--pg-gold-soft) 55%, transparent);
}

.pg-body .download-box h2 {
    margin: 0 0 0.6rem;
    font-family: var(--pg-serif);
    font-size: clamp(1.5rem, 2.4vw, 1.95rem);
    font-weight: 600;
    color: var(--pg-ink);
}

.pg-body .download-box h2 i {
    font-size: 0.66em;
    color: var(--pg-gold);
    vertical-align: 0.1em;
    margin-right: 0.35rem;
}

.pg-body .version-info {
    margin: 0 0 1.6rem;
    font-family: var(--pg-sans);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--pg-muted);
}

.pg-body .download-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    margin-bottom: 1.5rem;
}

.pg-body .download-button {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.9rem 1.8rem;
    border-radius: 999px;
    border: 1px solid var(--pg-line);
    background: rgba(255, 253, 250, 0.8);
    color: var(--pg-ink);
    font-family: var(--pg-sans);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-decoration: none;
    transition: all 0.3s var(--pg-ease);
}

.pg-body .download-button::before { content: none; }

.pg-body .download-button:hover {
    transform: translateY(-2px);
    border-color: rgba(176, 141, 79, 0.55);
    box-shadow: 0 12px 26px rgba(58, 42, 24, 0.1);
}

.pg-body .download-button.primary {
    background: linear-gradient(135deg, var(--pg-crimson-bright) 0%, var(--pg-crimson) 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 10px 24px rgba(168, 23, 42, 0.26);
}

.pg-body .download-button.primary:hover { color: #fff; }

.pg-body .download-button.android {
    background: linear-gradient(135deg, #2f8f4e 0%, #1f6b39 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 10px 24px rgba(47, 143, 78, 0.24);
}

.pg-body .download-button.android:hover { color: #fff; }

.pg-body .system-info {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0.6rem 0.5rem 0;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    background: rgba(243, 236, 225, 0.6);
    border: 1px solid var(--pg-line-soft);
    font-size: 0.82rem;
    color: var(--pg-muted);
}

/* Tính năng */
.pg-body .features-section { margin: 3.2rem 0 0; }

.pg-body .features-section h2 {
    margin: 0 0 1.8rem;
    font-family: var(--pg-serif);
    font-size: clamp(1.6rem, 2.6vw, 2.1rem);
    font-weight: 600;
    color: var(--pg-ink);
}

.pg-body .features-section h2 i {
    font-size: 0.66em;
    color: var(--pg-gold);
    vertical-align: 0.1em;
    margin-right: 0.35rem;
}

.pg-body .feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

.pg-body .feature-card {
    position: relative;
    padding: 2.1rem 1.8rem;
    background: var(--pg-glass);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid var(--pg-glass-border);
    border-radius: 18px;
    box-shadow: 0 14px 34px rgba(58, 42, 24, 0.06);
    overflow: hidden;
    transition: transform 0.4s var(--pg-ease), border-color 0.4s var(--pg-ease),
                box-shadow 0.4s var(--pg-ease);
}

.pg-body .feature-card::before {
    content: '';
    position: absolute;
    top: 0; left: 1.6rem; right: 1.6rem;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--pg-gold), transparent);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.pg-body .feature-card:hover {
    transform: translateY(-6px);
    border-color: rgba(176, 141, 79, 0.45);
    box-shadow: var(--pg-shadow);
}

.pg-body .feature-card:hover::before { opacity: 1; }

.pg-body .feature-card i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    margin-bottom: 1.2rem;
    border-radius: 13px;
    background: linear-gradient(135deg, rgba(176, 141, 79, 0.16), rgba(217, 192, 138, 0.1));
    border: 1px solid rgba(176, 141, 79, 0.34);
    color: var(--pg-crimson);
    font-size: 1.25rem;
    transition: transform 0.4s var(--pg-ease);
}

.pg-body .feature-card:hover i { transform: translateY(-3px); }

.pg-body .feature-card h3 {
    margin: 0 0 0.6rem;
    font-family: var(--pg-serif);
    font-size: 1.28rem;
    font-weight: 600;
    color: var(--pg-ink);
}

.pg-body .feature-card p {
    margin: 0;
    font-size: 0.96rem;
    line-height: 1.8;
    color: var(--pg-body);
}

/* Khối hướng dẫn theo nền tảng */
.pg-body .platform {
    margin: 3.2rem 0 0;
    padding: 2.6rem 2.6rem;
    background: var(--pg-glass-strong);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--pg-glass-border);
    border-radius: 20px;
    box-shadow: var(--pg-shadow);
}

.pg-body .platform h2 {
    margin: 0 0 1.6rem;
    font-family: var(--pg-serif);
    font-size: clamp(1.5rem, 2.4vw, 1.95rem);
    font-weight: 600;
    color: var(--pg-ink);
}

.pg-body .platform h2 i {
    font-size: 0.62em;
    color: var(--pg-gold);
    vertical-align: 0.12em;
    margin-right: 0.4rem;
}

.pg-body .platform ol,
.pg-body .platform ul {
    margin: 0 0 1.2rem;
    padding-left: 1.4rem;
}

.pg-body .platform li {
    margin: 0 0 0.6rem;
    font-size: 0.99rem;
    line-height: 1.8;
    color: var(--pg-body);
}

.pg-body .platform code {
    padding: 0.15rem 0.45rem;
    border-radius: 5px;
    background: rgba(243, 236, 225, 0.9);
    border: 1px solid var(--pg-line-soft);
    font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
    font-size: 0.9em;
    color: var(--pg-crimson);
}

.pg-body .platform pre {
    margin: 0 0 1.2rem;
    padding: 1.2rem 1.4rem;
    border-radius: 12px;
    background: #171310;
    color: rgba(255, 255, 255, 0.85);
    overflow-x: auto;
}

.pg-body .step-box {
    margin: 1.6rem 0 0;
    padding: 1.9rem 2rem;
    background: rgba(243, 236, 225, 0.42);
    border: 1px solid var(--pg-line);
    border-radius: 16px;
}

.pg-body .step-box h3 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 0.7rem;
    font-family: var(--pg-serif);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--pg-ink);
}

.pg-body .step-box .step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin: 0;
    border-radius: 50%;
    background: rgba(168, 23, 42, 0.08);
    border: 1px solid rgba(168, 23, 42, 0.24);
    color: var(--pg-crimson);
    font-family: var(--pg-serif);
    font-size: 1rem;
    font-weight: 600;
    flex-shrink: 0;
}

.pg-body .step-desc {
    margin: 0 0 0.9rem;
    font-size: 0.98rem;
    line-height: 1.8;
    color: var(--pg-body);
}

.pg-body .step-image {
    margin: 1.2rem 0 0;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--pg-line);
    background: #fff;
}

.pg-body .step-image img {
    display: block;
    width: 100%;
    height: auto;
}

.pg-body .success-box strong {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.7rem;
    font-family: var(--pg-sans);
    font-weight: 600;
    color: var(--pg-ink);
}

.pg-body .success-box ul { margin: 0; padding-left: 1.3rem; }
.pg-body .success-box li { margin: 0 0 0.35rem; font-size: 0.95rem; }

/* ========================================
   13. RESPONSIVE
   ======================================== */
@media (max-width: 1080px) {
    .pg-body .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 820px) {
    .pg-body .faq-stats { grid-template-columns: 1fr; }
    .pg-body .toc ul { columns: 1; }
}

@media (max-width: 640px) {
    .pg-hero {
        padding: 7.5rem 0 3rem;
    }

    .pg-body .intro-hero,
    .pg-body .terms-hero,
    .pg-body .support-hero,
    .pg-body .faq-hero,
    .pg-body .policy-hero,
    .pg-body .refund-hero,
    .pg-body .support-apps-hero {
        padding: 7.5rem 0 3rem;
    }

    .pg-body .intro-hero > div,
    .pg-body .terms-hero > div,
    .pg-body .support-hero > div,
    .pg-body .faq-hero > div,
    .pg-body .policy-hero > div,
    .pg-body .refund-hero > div,
    .pg-body .support-apps-hero > div {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .pg-shell,
    .pg-body .intro-container,
    .pg-body .terms-container,
    .pg-body .support-container,
    .pg-body .faq-container,
    .pg-body .policy-container,
    .pg-body .refund-container,
    .pg-body .main-container {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .pg-body .terms-content,
    .pg-body .policy-content,
    .pg-body .refund-content,
    .pg-body .about-section,
    .pg-body .team-section,
    .pg-body .info-section,
    .pg-body .platform {
        padding: 1.9rem 1.5rem;
    }

    .pg-body .stats-grid { grid-template-columns: 1fr; }

    .pg-body .cta-buttons,
    .pg-body .contact-buttons,
    .pg-body .quick-support-buttons,
    .pg-body .download-buttons {
        flex-direction: column;
    }

    .pg-body .cta-btn,
    .pg-body .contact-btn,
    .pg-body .support-btn,
    .pg-body .download-button,
    .pg-body .pg-btn {
        width: 100%;
    }

    .pg-body .question-text h3 { font-size: 1.05rem; }
    .pg-body .faq-question { padding: 1.15rem 1.2rem; }
    .pg-body .answer-content { padding: 0 1.2rem 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
    .pg-card,
    .pg-btn,
    .pg-icon,
    .pg-body .mvv-card,
    .pg-body .mvv-icon,
    .pg-body .reason-card,
    .pg-body .reason-icon,
    .pg-body .contact-card,
    .pg-body .contact-icon,
    .pg-body .benefit-item,
    .pg-body .feature-card,
    .pg-body .feature-card i,
    .pg-body .security-card,
    .pg-body .security-icon,
    .pg-body .stat-box,
    .pg-body .team-value,
    .pg-body .step-card,
    .pg-body .faq-item {
        transition: none;
    }

    .pg-body .mvv-card:hover,
    .pg-body .reason-card:hover,
    .pg-body .contact-card:hover,
    .pg-body .benefit-item:hover,
    .pg-body .feature-card:hover,
    .pg-body .security-card:hover,
    .pg-body .stat-box:hover,
    .pg-body .team-value:hover,
    .pg-body .step-card:hover,
    .pg-body .cta-btn:hover,
    .pg-body .contact-btn:hover,
    .pg-body .support-btn:hover,
    .pg-body .download-button:hover {
        transform: none;
    }
}