header {
    background-image: url('../images/satra-header.jpg');
    background-repeat: repeat-x; /* Lặp lại hình ảnh theo chiều ngang */
    min-height: 9vh ;/* Chiều cao mong muốn của header */
    /* position: fixed; */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    background-size: auto 100%; /* Chiều cao tự động, chiều rộng 100% (có thể gây méo ảnh) */
}

body {
    font-size: clamp(10px, 0.6vw, 20px);
    /* font-family: sans-serif; */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f0f2f5;
    padding-bottom: 50px;
}

.parallax {
    background-image: url("../images/background.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}
   
footer {
    background-color: #222;
    color: #fff;
    font-size: clamp(10px, 0.7vw, 20px);
    bottom: 0;
    position: fixed;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 999;
}

footer p {
    margin: 0.7vw 0;
}

footer i {
    color: red;
}

footer a {
    color: #3c97bf;
    text-decoration: none;
}

/* CSS cho menu ngang */
.horizontal-menu {
    background-color: #343a40; /* Màu nền giống navbar */
    display: flex; /* Sử dụng Flexbox để sắp xếp các mục ngang hàng */
    flex-direction: row; /* Đảm bảo các mục được xếp theo hàng */
    list-style: none; /* Loại bỏ dấu chấm mặc định của danh sách */
    padding: 0; /* Loại bỏ padding mặc định của ul */
    margin: 0; /* Loại bỏ margin mặc định của ul */
}

/* .horizontal-menu .nav-item {
     Không cần thiết lập width cố định ở đây để các mục tự điều chỉnh 
} */

.horizontal-menu .nav-link {
    color: white;
    padding: clamp(6px, 0.4vw, 10px) clamp(5px, 0.3vw, 15px);
    text-decoration: none;
    display: block; /* Vẫn giữ display block để dễ dàng tạo vùng click cho liên kết */
    font-size: clamp(10px, 0.7vw, 20px); /* Đặt kích thước phông chữ là 0.7vw */
}

.horizontal-menu .nav-link:hover {
    background-color: #495057; /* Màu nền khi hover */
}

.horizontal-menu .nav-link.active {
    background-color: #007bff; /* Màu nền cho mục hiện tại (nếu cần) */
    color: white;
}

/* Ẩn menu con mặc định */
.dropdown-menu {
    display: none;
    position: absolute; /* Để định vị menu con so với mục cha */
    z-index: 999; /* Đảm bảo menu con nằm trên các phần tử khác */
    /* Các kiểu dáng khác cho menu con (ví dụ: background-color, border) */
    background-color: #495057;
    border: 1px solid rgba(0,0,0,.15);
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.175);
    font-size: clamp(10px, 0.7vw, 20px); /* Đặt kích thước phông chữ là 0.7vw */
}

/* Hiển thị menu con khi di chuột vào mục cha (.dropdown) */
.dropdown:hover .dropdown-menu {
    display: block;
}

/* Định vị menu con (tùy chỉnh nếu cần) */
.dropdown {
    position: relative; /* Để làm điểm tham chiếu cho menu con absolute */
}

/* Các kiểu dáng khác cho các mục menu (nếu cần) */
.nav-link {
    cursor: pointer; /* Hiển thị con trỏ chuột kiểu "bàn tay" khi di chuột qua liên kết có dropdown */
}

.container-center {
    width: clamp(550px, 80vw, 1200px);; /* Điều chỉnh độ rộng container nếu cần */
    margin: 5px auto 20px auto ;
    padding:20px auto ;
    border: 1px solid #ccc;
    border-radius: 5px;
}
.content-full {
    margin-top: 0.1vw;
    margin-left: 0.7vw;
    margin-right: 0.7vw;
    margin-bottom: 1vw;
}

.content-center {
    width: clamp(500px, 80vw, 550px);
    margin: 5px auto 20px auto ;
    padding: clamp(10px, 1vw, 20px);
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.925);
}

