/* Container chính của plugin */
.dvdv-container {
    border: 1px solid #ccc; /* Viền xám nhạt */
    padding: 20px; /* Khoảng cách bên trong */
    margin-top: 20px; /* Khoảng cách với các phần tử khác ở trên */
    background-color: #f9f9f9; /* Màu nền xám rất nhạt */
}

/* Thanh chứa các tab */
.dvdv-tabs {
    overflow: hidden; /* Ẩn các phần tử con bị tràn ra ngoài */
    border-bottom: 1px solid #ccc; /* Viền dưới để phân cách với nội dung tab */
    margin-bottom: 20px; /* Khoảng cách với nội dung bên dưới */
}

/* Các nút tab */
.dvdv-tab-link {
    background-color: inherit; /* Sử dụng màu nền của phần tử cha */
    float: left; /* Đặt các nút nằm cạnh nhau */
    border: none; /* Bỏ viền mặc định */
    outline: none; /* Bỏ đường viền khi focus */
    cursor: pointer; /* Biểu tượng con trỏ chuột khi di chuột qua */
    padding: 14px 16px; /* Đệm bên trong nút */
    transition: 0.3s; /* Hiệu ứng chuyển động mượt mà */
    font-size: 17px; /* Cỡ chữ */
}

/* Thay đổi màu nền khi di chuột qua nút tab */
.dvdv-tab-link:hover {
    background-color: #ddd; /* Màu xám nhạt */
}

/* Định dạng cho tab đang được chọn (active) */
.dvdv-tab-link.active {
    background-color: #ccc; /* Màu xám đậm hơn */
    font-weight: bold; /* Chữ đậm */
}

/* Nội dung của các tab */
.dvdv-tab-content {
    display: none; /* Mặc định ẩn tất cả nội dung tab */
    padding: 6px 12px; /* Đệm bên trong */
    border-top: none; /* Bỏ viền trên */
}

/* Khung bao quanh các nhóm trường thông tin */
.dvdv-fieldset {
    border: 1px solid #ddd; /* Viền xám nhạt */
    padding: 15px; /* Đệm bên trong */
    margin-bottom: 20px; /* Khoảng cách với khung tiếp theo */
}

/* Tiêu đề của khung (legend) */
.dvdv-fieldset legend {
    font-weight: bold; /* Chữ đậm */
    font-size: 1.2em; /* Cỡ chữ lớn hơn một chút */
    color: #333; /* Màu chữ xám đậm */
    padding: 0 10px; /* Đệm trái phải cho tiêu đề */
}

/* Nhóm chứa label và input */
.dvdv-form-group {
    margin-bottom: 15px; /* Khoảng cách giữa các nhóm */
}

/* Canh giữa cho nút submit */
.dvdv-form-group-center {
    text-align: center; /* Canh giữa nội dung */
    margin-top: 20px; /* Khoảng cách trên */
}

/* Nhãn (label) của các trường nhập liệu */
.dvdv-form-group label {
    display: block; /* Hiển thị trên một dòng riêng */
    margin-bottom: 5px; /* Khoảng cách với ô input bên dưới */
    font-weight: bold; /* Chữ đậm */
}

/* Các ô nhập liệu (text, email, file, select, textarea) */
.dvdv-form-group input[type="text"],
.dvdv-form-group input[type="email"],
.dvdv-form-group input[type="tel"],
.dvdv-form-group input[type="file"],
.dvdv-form-group select,
.dvdv-form-group textarea {
    width: 100%; /* Chiếm toàn bộ chiều rộng của thẻ cha */
    padding: 8px; /* Đệm bên trong */
    border: 1px solid #ccc; /* Viền xám nhạt */
    box-sizing: border-box; /* Cách tính toán kích thước bao gồm cả padding và border */
}

/* Nút submit chính */
.dvdv-submit-btn {
    background-color: #0073aa; /* Màu xanh dương của WordPress */
    color: white; /* Chữ màu trắng */
    padding: 10px 20px; /* Đệm bên trong */
    border: none; /* Bỏ viền */
    cursor: pointer; /* Con trỏ chuột */
    font-size: 16px; /* Cỡ chữ */
}

.dvdv-submit-btn:hover {
    background-color: #005a87; /* Màu xanh đậm hơn khi di chuột */
}

/* Dấu sao màu đỏ cho các trường bắt buộc */
.required {
    color: red; /* Màu đỏ */
}

/* Bảng động */
.dvdv-dynamic-table {
    width: 100%; /* Chiều rộng 100% */
    border-collapse: collapse; /* Gộp các đường viền của ô lại */
    margin-top: 10px; /* Khoảng cách trên */
}

.dvdv-dynamic-table th,
.dvdv-dynamic-table td {
    border: 1px solid #ddd; /* Viền xám nhạt */
    padding: 8px; /* Đệm */
    text-align: left; /* Canh lề trái */
}

.dvdv-dynamic-table th {
    background-color: #f2f2f2; /* Màu nền xám cho tiêu đề cột */
}

/* Nút Thêm hàng và Xóa hàng */
.dvdv-add-row-btn, .dvdv-delete-row-btn {
    cursor: pointer; /* Con trỏ chuột */
    padding: 5px 10px; /* Đệm */
    border: 1px solid #ccc; /* Viền */
    background-color: #f7f7f7; /* Màu nền */
}

.dvdv-delete-row-btn {
    background-color: #f44336; /* Màu đỏ cho nút xóa */
    color: white; /* Chữ trắng */
    border-color: #d32f2f; /* Viền đỏ đậm */
}

/* ===================================================================
 * BỔ SUNG MÃ ĐỂ LÀM RÕ CÁC NÚT BẤM
 * =================================================================== */

/* --- Nút Tab (Nhập mới / Chỉnh sửa) --- */

/* Định dạng cho tab không được chọn */
.dvdv-tab-link {
    background-color: #f0f0f1; /* Màu nền xám nhạt hơn */
    color: #2271b1;           /* Màu chữ xanh dương */
    border: 1px solid #ccc;
    border-bottom: none;
    margin-right: 5px;
}

/* Định dạng cho tab đang được chọn (active) */
.dvdv-tab-link.active {
    background-color: #2271b1; /* Màu nền xanh dương đậm của WordPress */
    color: #ffffff;           /* Chữ màu trắng */
    border-color: #2271b1;
}

/* Bỏ hiệu ứng nền khi di chuột qua tab không được chọn */
.dvdv-tab-link:hover {
    background-color: #f0f0f1;
}

/* Hiệu ứng khi di chuột qua tab đang active */
.dvdv-tab-link.active:hover {
     background-color: #1e66a0; /* Màu xanh đậm hơn một chút */
}


/* --- Nút "Thêm hàng" --- */
.dvdv-add-row-btn {
    background-color: #2271b1; /* Màu xanh lá cây */
    color: white;              /* Chữ màu trắng */
    border-color: #1d9a23;     /* Viền xanh đậm hơn */
    font-weight: bold;
}

.dvdv-add-row-btn:hover {
    background-color: #1e66a0; /* Màu xanh lá cây đậm hơn khi di chuột */
}