/* Premium American SaaS Aesthetic Styling (Stripe/Linear Inspired) */

:root {
    --primary: #0066cc;
    --primary-hover: #0052a3;
    --primary-light: #e6f0fa;
    --text-main: #1d1d1f;
    --text-muted: #6e6e73;
    --bg-main: #f5f5f7;
    --bg-card: #ffffff;
    --border-color: #e2e2e5;
    --tick-color: #10b981;
    --cross-color: #cbd5e1;
    --highlight-bg: #f8fafc;
    --font-stack: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-stack);
    background-color: var(--bg-main);
    color: var(--text-main);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

.container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Rich Hero Section inspired by qlbh1.png */
.hero-section {
    padding: 60px 0 60px;
    background: radial-gradient(80% 50% at 50% 0%, rgba(0, 102, 204, 0.06) 0%, rgba(255, 255, 255, 0) 100%), #ffffff;
    border-bottom: 1px solid var(--border-color);
    text-align: center;
}

.badge {
    display: inline-block;
    padding: 8px 18px;
    background-color: #fff7ed;
    color: #ea580c;
    font-size: 13px;
    font-weight: 700;
    border-radius: 99px;
    margin-bottom: 24px;
    border: 1px solid #ffedd5;
    letter-spacing: 0.02em;
}

.hero-main-title h1 {
    font-size: 48px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
    margin-bottom: 8px;
    color: #0c1c36;
}

.hero-tagline {
    font-size: 18px;
    font-weight: 600;
    color: var(--primary);
    letter-spacing: 0.1em;
    margin-bottom: 48px;
    text-transform: uppercase;
}