.content {
    /* Các thuộc tính khác của .content */
    margin-top: 0.1vw;
    margin-left: 0.7vw;
    margin-right: 0.7vw;
    margin-bottom: 1vw;;
    display: block; /* Đảm bảo là block-level element */
    /* Các thuộc tính hiện tại của bạn */
    display: flex;
    justify-content: center;
   
}
.tieude {
    display: block; /* Đảm bảo là block-level element */
    /* Các thuộc tính hiện tại của bạn */
    display: flex;
    justify-content: center;
   
}

.tieude h1 {
    font-size: clamp(50px, 2.5vw, 200px); 
    font-weight: bold;
    padding-top: 1vw;
}

.tieude h2 {
    font-size: clamp(20px, 1.8vw, 80px); 
    font-weight: bold;
    padding-top: 1vw;
}

.clearfix {
    zoom: 1;
}

.clearfix:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    line-height: 0;
    visibility: hidden;
}

  /* Layout */
.portfolio {
    width: auto;
}

.portfolio h2 {
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 10px;
    text-align: center;
}
  /* line của h2 */
.portfolio h2:after {
    background-color: #339999;
    content: "";
    display: block;
    height: 3px;
    margin: 11px auto 30px;
    position: relative;
    width: 75px;
}
  

.image-item {
    background-color: #fcfcfc6c;
    border: 1px solid #dee2e6;
    border-radius: .5rem; /* Bo tròn góc nhẹ nhàng */
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); /* Đổ bóng nhẹ */
    padding: 0.3rem; /* Padding bên trong khung */
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 100%; /* Đảm bảo chiều cao đồng nhất */
}

.image-item img {
    max-width: 150px; /* Kích thước tối đa của ảnh */
    height: auto;
    margin-bottom: 5px; /* Khoảng cách giữa ảnh và tên */
    display: block;
}

.image-item p {
    font-weight: 600; /* Đậm hơn một chút */
    color: #212529;
    font-size: 0.95em;
    margin: 0;
    word-wrap: break-word;
}

.image-item-link {
    text-decoration: none; /* Dòng này loại bỏ gạch chân */
    color: inherit;
    display: block;
    height: 100%;
}
/* Điều chỉnh cột để có 5 ảnh trên một hàng trên màn hình lớn */
/* Bootstrap mặc định 12 cột, 12/5 = 2.4 => không có cột .col-2-4 */
/* Chúng ta sẽ dùng .col-md-2 (khoảng 6 ảnh) hoặc .col-lg-2 */
/* Hoặc dùng custom CSS cho flex-basis để có 5 ảnh */
@media (min-width: 992px) { /* Cho màn hình lớn (lg) */
    .col-5-items {
        flex: 0 0 20%; /* 100% / 5 = 20% */
        max-width: 20%;
    }
}

@media (min-width: 768px) and (max-width: 991px) { /* Cho màn hình trung bình (md) */
    .col-5-items {
        flex: 0 0 25%; /* 4 ảnh trên hàng */
        max-width: 25%;
    }
}

@media (max-width: 767px) { /* Cho màn hình nhỏ (sm) */
    .col-5-items {
        flex: 0 0 50%; /* 2 ảnh trên hàng */
        max-width: 50%;
    }
}

.container {
    margin-top: 30px;
}

.blog-title {
    text-align: center;
    color: #2c3e50;
    margin-bottom: 40px;
    font-size: 2.5em;
    font-weight: 700;
}

.post-card {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    margin-bottom: 30px;
    overflow: hidden;
    /* Đảm bảo ảnh không tràn ra ngoài border-radius */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    height: 100%;
    /* Đảm bảo các card có chiều cao bằng nhau trong cùng một hàng */
    display: flex;
    flex-direction: column;
}

