/* ========================================================= */
/* 1. QUỐC HIỆU, TIÊU NGỮ & TIÊU ĐỀ                          */
/* ========================================================= */
.doc-date {
    margin-bottom: 8px;
    font-size: 16px;
    text-align: right;
    font-style: italic;
}

.doc-header-center-wrapper {
    margin-bottom: 12px;
}

/* --- BỐ CỤC KHỐI HEADER (Trái: Công ty - Phải: Quốc hiệu) --- */
.doc-header-org {
    display: flex;
    justify-content: space-between;
    margin-bottom: 24px;
}

.doc-header-org .h-left {
    width: 45%;
    text-align: center;
}

.doc-header-org .h-right {
    width: 50%;
    text-align: center;
}

/* --- TRÌNH BÀY TÊN CÔNG TY BÊN TRÁI --- */
.doc-org-name {
    font-weight: bold;
    text-transform: uppercase;
    font-size: 16px;
}

/* Đường kẻ gạch ngang dưới tên công ty */
.doc-org-line {
    border-bottom: 1.5px solid var(--J-text);
    width: 60%;
    margin: 5px auto 0 auto;
}

.doc-parties {
    line-height: 1.5;
    /* Có thể set font Times New Roman nếu muốn Preview giống hệt Word */
}

.party-title {
    font-weight: bold;
    margin-top: 16px;
    margin-bottom: 8px;
}

/* ĐÂY LÀ CHÌA KHÓA: Biến dòng thành 2 cột */
.party-row {
    display: flex;
    margin-bottom: 4px;
}

.party-label {
    width: 240px; /* Bề ngang này tương đương mốc Tab 4.5cm trong Word */
    flex-shrink: 0; /* Ép cái nhãn không bị bóp méo khi màn hình nhỏ */
}

.party-val {
    flex-grow: 1; /* Cho phần địa chỉ chiếm hết chỗ còn lại, dài quá thì rớt dòng thẳng tắp */
}

.party-line {
    margin-top: 8px;
    margin-bottom: 12px;
    font-style: italic; /* In nghiêng mấy câu "(Sau đây gọi tắt là...)" */
}

.doc-table > tbody > tr > td:last-child .doc-date {
    text-align: right;
    font-style: italic; /* Chỉ in nghiêng phần Ngày tháng ở đây */
}

/* 3. Đảm bảo ô bên trái (Số) luôn đứng thẳng và sát lề */
.doc-table > tbody > tr > td:first-child .doc-date {
    text-align: left;
    font-style: normal;
}

/* 3. Phần Party A (Thông tin bên A) ông cứ giữ nguyên class của nó */
.doc-info-a {
    font-size: 16px;
    text-align: left; /* Nó sẽ luôn nằm bên trái theo mặc định */
}

.doc-vn-name, 
.doc-vn-motto {
    display: block;
    text-align: center;
    font-weight: bold;
    font-size: 16px;
}

.doc-vn-motto::after {
    content: "";          
    display: block;       
    width: 20%;          
    border-bottom: 1.5px solid var(--J-text); 
    margin: 5px auto 0;    
}

.doc-vn-motto:empty {
    display: none !important;
}

.doc-title {
    font-size: 24px;
    margin: 20px 0;
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
}

/* ========================================================= */
/* BỐ CỤC THÔNG TIN VĂN BẢN (SỐ HIỆU & NGÀY THÁNG)          */
/* ========================================================= */

.doc-info-row {
    display: flex;              /* Kích hoạt chế độ dàn hàng ngang */
    justify-content: space-between; /* Đẩy 2 cột về 2 phía xa nhau nhất */
    align-items: flex-start;    /* Căn đỉnh 2 cột cho bằng nhau */
    margin: 12px 0;             /* Tạo khoảng cách trên dưới cho thoáng */
    width: 100%;                /* Đảm bảo chiếm hết chiều ngang trang giấy */
}

/* CỘT TRÁI: Thường chứa Số: .../..... */
.doc-info-row .info-left {
    width: 40%;                 /* Chiếm 40% bề ngang lề trái */
    font-size: 16px;
    font-weight: normal;
    line-height: 1.3;
}

/* CỘT PHẢI: Thường chứa Địa danh, ngày tháng năm */
.doc-info-row .info-right {
    width: 60%;                 /* Chiếm 60% còn lại */
    text-align: right;          /* Đẩy toàn bộ chữ sát lề phải */
    font-style: italic;         /* Ngày tháng bắt buộc phải in nghiêng */
    font-size: 16px;
    line-height: 1.3;
}