.gradient-text {
    background: linear-gradient(135deg, #0052a3, #0066cc, #22c55e);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Three Column Interactive Showcase Grid */
.intro-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr 1fr;
    gap: 24px;
    align-items: center;
    margin-bottom: 56px;
    text-align: left;
}

/* Left side icon boxes */
.intro-card-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.icon-box-item {
    background: #ffffff;
    border: 1px solid var(--border-color);
    padding: 16px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: transform 0.2s ease;
}

.icon-box-item:hover {
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
}

.icon-avatar {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}
.icon-avatar.blue { background: #eff6ff; }
.icon-avatar.green { background: #ecfdf5; }
.icon-avatar.orange { background: #fff7ed; }
.icon-avatar.purple { background: #f5f3ff; }

.icon-box-text h4 {
    font-size: 14px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 2px;
}
.icon-box-text p {
    font-size: 12px;
    color: var(--text-muted);
}

/* Center device preview mockup styling */
.center-device-graphic {
    display: flex;
    justify-content: center;
}

.mock-screen {
    width: 100%;
    max-width: 380px;
    background: linear-gradient(145deg, #0f172a, #1e293b);
    border-radius: 20px;
    padding: 6px;
    box-shadow: 0 25px 50px -12px rgba(0, 66, 204, 0.25);
    border: 4px solid #334155;
}

.mock-header {
    padding: 10px 16px;
    color: #94a3b8;
    font-size: 11px;
    font-family: monospace;
    border-bottom: 1px solid #334155;
    display: flex;
    gap: 6px;
}
.mock-header span {
    margin-left: auto;
    color: #38bdf8;
}

.mock-body {
    padding: 40px 24px;
    text-align: center;
    color: #ffffff;
}

.mock-app-icon {
    font-size: 54px;
    margin-bottom: 16px;
    animation: pulse 2s infinite ease-in-out;
}

.mock-body h3 {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-bottom: 12px;
    color: #f8fafc;
}

.mock-badge-status {
    display: inline-block;
    padding: 4px 12px;
    background: rgba(34, 197, 94, 0.2);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.4);
    font-size: 12px;
    font-weight: 600;
    border-radius: 99px;
    margin-bottom: 24px;
}

.mock-transfer-text {
    font-size: 13px;
    color: #cbd5e1;
    border-top: 1px dashed #334155;
    padding-top: 16px;
}

/* Right side feature pills */
.intro-card-features {
    background: linear-gradient(145deg, #fafafa, #f1f5f9);
    border: 1px solid var(--border-color);
    padding: 24px;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
    justify-content: center;
}

.feature-pill-title {
    font-size: 13px;
    font-weight: 800;
    color: #475569;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.feature-pill {
    background: #ffffff;
    padding: 14px 18px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
    border-left: 4px solid var(--primary);
}

.pill-bullet {
    color: var(--primary);
    margin-right: 4px;
}

/* Bottom commitments row */
.commitments-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    border-top: 1px solid var(--border-color);
    padding-top: 36px;
    margin-top: 12px;
}

.commit-item {
    text-align: center;
}

.commit-icon {
    font-size: 24px;
    margin-bottom: 8px;
}

.commit-title {
    font-size: 12px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 4px;
}

.commit-desc {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.4;
}

/* Section Main Titles */
.section-title-wrapper {
    text-align: center;
    margin-bottom: 32px;
}
.section-title-wrapper h2 {
    font-size: 28px;
    font-weight: 700;
    color: #0f172a;
}
.section-title-wrapper p {
    font-size: 15px;
    color: var(--text-muted);
    margin-top: 4px;
}

/* --- Bổ sung thêm đoạn dưới này để đồng bộ hóa --- */
.account-info-box {
    display: inline-flex; /* Giúp box tự động co giãn theo chữ và giữ căn giữa */
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
    
    background-color: #f8fafc; /* Nền xám nhạt sang trọng, tinh tế */
    border: 1px solid #e2e8f0; /* Viền mảnh đồng bộ */
    border-radius: 6px;
    padding: 8px 16px;
    margin-top: 12px; /* Khoảng cách từ tiêu đề h2 xuống box */
    font-family: sans-serif;
    font-size: 14px;
}

.account-info-box .box-title {
    color: #0f172a; /* Màu chữ đen đậm giống h2 */
    font-weight: 600;
}

.account-info-box .box-item {
    color: #475569;
}

/* Thẻ highlight cho tài khoản / mật khẩu */
.account-info-box .highlight-code {
    font-family: monospace;
    font-size: 14px;
    font-weight: 700;
    color: #005a9c; /* Màu xanh dương thương hiệu tạo điểm nhấn */
    background: #e2e8f0;
    padding: 2px 6px;
    border-radius: 4px;
}

/* Main Content & Table Workspace */
main {
    padding: 56px 0 80px;
}

.table-container {
    background-color: var(--bg-card);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.03), 0 1px 3px rgba(0, 0, 0, 0.02);
    border: 1px solid var(--border-color);
    overflow-x: auto;
}

.comparison-table {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
    font-size: 14px;
}

/* Headers Styling */
.product-headers th {
    padding: 32px 20px;
    background-color: #ffffff;
    border-bottom: 2px solid var(--border-color);
    vertical-align: middle;
}

.main-header-cell {
    text-align: left;
    min-width: 280px;
}

.table-title {
    font-size: 18px;
    font-weight: 700;
    color: #000000;
}

.table-subtitle {
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 400;
    margin-top: 4px;
}

.version-name {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 12px;
    color: #000000;
}

/* CTA Buttons Styling */
.cta-btn {
    display: inline-block;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s ease;
    width: 100%;
    max-width: 130px;
}

.cta-btn.text-link {
    background-color: var(--bg-main);
    color: var(--text-main);
    border: 1px solid var(--border-color);
}

.cta-btn.text-link:hover {
    background-color: var(--border-color);
}

.cta-btn.primary {
    background-color: var(--primary);
    color: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 102, 204, 0.2);
}

.cta-btn.primary:hover {
    background-color: var(--primary-hover);
    transform: translateY(-1px);
}

/* Group Headers Row */
.group-header-row td {
    background-color: #fafafa;
    color: #000000;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.05em;
    text-align: left;
    padding: 16px 24px;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    text-transform: uppercase;
}

.pricing-header-row td {
    background: linear-gradient(90deg, #f1f5f9, #f8fafc);
    color: var(--primary);
    font-size: 14px;
    border-top: 3px solid var(--primary);
}

/* Rows & Cells Details */
.feature-row td, .pricing-row td {
    padding: 14px 20px;
    border-bottom: 1px solid #f0f0f3;
    vertical-align: middle;
}

.feature-row:hover, .pricing-row:hover {
    background-color: #fbfbfd;
}

.stt-cell {
    color: var(--text-muted);
    font-size: 12px;
    width: 40px;
    text-align: center;
}

.feature-name {
    text-align: left;
    font-weight: 500;
    color: var(--text-main);
    min-width: 240px;
}

.pricing-label {
    font-weight: 600;
    color: #000000;
}

/* Highlight Kiot Column natively */
.highlight-column {
    background-color: rgba(0, 102, 204, 0.015);
    border-left: 1px solid rgba(0, 102, 204, 0.08);
    border-right: 1px solid rgba(0, 102, 204, 0.08);
}

tr:hover .highlight-column {
    background-color: rgba(0, 102, 204, 0.03) !important;
}

/* Elegant Icons replace 'x' */
.icon-tick {
    color: var(--tick-color);
    font-weight: 700;
    font-size: 16px;
    background-color: #e6fbf4;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.icon-cross {
    color: var(--cross-color);
    font-size: 14px;
}

/* Pricing Rows Details */
.price-val {
    font-size: 15px;
    font-weight: 600;
    color: #111827;
}

.font-bold {
    font-size: 16px;
    color: var(--primary);
}

.infinite-row {
    background-color: rgba(34, 197, 94, 0.02);
}

/* Footer styling */
.footer {
    text-align: center;
    padding: 40px 0;
    color: var(--text-muted);
    font-size: 13px;
    border-top: 1px solid var(--border-color);
    background-color: #ffffff;
}

@keyframes pulse {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

/* Responsive Grid styling */
@media (max-width: 1024px) {
    .intro-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .commitments-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
    .hero-main-title h1 {
        font-size: 36px;
    }
}
/* Ô nổi bật */
.pricing-label_special {
    position: relative;
    background: linear-gradient(135deg, #2563eb, #1e40af);
    color: #fff;
    font-weight: 700;
    padding: 14px 18px;
    border-radius: 10px;
}

.pricing-label_special::after {
    content: "MIỄN PHÍ";
    position: absolute;
    top: -10px;
    right: -10px;
    background: #f59e0b;
    color: #fff;
    padding: 4px 8px;
    font-size: 10px;
    border-radius: 4px;
}

/* ==========================================
   CSS CHO PHẦN MỞ RỘNG (CROSS-SELLING) - SAAS OPTIMIZED
   ========================================== */

.software-extensions-section {
    padding: 80px 0;
    background-color: var(--highlight-bg); /* Ăn theo màu nền phụ của hệ thống */
    width: 100%;
    box-sizing: border-box;
    font-family: var(--font-stack); /* Ép nhận font Inter / Apple System */
    border-top: 1px solid var(--border-color);
}

.container-extension {
    max-width: 1400px; /* Đồng bộ độ rộng với .container chính của bạn */
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
}

/* Tiêu đề phân đoạn */
.section-title-center {
    text-align: center;
    margin-bottom: 48px;
}

.section-title-center h2 {
    font-size: 32px;
    color: #0c1c36; /* Đồng bộ màu tiêu đề chính của Hero */
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0 0 12px 0;
}

.section-title-center p {
    font-size: 16px;
    color: var(--text-muted);
    margin: 0;
}

/* Lưới hiển thị 2 cột */
.extensions-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
}

/* Thẻ tổng quan mang phong cách Stripe/Linear */
.extension-card {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 48px 32px 36px 32px;
    position: relative;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02), 0 4px 20px rgba(0, 0, 0, 0.01);
    border: 1px solid var(--border-color);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* Hiệu ứng di chuột chuẩn Mỹ */
.extension-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 66, 204, 0.06);
}

/* Thẻ kế toán làm nổi bật bằng tone màu Primary hệ thống */
.accounting-card {
    border: 1px solid rgba(0, 102, 204, 0.2); 
    background: linear-gradient(180deg, #ffffff 0%, rgba(0, 102, 204, 0.02) 100%);
}

/* Nhãn Badge */
.card-highlight-badge {
    position: absolute;
    top: -12px;
    left: 32px;
    background: #fff7ed; 
    color: #ea580c;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 16px;
    border-radius: 99px;
    border: 1px solid #ffedd5;
    letter-spacing: 0.02em;
}

.card-highlight-badge.gray {
    background: var(--highlight-bg);
    color: var(--text-muted);
    border: 1px solid var(--border-color);
}

.card-icon {
    font-size: 36px;
    margin-bottom: 20px;
    display: flex;
}

.card-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.card-content h3 {
    font-size: 22px;
    color: #0c1c36;
    margin: 0 0 6px 0;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.card-subtitle {
    font-size: 14px;
    color: var(--primary);
    font-weight: 600;
    margin: 0 0 28px 0;
}

/* Danh sách tính năng */
.card-feature-list {
    list-style: none;
    padding: 0;
    margin: 0 0 36px 0;
    flex-grow: 1;
}

.card-feature-list li {
    font-size: 14.5px;
    color: var(--text-main);
    line-height: 1.6;
    margin-bottom: 14px;
    display: flex;
    align-items: flex-start;
}

.card-feature-list li strong {
    color: #0c1c36;
    font-weight: 600;
}

.card-feature-list li .bullet {
    color: var(--tick-color);
    font-weight: 700;
    margin-right: 12px;
    font-size: 15px;
}

/* Nút liên kết chuẩn SaaS */
.btn-ext {
    display: inline-block;
    width: 100%;
    text-align: center;
    padding: 14px 24px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.btn-primary-gradient {
    background-color: var(--primary);
    color: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 102, 204, 0.15);
}

.btn-primary-gradient:hover {
    background-color: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 102, 204, 0.25);
}

.btn-secondary-outline {
    background-color: var(--bg-card);
    color: var(--text-main);
    border: 1px solid var(--border-color);
}

.btn-secondary-outline:hover {
    background-color: var(--highlight-bg);
    border-color: var(--text-muted);
}

/* Responsive mượt mà cho Máy tính bảng và Điện thoại */
@media (max-width: 1024px) {
    .extensions-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .section-title-center h2 {
        font-size: 26px;
    }
    .software-extensions-section {
        padding: 60px 0;
    }
    .extension-card {
        padding: 44px 24px 28px 24px;
    }
}

/* ==========================================
   EFFECT: CHỮ LẤP LÁNH TỰ NHIÊN TRÊN NỀN TỐI KHÔNG ĐỔI
   ========================================== */

td.label_ce {
    font-size: 16px !important; /* Tăng kích thước font chữ to lên (Bạn có thể sửa thành 18px nếu muốn to nữa) */
    font-weight: 800 !important; /* Đẩy độ đậm lên tối đa để chữ cực kỳ nét */
    /* Tạo dải màu nền chữ: Trắng -> Vàng kim sáng -> Trắng */
    background: linear-gradient(
        120deg, 
        #0066cc 20%,  /* Màu xanh primary chính của bạn */
        #eab308 50%,  /* Luồng sáng vàng tạo hiệu ứng lấp lánh */
        #0066cc 80%   /* Vuốt lại về xanh đậm */
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    
    /* Hiệu ứng quét sáng mượt mà chạy vô hạn */
    animation: textShimmer 3.5s linear infinite;
    display: table-cell; /* Đảm bảo giữ đúng thuộc tính của thẻ td */
}

/* Kịch bản chuyển động của luồng sáng */
@keyframes textShimmer {
    0% {
        background-position: 200% center;
    }
    100% {
        background-position: -200% center;
    }
}

.stt-cell {
    font-size: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23005A9C'%3E%3Cpath d='M19 13H5v-2h14v2zm-2-7H7v2h10V6zm2 12H5v-2h14v2z'/%3E%3C/svg%3E"); /* Màu xanh công nghiệp #005A9C */
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 18px;
}

.stt-cell-gia {
    font-size: 0;
    text-align: center;
    vertical-align: middle;
}

.stt-cell-gia::before {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    /* Icon Hình thoi mảnh siêu sang */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2.5' stroke='%23005A9C'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 4.5L4.5 12 12 19.5 19.5 12 12 4.5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.table-footer {
    text-align: center;      /* Căn giữa toàn bộ nội dung bên trong */
    margin-top: 24px;        /* Tạo khoảng cách thông thoáng với đáy bảng */
    margin-bottom: 16px;
}

.table-footer p {
    display: inline-block;   /* Để box bo sát theo độ dài của câu chữ */
    background-color: #fffbeb; /* Nền màu vàng kem nhạt, báo hiệu sự chú ý/cảnh báo nhẹ */
    border: 1px dashed #f59e0b; /* Viền nét đứt màu cam vàng tạo điểm nhấn tinh tế */
    border-radius: 6px;      /* Bo góc nhẹ cho hiện đại */
    padding: 8px 20px;       /* Tạo không gian thở cho chữ bên trong box */
    margin: 0;
    
    font-size: 14px;
    color: #b45309;          /* Màu chữ nâu cam đậm, vừa dễ đọc vừa nổi bật */
}

/* Tùy chỉnh riêng cho từ "Note:" để nó ngầu hơn */
.table-footer p i {
    font-style: normal;      /* Bỏ nghiêng mặc định của thẻ <i> */
}

.table-footer p i::before {
    content: "💡 ";          /* Chèn thêm emoji bóng đèn để tăng độ chú ý */
    font-style: normal;
}

.table-footer p strong {
    font-weight: 700;
}

.model-diagram-wrapper {
    width: 100%;
    max-width: 100%; /* Ép chết khung sơ đồ không được vượt quá độ rộng của bảng trên */
    margin: 20px auto;
    padding: 20px 10px;
    background: #ffffff;
    box-sizing: border-box;
}

/* Tạo lưới 5 cột bằng Grid tự động co giãn */
.diagram-grid {
    display: grid;
    grid-template-columns: minmax(140px, 180px) minmax(70px, 100px) minmax(150px, 190px) minmax(80px, 120px) minmax(150px, 190px);
    gap: 10px;
    align-items: center;
    justify-content: center; /* Giúp toàn bộ sơ đồ luôn nằm giữa */
}

/* Định dạng chung cho các thẻ Card */
.diagram-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px;
    font-family: sans-serif;
    box-sizing: border-box;
}

/* Style riêng cho cột máy trạm */
.clients-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.client-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
}

.client-card .card-icon {
    font-size: 20px;
}

.client-card .card-info strong {
    color: #334155;
    font-size: 11px;
    display: block;
}

.client-card .card-info span {
    font-size: 10px;
    color: #64748b;
}

/* Style riêng cho Máy Chủ */
.server-card {
    border: 1px solid #0284c7;
    background: #f0f9ff;
    text-align: center;
    padding: 16px 10px 24px 10px;
    position: relative;
}

.server-card strong {
    color: #0284c7;
    font-size: 13px;
    display: block;
}

.server-card .card-sub {
    font-size: 11px;
    color: #0369a1;
}

/* Tag thông báo khi tắt phần mềm */
.action-tag {
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: #ef4444;
    color: white;
    font-size: 9px;
    padding: 2px 6px;
    border-radius: 10px;
    font-weight: bold;
    white-space: nowrap;
}

/* Style riêng cho Google Drive */
.drive-card {
    border: 1px solid #16a34a;
    background: #f0fdf4;
    text-align: center;
    padding: 16px 10px;
}

.drive-card strong {
    color: #15803d;
    font-size: 13px;
    display: block;
}

.drive-card .card-sub {
    font-size: 11px;
    color: #166534;
}

.big-icon {
    font-size: 32px;
    display: block;
    margin-bottom: 6px;
}

/* Định dạng các mũi tên điều hướng */
.diagram-arrow {
    text-align: center;
    font-family: sans-serif;
    font-size: 11px;
    font-weight: bold;
    line-height: 1.2;
}

.arrow-blue { color: #0284c7; }
.arrow-green { color: #16a34a; }

.arrow-symbol {
    font-size: 18px;
    margin-top: 2px;
}

/* Responsive: Trên màn hình điện thoại, tự động xếp dọc xuống */
@media (max-width: 768px) {
    .diagram-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    .arrow-symbol {
        transform: rotate(90deg); /* Xoay mũi tên chỉ xuống dưới */
        margin: 5px 0;
    }
    .server-card {
        padding-bottom: 16px;
    }
}

/* --- DANH SÁCH KHỐI TIỆN ÍCH --- */
.utilities-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex-grow: 1;
}

.utility-item {
    display: flex;
    justify-content: space-between;
    align-items: center; /* Căn giữa chữ và nút theo chiều dọc vuông vắn */
    background: #ffffff;
    border: 1px solid var(--border-color);
    padding: 18px 24px; /* Tăng khoảng cách đệm bên trong box */
    border-radius: 12px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.utility-item:hover {
    border-color: rgba(0, 102, 204, 0.3);
    background: rgba(0, 102, 204, 0.01);
}

.utility-info {
    display: flex;
    align-items: center; /* Giúp dấu tích xanh thẳng hàng với tâm chữ */
    gap: 14px;
    flex: 1;
    white-space: nowrap; /* ĐỒNG BỘ: Tuyệt đối giữ nguyên dòng chữ, không cho xuống hàng */
    padding-right: 30px; /* Tạo khoảng cách an toàn rộng rãi trước khi chạm đến nút */
}

.utility-info .bullet {
    color: var(--tick-color);
    font-weight: 700;
    font-size: 18px;
}

.utility-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.utility-text strong {
    font-size: 15px;
    color: #0c1c36;
    font-weight: 700;
    text-transform: uppercase;
}

.utility-desc {
    font-size: 13.5px;
    color: var(--text-muted);
    font-style: italic;
}

/* --- NÚT XEM NGAY TO VÀ RỘNG NẰM BÊN PHẢI --- */
.btn-secondary-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    color: var(--primary);
    border: 1.5px solid var(--primary);
    padding: 12px 40px; /* Làm nút cao hơn và bè ngang rộng hẳn ra */
    border-radius: 8px;
    white-space: nowrap;
    min-width: 150px; /* Đảm bảo nút luôn có một độ rộng tối thiểu cố định rất đẹp */
    transition: all 0.2s ease;
}

.btn-secondary-outline:hover {
    background-color: var(--primary);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.15);
}

/* 1. CẬP NHẬT LẠI CLASS CŨ: Bắt buộc thêm 2 dòng này để vệt sáng không tràn ra ngoài */
.btn-secondary-outline {
    position: relative;
    overflow: hidden;
}

/* 2. THÊM MỚI: Tạo vệt sáng quét qua */
.btn-secondary-outline::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-25deg); /* Nghiêng vệt sáng */
    animation: shineCallToAction 3s infinite ease-in-out;
}

/* Định nghĩa chuyển động quét sáng */
@keyframes shineCallToAction {
    0% { left: -150%; }
    30% { left: 150%; } /* Quét qua nhanh trong 30% đầu tiên */
    100% { left: 150%; } /* Nghỉ ngơi ở các giây còn lại để không bị rối mắt */
}

/* Thêm hiệu ứng rung lắc vào nút */
.btn-secondary-outline {
    animation: wiggleCallToAction 4s infinite ease-in-out;
}

/* Định nghĩa chuyển động lắc */
@keyframes wiggleCallToAction {
    0%, 90%, 100% { transform: rotate(0deg); }
    92% { transform: rotate(-3deg); }
    94% { transform: rotate(3deg); }
    96% { transform: rotate(-2deg); }
    98% { transform: rotate(2deg); }
}

/* Khi di chuột vào thì dừng lắc */
.btn-secondary-outline:hover {
    animation: none;
    background-color: var(--primary);
    color: #ffffff;
}

/* ==========================================================================
   HIỆU ỨNG MỜI CHÀO CAO CẤP CHO CÁC NÚT HÀNH ĐỘNG (CTA BUTTONS)
   ========================================================================== */

/* 1. Cấu hình bắt buộc cho các nút để vệt sáng không bị tràn ra ngoài */
.btn-secondary-outline,
.cta-btn.primary {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Kích hoạt hiệu ứng nhịp thở tự động */
    animation: ctaPulseEffect 2.5s infinite ease-in-out;
}

/* 2. Tạo vệt sáng bóng bẩy quét qua bề mặt nút */
.btn-secondary-outline::after,
.cta-btn.primary::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        to right, 
        rgba(255, 255, 255, 0) 0%, 
        rgba(255, 255, 255, 0.5) 50%, 
        rgba(255, 255, 255, 0) 100__
    );
    transform: skewX(-30deg); /* Độ nghiêng của vệt sáng */
    
    /* Kích hoạt hiệu ứng quét sáng lặp lại sau mỗi 3.5 giây */
    animation: ctaShineEffect 3.5s infinite ease-in-out;
}