.post-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.post-card img {
    width: 100%;
    height: 200px;
    /* Chiều cao cố định cho ảnh thumbnail */
    object-fit: cover;
    /* Đảm bảo ảnh bao phủ toàn bộ không gian mà không bị méo */
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.post-card-body {
    padding: 20px;
    flex-grow: 1;
    /* Cho phép phần body co giãn để lấp đầy không gian còn lại */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.post-card-body h5 {
    font-size: 1.5em;
    color: #34495e;
    margin-bottom: 10px;
    font-weight: 600;
}

.post-card-body p {
    color: #7f8c8d;
    font-size: 0.95em;
    line-height: 1.6;
    margin-bottom: 15px;
}

.post-card-body .text-muted {
    font-size: 0.85em;
    color: #bdc3c7 !important;
    margin-top: auto;
    /* Đẩy ngày xuống cuối card */
}

.read-more {
    display: inline-block;
    margin-top: 10px;
    font-weight: 500;
    color: #3498db;
    /* Màu xanh của Bootstrap primary */
    text-decoration: none;
    transition: color 0.2s ease;
}

.read-more:hover {
    color: #2980b9;
}

.post-detail-card {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding: 30px;
}

.post-detail-card h1 {
    color: #2c3e50;
    margin-bottom: 20px;
    font-size: 2.2em;
    font-weight: 700;
}

.post-detail-card .post-meta {
    font-size: 0.9em;
    color: #7f8c8d;
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

.post-detail-card img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 25px;
}

.post-detail-card .post-content {
    font-size: 1.05em;
    line-height: 1.8;
    color: #34495e;
}

.post-detail-card .post-content p {
    margin-bottom: 1em;
}

.post-detail-card .post-content h1,
.post-detail-card .post-content h2,
.post-detail-card .post-content h3 {
    margin-top: 1.5em;
    margin-bottom: 0.8em;
    color: #34495e;
    font-weight: 600;
}

.post-detail-card .post-content ul,
.post-detail-card .post-content ol {
    margin-bottom: 1em;
    padding-left: 20px;
}

.back-link {
    display: inline-block;
    margin-top: 25px;
    font-weight: 500;
    color: #3498db;
    text-decoration: none;
    transition: color 0.2s ease;
}

.back-link:hover {
    color: #2980b9;
}

.centered-div {
    max-width: 600px; /* Đặt chiều rộng tối đa cho khung chứa form */
    margin: 30px auto; /* Căn giữa khung theo chiều ngang và thêm khoảng cách trên dưới */
    background-color: #ffffff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.centered-div .tieude h1 {
    color: #34495e;
    font-size: 2em;
    margin-bottom: 20px;
}

/* Đảm bảo các input trong bảng được căn chỉnh đẹp hơn */
.table-dangky td {
    vertical-align: middle; /* Căn giữa nội dung ô theo chiều dọc */
    padding: 0.75rem; /* Tăng padding cho ô */
}

/* Định nghĩa lại khoảng cách cho ô label để căn chỉnh tốt hơn với input */
.table-dangky td:first-child {
    width: 30%; /* Điều chỉnh chiều rộng cột label nếu cần */
    font-weight: bold;
}
.table-dangky td:last-child {
    width: 70%; /* Điều chỉnh chiều rộng cột input */
}

/* CSS cho các thông báo lỗi hoặc độ mạnh mật khẩu */
#usernameError, #passwordStrength, #confirmPasswordError {
    margin-top: 5px;
    font-size: 0.875em;
}

.btn-primary {
    width: 100%; /* Làm nút đăng ký chiếm toàn bộ chiều rộng */
    /* margin-top: 20px; Khoảng cách trên nút */
    padding: 10px 0;
    font-size: 1.1em;
}


/* Dùng media query để điều chỉnh layout cho màn hình nhỏ
   Dưới 768px (màn hình tablet trở xuống), chúng ta có thể làm cho form trông đẹp hơn
   bằng cách bỏ bảng và dùng Bootstrap Grid cho từng cặp label/input */
@media (max-width: 767.98px) {
    .table-dangky table,
    .table-dangky thead,
    .table-dangky tbody,
    .table-dangky th,
    .table-dangky td,
    .table-dangky tr {
        display: block; /* Biến các thành phần bảng thành khối */
    }

    .table-dangky thead tr {
        position: absolute;
        top: -9999px; /* Ẩn header của bảng */
        left: -9999px;
    }

    .table-dangky tr {
        border: 1px solid #dee2e6;
        margin-bottom: 15px;
        border-radius: 5px;
        overflow: hidden; /* Đảm bảo bo góc hoạt động */
    }

    .table-dangky td {
        border: none !important; /* Bỏ viền của ô */
        position: relative;
        padding-left: 50% !important; /* Tạo không gian cho label giả */
        text-align: right !important; /* Căn phải nội dung input */
    }

    .table-dangky td:before {
        content: attr(data-label); /* Lấy nội dung từ data-label */
        position: absolute;
        left: 15px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        text-align: left; /* Căn trái label giả */
        font-weight: bold;
        color: #495057;
    }

    /* Điều chỉnh input để chiếm đủ không gian */
    .table-dangky input[type="text"],
    .table-dangky input[type="password"],
    .table-dangky input[type="email"],
    .table-dangky input[type="tel"] {
        width: calc(100% - 15px); /* Trừ padding để vừa khít */
    }

    .table-dangky td[colspan="2"] {
        padding-left: 15px !important; /* Cho các ô colspan đầy đủ chiều rộng */
        text-align: left !important;
    }
}

.post-card-TaoBaiViet {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding: 30px;
    max-width: 900px;
    margin: 30px auto;
}
.post-card-TaoBaiViet h1 {
    text-align: center;
    color: #2c3e50;
    margin-bottom: 30px;
    font-size: 2.2em;
    font-weight: 700;
}
.form-label-TaoBaiViet strong {
    color: #34495e;
}
.btn-primary-TaoBaiViet {
    width: 100%;
    padding: 10px;
    font-size: 1.1em;
    margin-top: 20px;
    background-color: #00bceb;
}
.btn-primary-TaoBaiViet:hover {
    width: 100%;
    padding: 10px;
    font-size: 1.1em;
    margin-top: 20px;
    background-color: #2682eb;
}

.alert-TaoBaiViet {
    margin-top: 20px;
}
.back-link-TaoBaiViet {
    display: inline-block;
    margin-top: 25px;
    font-weight: 500;
    color: #3498db;
    text-decoration: none;
    transition: color 0.2s ease;
}
.back-link-TaoBaiViet:hover {
    color: #2980b9;
}

/* Styles for the simple editor */
.editor-container {
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    margin-bottom: 1rem;
}

.editor-toolbar {
    background-color: #e9ecef;
    padding: 0.5rem;
    border-bottom: 1px solid #ced4da;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.editor-toolbar button {
    background-color: #f8f9fa;
    border: 1px solid #ced4da;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    cursor: pointer;
    font-size: 0.9rem;
}

.editor-toolbar button:hover {
    background-color: #e2e6ea;
}

.editor-toolbar button.active {
    background-color: #007bff;
    color: white;
    border-color: #007bff;
}

#content-editor {
    min-height: 300px; /* Chiều cao tối thiểu cho trình soạn thảo */
    padding: 1rem;
    outline: none; /* Bỏ outline mặc định */
    overflow-y: auto; /* Cuộn nếu nội dung dài */
    white-space: pre-wrap; /* Giữ nguyên các khoảng trắng và ngắt dòng */
    word-wrap: break-word; /* Tự động xuống dòng */
    border-radius: 0 0 0.375rem 0.375rem; /* Bo tròn góc dưới */
}