/* Tùy chọn: Nếu muốn thêm tí "nghệ thuật" giống Word cho cột Số */
/* Ông giáo có thể bỏ comment dòng dưới nếu thích */
/* .doc-info-row .info-left::after {
    content: "";
    display: block;
    width: 30%;
    border-bottom: 1px solid var(--J-text);
    margin: 4px auto 0;
}
*/

/* ========================================================= */
/* 2. THÔNG TIN CÁC BÊN (Nâng cấp từ bản cũ của ông giáo)    */
/* ========================================================= */

.doc-parties {
    margin-top: 20px;
    line-height: 1.6;
    font-size: 16px;
}

.party-block {
    margin-bottom: 24px; /* Khoảng cách giữa Bên A và Bên B */
}

.party-title {
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.party-row {
    display: flex;
    align-items: baseline; /* Căn cho chữ khớp hàng nếu rớt dòng */
    margin-bottom: 4px;
}

.party-label {
    width: 200px; /* Tui chỉnh nhẹ xuống 200px cho thanh thoát, hoặc ông để 240px tùy ý */
    flex-shrink: 0;
    font-weight: normal;
}

.party-val {
    flex-grow: 1;
    text-align: justify;
    word-break: break-word;
}

.doc-alias {
    font-size: 16px;      /* Nhỏ hơn chữ chính 1 xíu */
}

/* ========================================================= */
/* 3. BỘ ĐẾM 3 CẤP (ĐIỀU -> KHOẢN -> ĐIỂM)                   */
/* ========================================================= */
/* Gắn class này vào thẻ <div> ngoài cùng bọc phần nội dung để khởi tạo bộ đếm */
.doc-content-wrapper {
    counter-reset: chapter-counter;
}

/* LEVEL 1: ĐIỀU */
.doc-chapter {
    counter-increment: chapter-counter;
    counter-set: clause-cnt 0 point-cnt 0;
    position: relative;        
    font-weight: bold;
    display: block;
    margin: 24px 0 12px;
    padding-left: 80px;        
    text-align: left;
    font-size: 16px;
    text-transform: uppercase;
}

.doc-chapter::before {
    content: "ĐIỀU " counter(chapter-counter) ". ";
    position: absolute;        
    left: 0;                   
    color: var(--J-text);
}

/* LEVEL 2: KHOẢN */
.doc-clause,
.doc-single-clause {
    position: relative;
    padding-left: 80px; 
    margin-bottom: 10px;
    text-align: justify;
    font-weight: normal;
    font-size: 16px;
}
.doc-free-text {
    margin-bottom: 10px;
    text-align: justify;
    font-weight: normal;
    font-size: 16px;
}
.doc-clause {
    counter-increment: clause-cnt;
    counter-set: point-cnt 0;
}
.doc-clause::before {
    content: counter(clause-cnt) ". ";
    position: absolute;
    left: 0;
}

/* LEVEL 3: ĐIỂM */
.doc-point {
    counter-increment: point-cnt;
    position: relative;
    padding-left: 60px;  
    margin: 0 0 8px 80px; 
    text-align: justify;
    font-size: 16px;
}
.doc-point::before {
    content: counter(point-cnt, lower-alpha) ") ";
    position: absolute;
    left: 0;             
    font-weight: normal; 
}

/* CÁC MỤC BỔ SUNG TRONG KHOẢN */
.doc-poa-item {
    padding-left: 16px;
    margin: 12px 0;
    text-align: justify;
    font-size: 16px;
}

.doc-free-text {
    text-align: justify;
    font-size: 16px;
}

/* --- PHẦN CĂN CỨ (RECITAL) --- */
.doc-recital {
    font-style: italic;           /* In nghiêng đúng chuẩn Nghị định 30 */
    text-align: justify;          /* Căn đều 2 bên cho đẹp đội hình */
    line-height: 1.5;             /* Bám sát line-height chuẩn của ông ở dưới */
    font-size: 16px;              /* Đồng bộ với các phần khác */
    margin-bottom: 12px;          /* Khoảng cách dưới giống .doc-header-center-wrapper */
    color: var(--J-text);        /* Dùng biến màu của hệ thống luôn */
}

/* ========================================================= */
/* 4. CHỮ KÝ & BẢNG BIỂU CƠ BẢN                              */
/* ========================================================= */
.doc-a-sign, 
.doc-b-sign {
    margin-top: 28px;
    text-align: center;
    font-weight: bold;
    width: 300px;
    height: 200px;
    font-size: 16px;
}

.doc-a-sign-name, 
.doc-b-sign-name {
    text-align: center;
    font-weight: bold;
    word-break: break-word;
}

.doc-table {
    width: 100%;
    border-collapse: collapse;
    border: none; 
}

.doc-table td {
    vertical-align: top; 
    padding: 4px 5px 4px 0; 
}

.doc-table td:first-child {
    width: 260px;
}

.documents-preview p:not([class^="doc-"]) {
    font-size: 16px;
    line-height: 1.5; /* Giãn dòng chuẩn 1.5 */
    text-align: justify; /* Căn đều 2 bên (Cực kỳ quan trọng cho hợp đồng) */
    margin-top: 0;
    margin-bottom: 8px;
}

/* Style cho các dòng logic Jinja ở Preview */
.doc-logic-block {
    color: #9c9c9c;
    font-family: 'Courier New', Courier, monospace;
    font-size: 13px;
    margin: 8px 0;
    background-color: #f9f9f9;
    padding: 2px 8px;
    border-radius: 3px;
    width: fit-content;
    border-left: 2px solid #e0e0e0; /* Thêm cái vạch lề cho nó ra dáng code */
    user-select: none; /* (Tùy chọn) Để khách không copy nhầm đống code này */
}

/* Chỗ đã điền: Hiệu ứng bút dạ quang cực sang cho dân Luật */
.preview-filled {
    color: #92400e;
}




/* ========================================================= */
/* 4.5. ĐỊNH DẠNG KÍNH GỬI (RECIPIENT)                       */
/* ========================================================= */
.doc-recipient {
    display: flex;
    margin-bottom: 16px;
    line-height: 1.5;
    font-size: 16px;
}
.recipient-label {
    font-weight: normal;
    width: 90px;
    flex-shrink: 0;
    white-space: nowrap;
}
.recipient-list {
    display: flex;
    flex-direction: column;
}
.recipient-item {
    font-weight: normal;
    text-align: justify;
}

/* ========================================================= */
/* 5. MOBILE RESPONSIVE                                      */
/* ========================================================= */
@media (max-width: 768px) {
    .doc-table td:first-child {
        width: auto; 
    }
    
    .doc-table.table-bordered:has(.doc-a-sign-name) td:first-child {
        width: auto;
    }
    
    .doc-a-sign, 
    .doc-b-sign {
        width: auto;
    }
    
    .doc-chapter, 
    .doc-clause, 
    .doc-single-clause {
        font-size: 14px; 
        padding-left: 55px; /* Giảm độ thụt gốc (từ 80px xuống 55px) */
    } 
    
    .doc-point {
        font-size: 14px;
        padding-left: 30px;
        margin-left: 55px; /* Thụt vào tổng cộng 85px thay vì 140px như PC */
    }
    
    .doc-recital {
        font-size: 14px;
    }
    
    .doc-info-row {
        flex-direction: column;
    }
    
    .doc-info-row .info-left, .doc-info-row .info-right {
        font-size: 14px;
        width: 100%;
        text-align: left;
        margin-bottom: 8px;
    }
    
    .doc-header-org {
        flex-direction: column;
        align-items: center;
    }
    
    .doc-header-org .h-left,
    .doc-header-org .h-right {
        width: 100%;
        margin-bottom: 16px;
    }
    
    .party-row {
        flex-direction: column;
    }
    
    .party-label {
        width: 100%;
        margin-bottom: 4px;
        font-weight: bold;
    }
    
    .doc-recipient {
        flex-direction: column;
    }
    
    .recipient-label {
        width: 100%;
        white-space: normal;
        margin-bottom: 4px;
        font-weight: bold;
    }
    
    .doc-content-wrapper * {
        word-wrap: break-word;
        word-break: break-word;
    }
}





.doc-signature {
    width: 45%;
    display: flex;
        justify-content: space-between;
        text-align: center;
        margin-top: 40px;
}

.doc-content-wrapper {
    /* Mở sẵn cả 3 bộ đếm ngay từ đầu để tránh Chrome bị mất dấu */
    counter-reset: chapter-counter clause-cnt point-cnt; 
}