/* 3. Định nghĩa chuyển động Nhịp thở (Pulse) - Co giãn & tỏa hào quang nhẹ */
@keyframes ctaPulseEffect {
    0% {
        transform: scale(1);
        box-shadow: 0 4px 10px rgba(0, 102, 204, 0.1);
    }
    50% {
        transform: scale(1.03); /* Phóng to nhẹ 3% để thu hút ánh nhìn */
        box-shadow: 0 6px 20px rgba(0, 102, 204, 0.25); /* Tỏa bóng mờ theo tông màu chủ đạo */
    }
    100% {
        transform: scale(1);
        box-shadow: 0 4px 10px rgba(0, 102, 204, 0.1);
    }
}

/* 4. Định nghĩa chuyển động Vệt sáng (Shine) */
@keyframes ctaShineEffect {
    0% { left: -150%; }
    20% { left: 150%; } /* Quét qua nhanh chóng ở 20% thời gian đầu */
    100% { left: 150%; } /* Giữ khoảng lặng ở thời gian còn lại để tránh gây mỏi mắt */
}

/* 5. Tương tác khi người dùng Di chuột vào (Hover) */
.btn-secondary-outline:hover,
.cta-btn.primary:hover {
    /* Tạm dừng chuyển động tự động khi khách đang rê chuột vào để họ dễ bấm */
    animation: none; 
    transform: scale(1.05) translateY(-2px); /* Nhấc nhẹ nút lên */
    box-shadow: 0 8px 25px rgba(0, 66, 204, 0.3);
}