#content-editor:focus {
    border-color: #86b7fe; /* Màu viền khi focus */
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); /* Hiệu ứng focus */
}

.input-group {
    margin-bottom: 1rem;
}

/* Container cho dòng thông báo */
.running-text-container {
    width: 100%; /* Giữ nguyên hoặc điều chỉnh theo ý muốn */
    overflow: hidden;
    background-color: #f0f8ff;
    border: 1px solid #cceeff;
    /* THAY ĐỔI DÒNG NÀY: */
    /* padding: 4px 0; padding: [trên/dưới] [trái/phải] */
    /* hoặc bạn có thể dùng cả padding-top và padding-bottom */
    padding-top: 4px;
    /* padding-bottom: 4px; */

    /* margin-top: 10px; */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    text-align: center;
    /* Thêm bo tròn góc nếu muốn thẩm mỹ hơn */
    border-radius: 5px;
}

/* Kiểu cho văn bản chạy */
.running-text {
    white-space: nowrap;
    animation: marquee 20s linear infinite;
    display: inline-block;
    padding-left: 100%;
    font-size: 1.5em;
    color: #E4002B ;
    /* font-weight: bold; */
    /* Bạn có thể thêm line-height để kiểm soát chiều cao của dòng chữ bên trong */
    line-height: 1.5; /* Hoặc một giá trị cố định như 20px */
}

