/* Tiêu đề chính của văn bản (GIẤY ỦY QUYỀN) */
.doc-main-title {
    font-family: "Times New Roman", serif;
    font-size: 24px;          /* ~18pt */
    font-weight: 700;         /* In đậm */
    text-align: center;
    text-transform: uppercase;
    margin-top: 30px;
    margin-bottom: 20px;
    line-height: 1.4;
    color: #000435;           /* Màu thương hiệu (Xanh than) */
}

.doc-header-actions {
    display: flex;
    align-items: center;
    gap: 12px; /* Khoảng cách giữa các icon */
    background: transparent;
}


/* ==========================================================================
   2. HEADERS (QUỐC HIỆU & TIÊU NGỮ)
   ========================================================================== */

/* --- A. PERSONAL / STANDARD (Dành cho Cá nhân hoặc Mẫu chung) --- */
.header-std-wrapper {
    text-align: center;
    font-family: "Times New Roman", serif;
}

.header-std-nation { /* CỘNG HÒA XÃ HỘI... */
    font-size: 13pt;
    font-weight: bold;
    text-transform: uppercase;
    margin: 0;
    padding: 0;
}

.header-std-motto { /* Độc lập - Tự do... */
    font-size: 13pt;
    font-weight: bold;
    padding: 0;
    margin: 0;
}

.header-std-line { /* Đường gạch chân */
    width: 30%;
    margin: 5px auto 10px auto;
    border: 0;
    border-top: 1px solid black;
    height: 1px;
    background: transparent;
}

/* --- B. ORGANIZATION (Dành cho Tổ chức - Layout 2 cột) --- */
.header-org-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    font-family: "Times New Roman", serif;
}

.header-org-left { /* Cột Trái: Tên Công Ty */
    width: 45%;
    text-align: center;
}

.header-org-right { /* Cột Phải: Quốc Hiệu (Tái sử dụng style std bên trong) */
    width: 55%;
    text-align: center;
}

.header-org-name {
    font-size: 13pt;
    font-weight: bold;
    text-transform: uppercase;
    margin: 0;
    padding: 0;
    line-height: 1.3;
    min-height: 3em; /* Giữ khung cố định tránh nhảy dòng */
}

.header-org-divider {
    width: 30%;
    border: 0;
    border-top: 1px solid black;
    margin: 0 auto 10px auto;
    height: 1px;
}

.info-value-split {
    display: grid !important;
    /* Cột 1: Tự động chiếm hết chỗ còn lại | Cột 2: Cố định 240px cho "Ngày cấp" */
    grid-template-columns: 1fr 240px; 
    align-items: baseline;
    gap: 10px;
}

.info-value-split {
    display: grid !important;
    /* Cột 1: Tự động chiếm hết chỗ còn lại | Cột 2: Cố định 240px cho "Ngày cấp" */
    grid-template-columns: 1fr 240px; 
    align-items: baseline;
    gap: 10px;
}


/* ==========================================================================
   3. DATE & NUMBERS (NGÀY THÁNG & SỐ HIỆU)
   ========================================================================== */

/* --- A. PERSONAL (Chỉ có ngày tháng bên phải) --- */
.date-std-wrapper {
    text-align: right;
    font-style: italic;
    font-family: "Times New Roman", serif;
    font-size: 14pt;
    margin-bottom: 20px;
}

/* --- B. ORGANIZATION (Số hiệu trái + Ngày tháng phải) --- */
.date-org-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-family: "Times New Roman", serif;
    margin-bottom: 20px;
    width: 100%;
}

.date-org-number {
    font-size: 13pt;
    font-weight: normal;
    text-align: left;
}

.date-org-location {
    font-size: 14pt;
    font-style: italic;
    text-align: right;
}


/* ==========================================================================
   4. BODY SECTIONS (CÁC PHẦN NỘI DUNG CHÍNH I, II, III...)
   ========================================================================== */

/* Tiêu đề mục (I. BÊN ỦY QUYỀN...) */
.section-title {
    font-family: "Times New Roman", serif;
    font-size: 14pt;
    font-weight: bold;
    text-transform: uppercase;
    margin-top: 18pt;       /* Cách đoạn trên */
    margin-bottom: 6pt;     /* Cách đoạn dưới */
    text-align: justify;
    color: #000;
    line-height: 1.5;
}

/* Số La Mã (I., II.) - Cố định độ rộng 48px */
.section-title .section-num {
    width: 48px;            /* = 1 Tab chuẩn */
    display: inline-block;  /* Bắt buộc để nhận width */
}