.btn-secondary-outline:hover::after,
.cta-btn.primary:hover::after {
    animation: none; /* Tắt vệt sáng khi hover */
}

/* ==========================================================================
   HỆ THỐNG CUỘN ĐỘC LẬP & CỐ ĐỊNH TIÊU ĐỀ BẢNG (STICKY ENGINE)
   ========================================================================== */

/* 1. Khung chứa bảng - Bắt buộc giới hạn chiều cao để kích hoạt cuộn dọc độc lập */
.table-container {
    max-height: 75vh;          /* Chiều cao tối đa bằng 75% màn hình trình duyệt */
    overflow-y: auto;          /* Tạo thanh cuộn dọc riêng cho bảng */
    overflow-x: auto;          /* Tạo thanh cuộn ngang khi xem trên điện thoại */
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    position: relative;
    background: #ffffff;
}

/* Đảm bảo đường viền bảng hiển thị dạng khối không tách rời khi sticky di chuyển */
.comparison-table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
}

/* 2. CỐ ĐỊNH THEO CHIỀU DỌC: Giữ dòng chứa nút "Tải miễn phí" đứng im ở đỉnh bảng */
.comparison-table thead tr.product-headers th {
    position: sticky;
    top: 0;
    z-index: 10;               /* Nằm ở tầng trung cấp, đè lên các dòng dữ liệu thông thường */
    background-color: #ffffff; /* Đổ màu nền đặc để chữ tháp dưới cuộn lên không bị lộ bóng */
    border-bottom: 2px solid #cbd5e1;
    padding: 12px 8px;
}