/* Keyframes giữ nguyên */
@keyframes marquee {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-100%);
    }
}

/* Điều chỉnh nếu bạn muốn chữ chạy từ trái sang phải hoặc theo tốc độ khác */
/* @keyframes marquee-rtl {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
} */

.fdk-form{
    display:flexbox;
    
}
.fdk-form table {
    width: 100%;
    border-collapse: collapse;
    
    margin-top: 20px;
}

.fdk-form thead th { /* Đảm bảo chọn đúng thẻ th trong thead của bảng */
    text-align: center;
    background-color: #e0e0e0;
    font-weight: bold;
    white-space: nowrap; /* Ngăn tiêu đề bị ngắt dòng */
}
.fdk-form  th, .fdk-form td {
    border: 1px solid #070606;
    font-size: 10px;
    text-align: left;

}
  .fdk-header {
    text-align: center;
    font-weight: bold;
    font-size: 10px;
    margin-bottom: 10px;
  }
  .fdk-subheader {
    font-weight: bold;
    margin-bottom: 5px;
  }
  .fdk-content {
    font-family: Arial, sans-serif;
    font-size:small;
    margin-bottom: 15px;
  }
  .fdk-instruction-list {
    list-style-type: none;
    padding: 0;
  }
  .fdk-instruction-list li {
    margin-bottom: 5px;
  }
  .fdk-note {
    font-style: italic;
    color: #555;
  }

/* Input Field Styles */


  .fdk-form td input[type="text"] {
    width: 100%;
    /* height: 100%; Make input fill the height of the cell */
    /* padding: 5px; Add padding inside the input field */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    border: none; /* Remove border from input field */
    /* text-align: center; Center text within the input field */
    font-size: 11px;; /* Match table font size */
    outline: none; /* Remove outline on focus */
  }

  #fdk-form select {
    width: 100%; /* Chiếm 100% chiều rộng của ô td */
    padding: 6px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; /* Rất quan trọng để padding và border không làm tràn */
    text-align: center; /* Căn giữa văn bản trong input/select */
}

/* Cột Năm Sinh NAM và NỮ */
#fdk-form td:nth-child(7), /* Cột Năm Sinh NAM */
#fdk-form td:nth-child(8) { /* Cột Năm Sinh NỮ */
    width: 100px;   /* Tăng độ rộng lên 100px */
    min-width: 100px; /* Đảm bảo không quá nhỏ, 90px là mức tối thiểu an toàn */
    text-align: center;  /* Căn giữa số STT */
    display: block;      /* Biến strong thành block để text-align hoạt động hiệu quả hơn */
    width: 100%;         /* Đảm bảo nó chiếm đủ chiều rộng của td */
}
/* Đảm bảo rằng thẻ <strong> trong cột STT không bị tràn */
/* Quy tắc CSS cho thẻ strong trong td của bảng #fdk-bang-dien */
#fdk-bang-dien td strong {
    white-space: nowrap; /* Ngăn số STT xuống dòng */
    font-size: 1em;    /* Điều chỉnh kích thước font cho số STT */
    text-align: center;  /* Căn giữa số STT */
    display: block;      /* Biến strong thành block để text-align hoạt động hiệu quả hơn */
    width: 100%;         /* Đảm bảo nó chiếm đủ chiều rộng của td */
}


  /* Specific column width adjustments (from previous responses) */
  .fdk-stt { width: 3%; }
  .fdk-hoten { width: 10%; }
  .fdk-gioitinh { width: 1%; max-width: 10px;}
  .fdk-cmnd { width: 8%; }
  .fdk-hotennguoithan { width: 10%; }
  .fdk-quanhe { width: 3%; }
  .fdk-namsinh { width: 4%;  min-width:40px;} /* Split into Nam/Nữ later */
  /* .fdk-dot { width: 5%; } */
  .fdk-cbv { width: 2%; }
  .fdk-nguoilon { width: 3%; }
  .fdk-treem { width: 3%; }
  .fdk-dienthoai { width: 7%; }
  .fdk-cuahang { width: 10%; }
  .fdk-ghichu { width: 20%; }

  .controls-container {
    margin: 20px;
    width: 100%;
    align-items: center;
    gap: 10px; /* Space between elements */
  }
  .btn-themdong {
    width: auto;
    /* margin-top: 20px; Khoảng cách trên nút */
    padding: 10px ;
    margin-left: 10px;
    font-size: 1.1em;
    
  }

  .the-benphai {
    float: right;
    /* Bạn có thể muốn xóa text-align: center; nếu không cần nữa */
    /* text-align: center; */
    margin-right: 15px; /* Thêm một chút khoảng cách từ cạnh phải */
}

