/* --- Reset & Core Layout --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1.6; /* Chỉnh lại line-height từ 1.75 xuống 1.6 cho khít giống ảnh mẫu */
    color: #e2e8f0; 
    background-color: #0d0e12; 
    -webkit-font-smoothing: antialiased;
    letter-spacing: -0.01em; /* Bóp nhẹ khoảng cách chữ toàn trang */
    scroll-behavior: smooth;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* --- Header Section --- */
.tos-header {
    background-color: #0d0e12;
    padding: 80px 0 40px 0;
    border-bottom: 1px solid #1f222a;
}

.tos-header .effective-date {
    color: #64748b;
    font-size: 1rem;
    font-weight: 500;
    margin-top: 8px;
}

/* --- Cấu trúc Logo "Legal Hub" chuẩn Fullstack --- */
.brand-logo {
    font-family: 'Playfair Display', Georgia, serif; 
    font-size: 3.5rem; 
    font-weight: 900; 
    letter-spacing: -0.04em; 
    margin-bottom: 4px;
    display: inline-block; 
    position: relative;
    
    /* Đổ màu gradient ánh kim */
    background: linear-gradient(135deg, #c5a059 0%, #f1dc9e 40%, #ffffff 50%, #e6ca83 65%, #b38f43 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% auto;
}

/* Chữ L đầu tiên */
.brand-logo .slash-char {
    position: relative;
    display: inline-block;
    padding-right: 6px; /* Tạo khoảng trống nhẹ cho chân chữ Serif */
    /* Ép chữ L phải nhận màu gradient, không bị ảnh hưởng lỗi hiển thị */
    background: inherit;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Tạo nhát cắt "Slash" thanh mảnh thực sự xuyên qua chữ L */
.brand-logo .slash-char::after {
    content: "";
    position: absolute;
    left: -5px;          /* Đẩy lùi qua mép trái chữ L một chút */
    top: 50%;            /* Nằm ngay giữa thân chữ L */
    width: calc(100% + 10px); /* Độ dài đường cắt bao phủ hết chữ L */
    height: 3px;         /* Độ mỏng của nét cắt tinh tế */
    background-color: #0d0e12; /* Màu đen trùng màu nền để tạo hiệu ứng đứt đoạn */
    transform: rotate(-20deg); /* Xoay nghiêng góc để thành vệt chém */
    
    /* QUAN TRỌNG: Ngăn chặn thuộc tính transparent của thằng cha ăn vào đường cắt này */
    -webkit-text-fill-color: initial !important; 
}

/* XÓA HOẶC KHÓA ĐOẠN REPEAT ::AFTER THỨ 2 Ở DƯỚI NÀY TRONG FILE CŨ CỦA BẠN */
/* (Trong file CSS cũ của bạn có tới 2 đoạn .brand-logo .slash-char::after chồng lên nhau, hãy xóa đoạn thứ 2 đi nhé) */

/* Tạo đường rãnh cắt vô hình (màu đen trùng với nền body) đè lên chữ L để tạo hiệu ứng "Slash" */
.brand-logo .slash-char::after {
    content: "";
    position: absolute;
    left: 0;
    top: 38%; /* Vị trí rãnh cắt */
    width: 100%;
    height: 8%; /* Độ rộng của nét cắt */
    background-color: #0d0e12; /* Đè màu nền lên để tạo vết cắt tự nhiên ít nhất 90% theo ảnh */
}

.inner-wrapper {
    display: flex;
    gap: 48px;
}

/* --- Navigation Sidebar --- */
.tos-sidebar {
    flex: 1;
    max-width: 300px;
    position: sticky;
    top: 40px;
    height: calc(100vh - 80px);
    overflow-y: auto;
    padding-right: 10px;
}

.tos-sidebar::-webkit-scrollbar {
    width: 4px;
}

.tos-sidebar::-webkit-scrollbar-thumb {
    background: #2d3139;
    border-radius: 4px;
}

.tos-sidebar ul {
    list-style: none;
    border-left: 2px solid #1f222a;
    padding-left: 0;
}

/* Nhãn phân chia thương hiệu lớn trên Sidebar */
.sidebar-category {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #94a3b8;
    font-weight: 700;
    padding: 16px 16px 8px 16px;
}

.tos-sidebar a {
    text-decoration: none;
    color: #64748b;
    font-weight: 400;
    font-size: 0.9rem;
    padding: 6px 16px;
    display: block;
    border-left: 2px solid transparent;
    margin-left: -2px;
    transition: all 0.2s ease-in-out;
}

.tos-sidebar a:hover {
    color: #f8fafc;
    border-left-color: #475569;
}

.tos-sidebar a.active {
    color: #ffffff;
    font-weight: 700;
    border-left-color: #ffffff;
    padding-left: 20px;
}

/* --- Content Panel --- */
.tos-content {
    flex: 3;
    background: #16171d; 
    padding: 56px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    border: 1px solid #22252e;
}

.tos-wrapper {
    margin-top: 48px;
    margin-bottom: 48px;
}

/* Tiêu đề phân nhóm lớn trong khung content */
/* Tiêu đề phân nhóm lớn trong khung content */
.tos-brand-divider {
    border-bottom: 2px solid #c5a059; /* Đổi đường gạch ngang bên dưới thành màu vàng luôn cho đồng bộ */
    padding-bottom: 12px;
    margin-bottom: 40px;
}

.tos-brand-divider h2 {
    font-size: 2rem;
    color: #e6ca83; /* Đổi từ màu trắng #ffffff sang màu vàng Gold sang trọng */
    font-weight: 700;
    letter-spacing: -0.02em;
}

.tos-section {
    margin-bottom: 56px;
    scroll-margin-top: 60px;
}

.tos-section:last-child {
    margin-bottom: 0;
}

/* --- Tinh chỉnh tiêu đề khít và có độ dày giống ảnh mẫu 100% --- */
.tos-content h3 {
    font-size: 1.625rem; 
    color: #ffffff; 
    margin-bottom: 20px;
    
    /* SỬA TẠI ĐÂY: Hạ từ 700 xuống 400 (hoặc 500 nếu muốn rõ nét hơn một chút trên nền tối) */
    font-weight: 400; 
    
    letter-spacing: -0.025em; 
    line-height: 1.2;
}

.tos-content p {
    margin-bottom: 18px;
    color: #cbd5e1;
    text-align: left; /* Đã chuyển sang căn lề trái tự nhiên, giúp đọc văn bản mượt mà hơn */
}

.tos-content ul {
    list-style-type: disc;
    margin-left: 24px;
    margin-bottom: 20px;
    color: #cbd5e1;
}

.tos-content li {
    margin-bottom: 10px;
}

.uppercase-content p {
    text-transform: uppercase;
    font-size: 0.95rem;
    color: #cbd5e1; /* Màu chữ chuẩn giúp dịu mắt và giống mẫu */
    letter-spacing: 0.01em; /* Khi in hoa hoàn toàn thì giãn nhẹ chữ ra một chút để dễ đọc */
    line-height: 1.65;
}

.alert-box {
    padding: 20px 24px;
    margin: 24px 0;
    border-radius: 8px;
    font-size: 0.95rem;
}

.alert-danger {
    background-color: #2a1415;
    border-left: 4px solid #ef4444;
    color: #fca5a5;
}

.alert-warning {
    background-color: #2c1a10;
    border-left: 4px solid #f97316;
    color: #fed7aa;
}

/* ================= KHU VỰC FORM THÔNG TIN & CAM KẾT CUỐI TRANG ================= */
.onboarding-container {
    background-color: #090a0f;
    padding: 64px 0;
    border-top: 1px solid #1f222a;
}

.form-card {
    background: #16171d;
    padding: 48px;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
    border: 1px solid #22252e;
}

.form-card h2 {
    font-size: 2rem;
    margin-bottom: 8px;
    font-weight: 700;

    /* Thêm hiệu ứng đổ màu Gradient ánh kim cao cấp tại đây */
    background: linear-gradient(135deg, #c5a059 0%, #f1dc9e 50%, #e6ca83 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block; /* Giúp dải màu bo sát vừa vặn theo độ dài dòng chữ */
}

.form-subtitle {
    color: #64748b;
    margin-bottom: 36px;
    font-size: 1rem;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 36px;
}

.full-width {
    grid-column: span 2;
}

.input-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.input-group label {
    font-size: 0.9rem;
    font-weight: 600;
    color: #94a3b8;
}

.input-group input {
    padding: 14px 16px;
    font-size: 1rem;
    border: 1px solid #2d3139;
    border-radius: 8px;
    font-family: inherit;
    color: #ffffff;
    transition: all 0.2s ease;
    background-color: #0d0e12;
}

.input-group input:focus {
    outline: none;
    border-color: #ffffff;
    background-color: #16171d;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.05);
}

.legal-consent-box {
    display: flex;
    flex-direction: column;
    gap: 20px;
    background-color: #0d0e12;
    padding: 24px;
    border-radius: 12px;
    border: 1px solid #22252e;
    margin-bottom: 36px;
}

.checkbox-container {
    display: block;
    position: relative;
    padding-left: 36px;
    cursor: pointer;
    font-size: 0.95rem;
    color: #cbd5e1;
    user-select: none;
    line-height: 1.6;
}

.checkbox-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkmark {
    position: absolute;
    top: 3px;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: #16171d;
    border: 2px solid #475569;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.checkbox-container:hover input ~ .checkmark {
    border-color: #94a3b8;
}

.checkbox-container input:checked ~ .checkmark {
    background-color: #ffffff;
    border-color: #ffffff;
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.checkbox-container input:checked ~ .checkmark:after {
    display: block;
}

.checkbox-container .checkmark:after {
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid #0d0e12;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.form-action {
    margin-top: 32px;
    text-align: center;
}

/* Nút bấm lớn - Trạng thái mặc định (Màu tối/Chưa active hoặc Màu vàng sang trọng khi Active) */
.primary-submit-btn {
    background: linear-gradient(135deg, #c5a059 0%, #e6ca83 50%, #b38f43 100%); /* Màu vàng kim loại mặc định */
    color: #0d0e12; /* Chữ màu tối trên nền vàng để dễ đọc, tạo độ tương phản cao */
    border: none;
    padding: 16px 40px;       
    font-size: 16pt;          
    font-weight: 700; /* Tăng độ đậm để chữ sắc nét hơn trên nền kim loại */
    border-radius: 8px;       
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Hiệu ứng chuyển động mượt mà hơn */
    box-shadow: 0 4px 20px rgba(179, 143, 67, 0.3);
    display: inline-block;    
}

/* HIỆU ỨNG HOVER: Chuyển sang màu vàng kim loại có độ bóng và hiệu ứng rực sáng */
.primary-submit-btn:hover:not(:disabled) {
    /* Đảo chiều gradient và tăng độ sáng ở giữa để tạo cảm giác ánh kim phản chiếu ánh sáng */
    background: linear-gradient(135deg, #e6ca83 0%, #ffffff 30%, #c5a059 70%, #b38f43 100%);
    background-size: 200% auto;
    background-position: right center; /* Tạo hiệu ứng vệt sáng trượt nhẹ */
    color: #000000;
    transform: translateY(-2px); /* Nổi lên rõ hơn một chút */
    box-shadow: 0 6px 24px rgba(230, 202, 131, 0.6); /* Đổ bóng phát sáng màu vàng kim */
}

/* Hiệu ứng khi click vào nút */
.primary-submit-btn:active:not(:disabled) {
    transform: translateY(1px);
    box-shadow: 0 2px 10px rgba(179, 143, 67, 0.4);
}

/* Trạng thái nút bị khóa (khi chưa tích đủ checkbox) */
.primary-submit-btn:disabled {
    background: #22252e; /* Trở về màu xám tối khi chưa active để người dùng biết là bị khóa */
    color: #475569;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.primary-submit-btn:hover:not(:disabled) {
    background-color: #0052a3;
    transform: translateY(-1px);
    box-shadow: 0 6px 24px rgba(0, 102, 204, 0.5);
}

.primary-submit-btn:active:not(:disabled) {
    transform: translateY(1px);
}

.primary-submit-btn:disabled {
    background-color: #22252e;
    color: #475569;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* --- Footer --- */
.tos-footer {
    background-color: #0d0e12;
    padding: 40px 0;
    border-top: 1px solid #1f222a;
    text-align: center;
    color: #475569;
    font-size: 0.9rem;
}

/* --- Responsive Layout --- */
/* --- Responsive Layout cho Máy tính bảng & Điện thoại --- */
@media (max-width: 992px) {
    .inner-wrapper {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    /* 1. Thu nhỏ Header & Logo để không chiếm không gian màn hình nhỏ */
    .tos-header {
        padding: 40px 0 24px 0;
    }
    .brand-logo {
        font-size: 2.2rem;
    }
    .tos-header .effective-date {
        font-size: 0.9rem;
    }

    /* 2. ẨN SIDEBAR MỤC LỤC TRÊN ĐIỆN THOẠI 
       Hơn 30 mục lục quá dài sẽ làm loãng trang và che mất Form. 
       Ẩn đi giúp người dùng tập trung đọc nội dung và kéo xuống ký form nhanh hơn. */
    .tos-sidebar {
        display: none !important; 
    }

    /* 3. Tối ưu không gian hiển thị nội dung điều khoản */
    .tos-content {
        padding: 20px; /* Giảm từ 56px xuống để chữ không bị bóp nghẹt */
    }
    
    .tos-content h2 {
        font-size: 1.3rem;
        margin-top: 24px;
    }

    /* 4. Tối ưu vùng Form thu thập thông tin (Onboarding Form) */
    .form-card {
        padding: 24px 16px; /* Thu gọn padding để form không bị tràn viền */
    }

    .form-grid {
        grid-template-columns: 1fr; /* Ép các ô Input xếp thành 1 cột dọc dễ điền */
        gap: 16px;
    }

    /* 5. Nút bấm to, rõ ràng, dễ chạm bằng ngón tay */
    .primary-submit-btn {
        width: 100%; /* Cho nút bấm chiếm hết chiều ngang */
        font-size: 14pt;
        padding: 16px 24px;
    }
}