/* 3. CỐ ĐỊNH Ô GÓC GIAO NHAU: Ô "Ma Trận Tính Năng" */
/* Ô này cực kỳ đặc biệt, vừa phải dính chặt ở đỉnh khi cuộn dọc, vừa dính ở mép trái khi cuộn ngang */
.comparison-table thead tr.product-headers th.sticky-col.main-header-cell {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 30;               /* Tầng cao nhất hệ thống, không thành phần nào được phép đè lên */
    background-color: #f8fafc; /* Màu nền xám/xanh rất nhẹ để phân biệt vùng tiêu đề chính */
}

/* 4. CỐ ĐỊNH THEO CHIỀU NGANG: Giữ cột tên tính năng đứng im khi cuộn ngang (Mobile) */
.comparison-table td.sticky-col {
    position: sticky;
    left: 0;
    z-index: 5;                /* Nằm dưới tầng tiêu đề chính (10) nhưng trên tầng dữ liệu dấu tích */
    background-color: #ffffff; /* Nền trắng che khuất dữ liệu dấu tích chui ra phía sau */
    border-right: 1px solid #e2e8f0;
}

/* 5. XỬ LÝ DÒNG TIÊU ĐỀ PHÂN NHÓM (HỆ THỐNG, DANH MỤC, BÁN HÀNG...) */
/* Khi cuộn dọc: Phải chui DƯỚI nút "Tải miễn phí" (z-index: 6 < z-index: 10) */
/* Khi cuộn ngang: Phải cố định chữ dính lề trái để không bị cuộn mất chữ */
.comparison-table tbody tr.group-header-row td.sticky-row-group {
    position: sticky;
    left: 0;
    z-index: 6;                /* Thấp hơn tiêu đề (10) để tự chui xuống dưới khi cuộn lên */
    background-color: #f1f5f9; /* Giữ nguyên màu xám đặc trưng của dòng phân nhóm */
    font-weight: 700;
    text-align: left;
    padding: 10px 15px;
    border-bottom: 1px solid #cbd5e1;
}