/* Clearfix để tránh các vấn đề layout với float */
.parent-of-the-benphai::after {
    content: "";
    display: table;
    clear: both;
}

.the-benphai-time {
    float: right;
    /* Bạn có thể muốn xóa text-align: center; nếu không cần nữa */
    /* text-align: center; */
    margin-right: 15px; /* Thêm một chút khoảng cách từ cạnh phải */
}

/* Clearfix để tránh các vấn đề layout với float */
.parent-of-the-benphai-time::after {
    content: "";
    display: table;
    clear: both;
}

/* Container cho các hộp thống kê */
.stats-container {
    display: flex;
    flex-wrap: wrap; /* Cho phép các mục xuống dòng nếu không đủ chỗ */
    gap: 10px; /* Khoảng cách giữa các hộp thống kê */
    padding: 10px 0; /* Khoảng cách trên dưới container */
    /* background-color: #f0f2f5; Màu nền nhẹ cho toàn bộ khu vực thống kê (tùy chọn) */
    border-radius: 5px; /* Bo tròn góc container (tùy chọn) */
    align-items: center; /* Căn giữa các item theo chiều dọc */
}

/* Kiểu dáng cho mỗi hộp thống kê */
.stat-item {
    background-color: #e9ecef; /* Màu nền mặc định (xám nhạt) */
    color: #495057; /* Màu chữ mặc định */
    padding: 8px 12px;
    border-radius: 20px; /* Góc bo tròn nhiều hơn để trông như viên thuốc */
    font-size: 0.95em;
    font-weight: 500; /* Độ đậm chữ */
    display: flex;
    align-items: center; /* Căn giữa nội dung trong hộp */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Hiệu ứng bóng đổ nhẹ */
    transition: all 0.2s ease-in-out; /* Hiệu ứng chuyển đổi mượt mà */
}

/* Kiểu dáng khi giá trị < khung (highlighted) */
.stat-item.highlighted {
    background-color: #dc3545; /* Màu đỏ tươi */
    color: #ffffff; /* Chữ trắng */
    font-weight: bold; /* Chữ đậm hơn */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Bóng đổ nổi bật hơn */
    transform: translateY(-2px); /* Nhấn nhá nhẹ khi có giá trị */
}

/* Kiểu dáng khi giá trị > 0 (highlighted) */
.stat-item.highblue {
    background-color: #49da2c; /* Màu đỏ tươi */
    color: #ffffff; /* Chữ trắng */
    font-weight: bold; /* Chữ đậm hơn */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Bóng đổ nổi bật hơn */
    transform: translateY(-2px); /* Nhấn nhá nhẹ khi có giá trị */
}

/* Kiểu dáng cho phần nhãn (ví dụ: "Không:", "TS:") */
.stat-item .stat-label {
    margin-right: 5px; /* Khoảng cách giữa nhãn và giá trị */
    /* font-weight: bold; (Nếu bạn muốn nhãn đậm hơn nữa) */
}

/* Kiểu dáng cho phần giá trị (ví dụ: "0", "5") */
.stat-item .stat-value {
    font-weight: bold;
}

/* Tùy chỉnh màu sắc riêng cho từng loại thống kê (nếu muốn) */
/* Bạn sẽ cần thêm class tương ứng trong JS (ví dụ: stat-khong, stat-ts) */
/*
.stat-item.stat-khong { background-color: #f8d7da; color: #721c24; }
.stat-item.stat-ts { background-color: #d1ecf1; color: #0c5460; }
.stat-item.stat-1 { background-color: #d4edda; color: #155724; }
.stat-item.stat-2 { background-color: #cce5ff; color: #004085; }
*/