/* Đoạn văn thường nhưng thụt đầu dòng (cho phần IV. Thời hạn...) */
.section-text-indent {
    font-family: "Times New Roman", serif;
    font-size: 14pt;
    text-align: justify;
    line-height: 1.5;
    padding-left: 48px;     /* Thụt vào thẳng hàng với chữ của tiêu đề */
    margin-bottom: 6pt;
}

/* Danh sách pháp lý (1., 2.) */
.list-legal {
    margin: 0;
    margin-bottom: 15px;
    /* Logic: 48px (Lề) + 19px (Khoảng hở số) = 67px */
    padding-left: 67px; 
}

.list-legal li {
    font-family: "Times New Roman", serif;
    font-size: 14pt;
    line-height: 1.5;
    text-align: justify;
    margin-bottom: 6pt;
    /* Khoảng cách từ số (1.) đến chữ nội dung */
    padding-left: 24px; 
}

.list-legal li::marker {
    font-weight: bold;
    font-family: "Times New Roman", serif;
}


/* ==========================================================================
   5. INFO BOXES (THÔNG TIN ĐIỀN FORM - ÔNG/BÀ...)
   ========================================================================== */

/* Khung bao ngoài của nhóm thông tin */
.info-box-wrapper {
    margin-bottom: 20px;
    padding-left: 48px;    /* Thụt đầu dòng chuẩn 1 Tab */
}

/* Từng dòng thông tin */
.info-row {
    display: flex;         /* Dàn hàng ngang */
    font-family: "Times New Roman", serif;
    font-size: 14pt;
    line-height: 1.5;
    margin-bottom: 4px;    /* Cách dòng nhẹ */
}

/* Cột Nhãn (Label - Bên trái) */
.info-label {
    min-width: 200px;      /* Cố định độ rộng để thẳng hàng dọc */
    font-weight: normal;
    color: #333;           /* Màu xám đen nhẹ */
}

/* Cột Giá trị (Value - Bên phải) */
.info-value {
    flex: 1;               /* Chiếm hết khoảng trống còn lại */
    min-width: 0;
    word-break: break-all; 
    overflow-wrap: anywhere;
    color: #000;
    font-weight: 500;      /* Hơi đậm hơn nhãn 1 xíu cho rõ */
}

/* Dữ liệu mẫu (Data ảo có nét đứt) */
.sample-data {
    color: #2546bc;
    border-bottom: 1px dashed #ccc; /* Gạch chân đứt nét nhìn cho giống form điền */
    padding: 0 2px;
}

/* Các nhãn phụ nằm cùng dòng (Ví dụ: Cấp ngày...) */
.inline-label {
    font-weight: normal;
    color: #333;
    margin-right: 10px;
}

/* Helper đẩy nội dung sang phải */
.push-right {
    margin-left: 60px;     /* Khoảng cách giữa Số CCCD và Ngày cấp */
    display: inline-block;
}


/* ==========================================================================
   6. FOOTER (CHỮ KÝ)
   ========================================================================== */

.footer-wrapper {
    margin-top: 40px;
    display: flex;
    justify-content: space-between;
    page-break-inside: avoid; /* Tránh bị ngắt trang giữa chừng khi in */
}

.footer-col {
    width: 45%;
    text-align: center;
    font-family: "Times New Roman", serif;
    font-size: 14pt;
}


.header-wrapper span, .header-wrapper p {
    word-break: break-all;      /* Ép xuống dòng ở bất cứ ký tự nào nếu hết chỗ */
    overflow-wrap: break-word; /* Ưu tiên ngắt ở dấu cách, nhưng nếu từ quá dài thì vẫn ngắt */
}


/* ==========================================================================
   7. RESPONSIVE (HỖ TRỢ MOBILE)
   ========================================================================== */

@media (max-width: 768px) {
    .document-viewer {
        padding: 20px;     /* Giảm padding trên điện thoại */
    }
    
    .info-row {
        flex-direction: column; /* Chuyển thành hàng dọc trên đt bé */
    }
    
    .info-label {
        min-width: auto;
        font-weight: bold;
        margin-bottom: 2px;
    }
    
    .push-right {
        margin-left: 0;
        display: block;
        margin-top: 5px;
    }

    .org-header-wrapper {
        flex-direction: column;
        align-items: center;
    }

    .header-org-left, .header-org-right {
        width: 100%;
        margin-bottom: 15px;
    }
}