/* 6. Hiệu ứng thẩm mỹ (Tùy chọn): Tạo đường line phân cách rõ rệt cho cột cố định */
.comparison-table .sticky-col::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: #cbd5e1;
}

/* ==========================================================================
   CSS DÀNH RIÊNG CHO BẢNG BÁO GIÁ TÁCH RỜI INDEPENDENT
   ========================================================================== */

.pricing-table-container {
    margin-top: 40px;
    margin-bottom: 30px;
    background: #ffffff;
    border: 2px solid #3b82f6; /* Viền xanh làm nổi bật khối báo giá */
    border-radius: 12px;
    overflow-x: auto;          /* Hỗ trợ cuộn ngang trên thiết bị di động */
    box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.1);
}

.pricing-table-title {
    background-color: #3b82f6;
    color: #ffffff;
    padding: 14px 20px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 10px 10px 0 0;
}

.pricing-table-title h3 {
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pricing-standalone-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}

/* Header của bảng báo giá */
.pricing-standalone-table th {
    background-color: #f8fafc;
    color: #1e293b;
    font-weight: 700;
    padding: 14px 12px;
    border-bottom: 2px solid #cbd5e1;
    text-align: center;
}

/* Cố định cột đầu tiên (Gói giải pháp) khi cuộn ngang trên Mobile */
.pricing-standalone-table .sticky-col-pricing {
    position: sticky;
    left: 0;
    background-color: #f8fafc;
    font-weight: 600;
    color: #334155;
    text-align: left;
    padding-left: 20px;
    min-width: 200px;
    border-right: 1px solid #e2e8f0;
    z-index: 2;
}

.pricing-standalone-table td {
    padding: 14px 12px;
    border-bottom: 1px solid #e2e8f0;
    text-align: center;
}

/* Hàng Vĩnh viễn */
.infinite-row {
    background-color: #f8fafc;
}

/* Cột Kiot được highlight nổi bật */
.pricing-standalone-table .highlight-column {
    background-color: #fefce8; /* Màu vàng nhạt sang trọng */
    color: #854d0e;
}

/* Ô hiển thị giá tiền */
.price-val {
    color: #0f172a;
    font-size: 16px;
}
.font-weight-bold {
    font-weight: 700;
}

/* Ô dòng máy Client gộp dòng rộng rãi */
.pricing-standalone-table td.client-desc {
    text-align: left;
    padding-left: 20px;
    background-color: #f8fafc;
    color: #475569;
    font-size: 14px;
}

/* Footer ghi chú của báo giá */
.table-footer-pricing {
    padding: 12px 20px;
    background-color: #fff8e1;
    border-top: 1px solid #ffe082;
    color: #b78103;
    font-size: 14px;
    border-radius: 0 0 10px 10px;
}
.table-footer-pricing p {
    margin: 0;
}

/* Hàng miễn phí CE */
.pricing-row-ce {
    background-color: #f0fdf4; /* Nền xanh lá cực nhẹ tạo cảm giác an tâm/miễn phí */
}
.pricing-standalone-table td.label-ce {
    background-color: #f0fdf4 !important;
    color: #166534;
}

/* ==========================================================================
   HIỆU ỨNG NHẤP NHÁY ĐỔI MÀU THU HÚT CHÚ Ý (BLINK ANIMATION)
   ========================================================================== */

.blink-text {
    /* Chạy hiệu ứng tên là 'soft-blink', kéo dài 2 giây, lặp vô hạn, mượt mà */
    animation: soft-blink 2s infinite ease-in-out; 
    font-weight: 700; /* Làm chữ đậm lên để nhìn rõ hơn */
}

@keyframes soft-blink {
    0%, 100% {
        color: #166534;        /* Màu xanh lá đậm nguyên bản */
        transform: scale(1);   /* Kích thước bình thường */
    }
    50% {
        color: #dc2626;        /* Đổi sang màu đỏ rực để gây chú ý cực mạnh */
        text-shadow: 0 0 8px rgba(220, 38, 38, 0.3); /* Tạo hiệu ứng phát sáng nhẹ xung quanh chữ */
    }
}
/* Định dạng khoảng cách và kích thước cho icon trong bảng giá */
.pricing-icon {
    margin-right: 8px;  /* Tạo khoảng cách nhỏ giữa icon và chữ */
    font-size: 1.1em;   /* Cho icon to hơn chữ một chút để nhìn rõ nét */
    display: inline-block;
    vertical-align: middle;
}

/* ==========================================================================
   BỔ SUNG 1: Cấu trúc hiển thị cho Khối Tiện ích (Cột bên phải)
   ========================================================================== */