.fdk-dot-list span{
    padding-left: 20px;
    font-weight: bold;
}

/* Clearfix để tránh các vấn đề layout với float */
.parent-of-the-fdk-dot-list::after {
    content: "";
    display: table;
    clear: both;
}



.cd-dot table {
    width: 50%; /* Điều chỉnh độ rộng nếu cần */
    border-collapse: collapse;
    margin: 20px auto;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    font-size: medium;
}

.cd-dot th, .cd-dot td {
    border: 1px solid #ccc;
    padding: 8px 12px;
    text-align: left;
    vertical-align: middle;
}
.cd-dot th {
    background-color: #e0e0e0;
    font-weight: bold;
    white-space: nowrap; /* Ngăn tiêu đề bị ngắt dòng */
}
.cd-dot td input[type="text"],
.cd-dot td input[type="number"],
.cd-dot td textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 5px;
    border: 1px solid #ddd;
    border-radius: 4px;
}
.cd-dot td textarea {
    resize: vertical; /* Cho phép thay đổi kích thước theo chiều dọc */
    min-height: 40px;
}
.cd-dot-button-group {
    margin-top: 20px;
    text-align: center;
}
.cd-dot-button-group button {
    padding: 8px 15px;
    margin-left: 10px;
    cursor: pointer;
    border: none;
    border-radius: 5px;
    font-size: 14px;
}
.cd-dot-button-group #cd-dot-add-dot-btn {
    background-color: #28a745;
    color: white;
}
.cd-dot-action-buttons button {
    background-color: #007bff;
    color: white;
    margin-right: 5px;
}
.cd-dot-action-buttons button.cd-dot-delete-btn {
    background-color: #dc3545;
}
.cd-dot-action-buttons button.cd-dot-save-btn {
    background-color: #ffc107; /* Màu vàng cho nút lưu */
    color: #333;
}
.cd-dot-loader {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 2s linear infinite;
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.cd-dot-status-message {
    margin-top: 10px;
    padding: 8px;
    border-radius: 4px;
    display: none; /* Ẩn ban đầu */
}
.cd-dot-status-message.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}
.cd-dot-status-message.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.cd-dot-td-ID { width: 3%; }
.cd-dot-td-text { width: 10%; }
.cd-dot-td-so { width: 5%; }
.cd-dot-td-ghichu { width: 50%; }

.fdk-error {
    border-color: red;
    background-color: #ffe0e0;
    box-shadow: 0 0 0 0.2rem rgba(255, 0, 0, 0.25);
}


.baocao-DK table {
    /* width: 50%; Điều chỉnh độ rộng nếu cần */
    border-collapse: collapse;
    margin: 20px auto;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    font-size:small;
}

.baocao-DK th, .baocao-DK td {
    border: 1px solid #ccc;
    text-align: center;
    vertical-align: middle;
}
.baocao-DK th {
    background-color: #e0e0e0;
    font-weight: bold;
    white-space: nowrap; /* Ngăn tiêu đề bị ngắt dòng */
}
.baocao-DK td input[type="text"],
.baocao-DK td input[type="number"],
.baocao-DK td textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 5px;
    border: 1px solid #ddd;
    border-radius: 4px;
}



.baocao-button-group {
    margin-top: 20px;
    text-align: center;
}
.baocao-button-group button {
    padding: 8px 15px;
    margin-left: 10px;
    cursor: pointer;
    border: none;
    border-radius: 5px;
    font-size: 14px;
}
.baocao-button-group #saveExcelBtn {
    background-color: #28a745;
    color: white;
}
.baocao-action-buttons button {
    background-color: #007bff;
    color: white;
    margin-right: 5px;
}
.baocao-loader {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 2s linear infinite;
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.baocao-status-message {
    margin-top: 10px;
    padding: 8px;
    border-radius: 4px;
    display: none; /* Ẩn ban đầu */
}
.baocao-status-message.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}
.baocao-status-message.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}