.utilities-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex-grow: 1;
    margin-bottom: 12px;
}

.utility-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: var(--highlight-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    gap: 16px;
}

.utility-info {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.utility-info .bullet {
    color: var(--tick-color);
    font-weight: 700;
    font-size: 15px;
    margin-top: 2px;
}

.utility-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.utility-text strong {
    font-size: 15px;
    color: #0c1c36;
    font-weight: 700;
}

.utility-desc {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.4;
}

/* Định dạng riêng nút tìm hiểu trong danh sách để không bị vỡ chữ */
.utility-item .btn-secondary-outline {
    width: auto;
    white-space: nowrap;
    padding: 10px 18px;
    font-size: 13px;
}

.card-action {
    margin-top: auto; /* Đẩy nút của card kế toán xuống sát đáy */
}


/* ==========================================================================
   BỔ SUNG 2: Media Query xử lý riêng cho Di Động (Dưới 600px)
   ========================================================================== */
/* ==========================================================================
   THAY THẾ TOÀN BỘ ĐOẠN MEDIA QUERY MOBILE (DƯỚI 600PX) CỦA BẠN BẰNG ĐOẠN NÀY
   ========================================================================== */
@media (max-width: 600px) {
    /* Thu hẹp khoảng cách viền để tối ưu không gian hiển thị */
    .container-extension {
        padding: 0 12px; 
    }
    
    .software-extensions-section {
        padding: 40px 0; /* Giảm padding section trên/dưới */
    }

    .section-title-center {
        margin-bottom: 32px;
        padding: 0 8px;
    }

    .section-title-center h2 {
        font-size: 22px;
        line-height: 1.3;
    }
    
    .section-title-center p {
        font-size: 13px;
    }

    /* Giảm ép padding của Card - Đây là mấu chốt giúp chữ không bị bóp nghẹt */
    .extension-card {
        padding: 36px 16px 20px 16px !important; /* Thu nhỏ padding trái/phải xuống 16px */
        border-radius: 12px;
        overflow: hidden; /* Đảm bảo nội dung không đè lên bo góc */
    }

    .card-highlight-badge {
        left: 16px; /* Căn chỉnh lại badge theo padding mới */
        padding: 4px 12px;
        font-size: 11px;
    }

    .card-content h3 {
        font-size: 17px; /* Thu nhỏ tiêu đề card một chút để vừa 1 dòng */
        line-height: 1.4;
    }

    .card-subtitle {
        font-size: 13px;
        margin-bottom: 20px;
    }

    /* Tối ưu danh sách tính năng list-item */
    .card-feature-list {
        margin-bottom: 24px;
    }

    .card-feature-list li {
        font-size: 13.5px; /* Hạ size chữ xuống một chút để khít dòng */
        line-height: 1.5;
        margin-bottom: 10px;
    }

    .card-feature-list li .bullet {
        margin-right: 8px;
        font-size: 13px;
    }

    /* Ép các nút bấm hành động hiển thị gọn gàng */
    .btn-ext, .btn-secondary-outline {
        padding: 12px 16px;
        font-size: 13px;
    }

    /* Đưa các hàng tiện ích về dạng dọc trên mobile */
    .utility-item {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 12px;
    }

    .utility-info {
        gap: 8px;
    }

    .utility-text strong {
        font-size: 14px;
    }

    .utility-desc {
        font-size: 12px;
    }

    .utility-item .btn-secondary-outline {
        width: 100% !important;
        text-align: center;
        box-sizing: border-box;
    }
}

/* ==========================================================================
   SỬA LỖI BADGE BỊ CẮT TRÊN MOBILE
   ========================================================================== */
@media (max-width: 600px) {
    /* 1. Đảm bảo phần section cha không chặn các phần tử nhô ra ngoài */
    .software-extensions-section,
    .container-extension {
        overflow: visible !important;
    }

    /* 2. Tạo khoảng cách giữa các thẻ card để không đè lên badge của nhau */
    .extensions-grid {
        gap: 48px !important; /* Tăng khoảng cách để nhường chỗ cho badge nhô lên */
    }

    /* 3. Đẩy nhẹ nội dung card xuống một chút để badge nằm cân đối */
    .extension-card {
        margin-top: 12px; /* Tạo khoảng lùi an toàn */
        overflow: visible !important; /* Ép card không được xén badge */
    }

    /* 4. Điều chỉnh vị trí badge trên mobile cho khít hẳn vào góc */
    .card-highlight-badge {
        top: -14px !important; /* Đẩy nhẹ lên để không dính sát vào border của card */
        z-index: 10; /* Đảm bảo luôn nổi lên trên cùng */
    }
}

@media (max-width: 768px) {
    /* 1. Cho phép khung chứa cuộn ngang và dọc trơn tru */
    .table-container {
        width: 100% !important;
        max-height: 80vh; 
        overflow: auto !important;
        display: block !important;
        -webkit-overflow-scrolling: touch;
    }

    /* 2. Giữ kết cấu bảng co giãn tự nhiên */
    .comparison-table {
        display: table !important;
        width: auto !important;
        min-width: max-content !important;
        border-collapse: separate !important; 
        border-spacing: 0;
    }

    /* ==========================================================================
       DÒNG TIÊU ĐỀ ĐẦU TIÊN (STICKY TOP)
       ========================================================================== */
    .comparison-table thead tr.product-headers th {
        position: -webkit-sticky !important;
        position: sticky !important;
        top: 0 !important; 
        background-color: #ffffff !important;
        z-index: 25 !important; 
        border-bottom: 2px solid var(--border-color, #e2e8f0) !important;
    }

    /* ==========================================================================
       CỐ ĐỊNH 2 CỘT TÍNH NĂNG BÊN TRÁI (STICKY LEFT)
       ========================================================================== */
    
    /* --- CỘT 1 (Ô số / Icon) --- */
    .comparison-table td:nth-child(1) {
        position: -webkit-sticky !important;
        position: sticky !important;
        left: 0 !important;
        z-index: 10 !important;
        background-color: #ffffff !important;
        width: 38px !important; 
        min-width: 38px !important;
        max-width: 38px !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }

    /* --- CỘT 2 (Ô chữ tên tính năng) --- */
    .comparison-table td:nth-child(2) {
        position: -webkit-sticky !important;
        position: sticky !important;
        left: 38px !important; 
        z-index: 10 !important;
        background-color: #ffffff !important;
        width: 50vw !important; 
        min-width: 160px !important;
        max-width: 200px !important;
        box-shadow: 4px 0 8px rgba(0, 0, 0, 0.06) !important; 
        white-space: normal !important;
        text-align: left !important;
        box-sizing: border-box !important;
    }

    /* --- Ô GIAO ĐIỂM (Góc trên cùng bên trái) --- */
    .comparison-table th.sticky-col.main-header-cell {
        position: -webkit-sticky !important;
        position: sticky !important;
        top: 0 !important;
        left: 0 !important;
        z-index: 30 !important; 
        background-color: #ffffff !important;
        width: calc(38px + 50vw) !important;
        min-width: 198px !important;
        box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.06) !important;
        box-sizing: border-box !important;
    }

    /* ==========================================================================
       CÁC CỘT PHIÊN BẢN (V1, V2, V3...) TRƯỢT NGANG (45% MÀN HÌNH)
       ========================================================================== */
    .product-headers th:not(:first-child) {
        width: 45vw !important; 
        min-width: 130px !important;
        max-width: 160px !important;
        box-sizing: border-box !important;
    }

    .comparison-table tbody tr:not(.group-header-row) td:nth-child(n+3) {
        width: 45vw !important;
        min-width: 130px !important;
        max-width: 160px !important;
        text-align: center !important;
        position: relative;
        z-index: 1; 
        box-sizing: border-box !important;
    }

    /* ==========================================================================
       FIX TRIỆT ĐỂ: HÀNG TIÊU ĐỀ NHÓM (HỆ THỐNG, DANH MỤC...)
       ========================================================================== */
    .group-header-row td {
        position: -webkit-sticky !important;
        position: sticky !important;
        left: 0 !important; /* Ghim chặt bên trái không cho trượt */
        z-index: 15 !important;
        background-color: #f8fafc !important;
        
        /* Ép ô này hoạt động như một khối độc lập để hiển thị trọn vẹn chữ */
        display: inline-block !important; 
        width: 100vw !important; /* Phủ kín toàn bộ bề ngang màn hình điện thoại */
        min-width: 100vw !important;
        
        box-sizing: border-box !important;
        text-align: left !important;
        padding: 12px 16px !important; 
        font-weight: bold !important;
        font-size: 14px !important;
        white-space: nowrap !important; /* Khóa chữ trên một hàng */
        color: #000000 !important;
    }

    /* ==========================================================================
       TỐI ƯU TEXT VÀ NÚT BẤM
       ========================================================================== */
    .table-title { font-size: 14px !important; font-weight: 800 !important; line-height: 1.3 !important; }
    .table-subtitle { font-size: 10px !important; }
    .version-name { font-size: 14px !important; font-weight: 700 !important; margin-bottom: 6px !important; }

    .cta-btn.primary {
        display: inline-block !important;
        padding: 6px 10px !important;
        font-size: 11px !important;
        white-space: nowrap !important;
        width: 90% !important;
        box-sizing: border-box !important;
        border-radius: 4px !important;
    }

    .comparison-table th, 
    .comparison-table td {
        padding: 12px 6px !important;
        font-size: 13px !important;
    }
}
@media (max-width: 768px) {
    /* ==========================================================================
       THU NHỎ NÚT CTA TRÊN MOBILE
       ========================================================================== */
    .cta-btn.primary {
        display: inline-block !important;
        /* Giảm padding tối đa để nút thắt chặt lại quanh chữ */
        padding: 4px 8px !important; 
        font-size: 11px !important;
        font-weight: 600 !important;
        white-space: nowrap !important; /* Giữ chữ trên 1 hàng, không cho rớt dòng */
        
        /* Giới hạn độ rộng của nút */
        width: auto !important; 
        max-width: 95px !important; /* Ép nút không được vượt quá độ rộng này */
        
        box-sizing: border-box !important;
        border-radius: 4px !important;
        text-align: center !important;
    }
}

/*Bảng báo giá*/
@media (max-width: 768px) {
    /* Khóa chặt tiêu đề 💰 BÁO GIÁ luôn đứng im ở lề trái */
    .pricing-table-title {
        position: -webkit-sticky !important;
        position: sticky !important;
        left: 0 !important; /* Giữ cố định lề trái trước khi trượt */
        top: 0 !important;
        
        /* Ép diện tích hiển thị cố định theo chiều rộng màn hình thiết bị */
        display: block !important;
        width: 90vw !important;
        max-width: 90vw !important;
        
        z-index: 99 !important; /* Tầng ưu tiên cao nhất để đè lên mọi thứ khi trượt */
        box-sizing: border-box !important;

        margin: 0 !important;
    }

    .table-footer-pricing {
        position: -webkit-sticky !important;
        position: sticky !important;
        left: 0 !important; /* Giữ cố định lề trái trước khi trượt */
        top: 0 !important;
        
        /* Ép diện tích hiển thị cố định theo chiều rộng màn hình thiết bị */
        display: block !important;
        width: 90vw !important;
        max-width: 90vw !important;
        
        z-index: 99 !important; /* Tầng ưu tiên cao nhất để đè lên mọi thứ khi trượt */
        box-sizing: border-box !important;

        margin: 0 !important;
    }
}