.esg-container {
  container-type: inline-size;
  width: 100%;
}

.table-esg {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.table-esg th,
.table-esg td {
  border: 1px solid #ddd;
  padding: 8px 12px;
  text-align: center;
  vertical-align: middle;
}

.table-esg th {
  font-weight: 600;
  color: #fff;
  text-transform: uppercase;
  font-size: 11px;
}

.table-esg th.available {
  background: #28a745 !important;
}

.table-esg th.not-available {
  background: #dc3545 !important;
}

.table-esg th.in-progress {
  background: #ffc107 !important;
  color: #333;
}

.table-esg th.not-applicable {
  background: #6c757d !important;
  color: #fff;
}

.table-esg th.indication {
  background: #007bff !important;
}

.table-esg th.qr-code {
  background: #17a2b8 !important;
}

.table-esg th.remarks {
  background: #343a40 !important;
}

.dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.dot-green {
  background: #28a745;
}

.dot-red {
  background: #dc3545;
}

.dot-yellow {
  background: #ffc107;
}

.dot-gray {
  background: #6c757d;
}

.table-esg .col-group {
  font-weight: 700;
  background: #f8f9fa;
  text-align: left;
  color: #333;
}

.table-esg .col-criteria {
  text-align: left;
  font-weight: 500;
}

.table-esg a {
  text-decoration: none;
  color: #007bff;
}

.table-esg a:hover {
  text-decoration: underline;
}

/* =========================================================
   IMPORTANT: Không dùng pseudo group label nữa (data-group-label)
   -> Tắt hẳn tr:before để tránh bị chèn title group trên desktop/mobile
   ========================================================= */
.table-esg tr:before { display: none !important; }

/* Hide group header row (mobile-only row) by default */
.table-esg tbody tr.esg-group-row-mobile { display: none !important; }

/* =========================================================
   Desktop Lớn (Container > 1200px) - Bảng đầy đủ với Ghi chú
   ========================================================= */
@container (min-width: 1201px) {
  .table-esg tbody tr.esg-group-row-mobile { display: none !important; }

  .table-esg .col-group {
    width: 12%;
  }

  .table-esg .col-criteria {
    width: 24%;
  }

  .table-esg .col-available {
    width: 4%;
  }

  .table-esg .col-not-available {
    width: 4%;
  }

  .table-esg .col-in-progress {
    width: 4%;
  }

  .table-esg .col-not-applicable {
    width: 4%;
  }

  .table-esg .col-indication {
    width: 13%;
  }

  .table-esg .col-qr {
    width: 21%;
  }

  .table-esg .col-remarks {
    width: 14%;
  }

  .table-esg .col-qr img {
    width: 100%;
    max-width: 150px;
    height: auto;
    display: block;
    margin: 0 auto;
  }
}

/* =========================================================
   Desktop Trung bình (701px - 1200px) - Bảng KHÔNG có Ghi chú
   ========================================================= */
@container (min-width: 701px) and (max-width: 1200px) {
  .table-esg tbody tr.esg-group-row-mobile { display: none !important; }

  /* Ẩn cột Ghi chú */
  .table-esg .remarks,
  .table-esg .col-remarks {
    display: none;
  }

  .table-esg .col-group {
    width: 12%;
  }

  .table-esg .col-criteria {
    width: 25%;
  }

  .table-esg .col-available {
    width: 4%;
  }

  .table-esg .col-not-available {
    width: 4%;
  }

  .table-esg .col-in-progress {
    width: 4%;
  }

  .table-esg .col-not-applicable {
    width: 4%;
  }

  .table-esg .col-indication {
    width: 14%;
  }

  .table-esg .col-qr {
    width: 33%;
  }

  .table-esg .col-qr img {
    width: 100%;
    max-width: 150px;
    height: auto;
    display: block;
    margin: 0 auto;
  }
}

/* =========================================================
   Tablet & Mobile - Giao diện Thẻ (Container <= 700px)
   ========================================================= */
@container (max-width: 700px) {

  .table-esg,
  .table-esg thead,
  .table-esg tbody,
  .table-esg th,
  .table-esg td,
  .table-esg tr {
    display: block;
  }

  .table-esg thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  /* Row item kiểu card */
  .table-esg tr {
    border: 1px solid #ccc;
    margin-bottom: 15px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    background: #fff;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
  }

  .table-esg td {
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
    padding: 10px;
    text-align: left;
  }

  /* Ẩn ô group desktop (rowspan) */
  .table-esg .col-group-desktop {
    display: none;
  }

  /* ===== Mobile Group Header Row (có icon i) ===== */
  .table-esg tbody tr.esg-group-row-mobile {
    display: block !important;      /* hiện ở mobile */
    width: 100%;
    margin-bottom: 8px;

    /* Không bị style card của .table-esg tr ăn vào */
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  .table-esg tbody tr.esg-group-row-mobile td.esg-group-cell {
    display: block;
    width: 100%;
    background: #e9ecef;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    padding: 8px;
    color: #333;

    border: 1px solid #ccc;
    border-radius: 5px;
  }

  /* Tên Chứng chỉ - Toàn chiều rộng */
  .table-esg .col-criteria {
    width: 100%;
    background: #f8f9fa;
    font-weight: bold;
    color: #333;
    order: 2;
    padding-left: 15px;
  }

  .table-esg .col-criteria:before {
    content: "Certificate: ";
    font-weight: normal;
    color: #666;
  }

  /* Các cột Trạng thái */
  .table-esg .col-status {
    width: 25%;
    order: 3;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #eee;
    padding: 5px;
    min-height: 50px;
  }

  .table-esg .col-status:before {
    content: attr(data-label);
    display: block;
    font-size: 10px;
    color: #777;
    margin-bottom: 5px;
    text-transform: uppercase;
    text-align: center;
    white-space: normal;
    line-height: 1.2;
  }

  /* Chỉ dẫn & Mã QR */
  .table-esg .col-indication,
  .table-esg .col-qr {
    width: 50%;
    order: 4;
    border-bottom: 1px solid #eee;
    padding: 10px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  /* Đường phân cách dọc giữa Chỉ dẫn và Mã QR */
  .table-esg .col-indication {
    border-right: 1px solid #eee;
  }

  /* Ghi chú */
  .table-esg .col-remarks {
    width: 100%;
    order: 5;
    border-bottom: none;
    padding-top: 25px;
  }

  /* Nhãn cho Chỉ dẫn, QR, Ghi chú */
  .table-esg .col-indication:before,
  .table-esg .col-qr:before,
  .table-esg .col-remarks:before {
    content: attr(data-label);
    color: #555;
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 600;
  }

  .table-esg .col-indication:before,
  .table-esg .col-qr:before {
    display: block;
    margin-bottom: 5px;
  }

  .table-esg .col-remarks:before {
    display: block;
    margin-bottom: 5px;
    align-self: flex-start;
  }
}

/* =========================================================
   Status-based Coloring (Card Layout <= 700px)
   NOTE: không dùng :before nữa (đã tắt ở đầu file)
   ========================================================= */
@container (max-width: 700px) {

  /* Available (Green) */
  .table-esg tr.status-available {
    border-color: #c3e6cb;
  }

  .table-esg tr.status-available td {
    border-bottom-color: #e3eec8;
  }

  .table-esg tr.status-available .col-criteria {
    background-color: #f0fff4;
  }

  /* Not Available (Red) */
  .table-esg tr.status-not-available {
    border-color: #f5c6cb;
  }

  .table-esg tr.status-not-available td {
    border-bottom-color: #f5c6cb;
  }

  .table-esg tr.status-not-available .col-criteria {
    background-color: #fff5f5;
  }

  /* In Progress (Yellow) */
  .table-esg tr.status-in-progress {
    border-color: #ffeeba;
  }

  .table-esg tr.status-in-progress td {
    border-bottom-color: #ffeeba;
  }

  .table-esg tr.status-in-progress .col-criteria {
    background-color: #fffff0;
  }

  /* Not Applicable (Gray) */
  .table-esg tr.status-not-applicable {
    border-color: #d6d8db;
  }

  .table-esg tr.status-not-applicable td {
    border-bottom-color: #d6d8db;
  }

  .table-esg tr.status-not-applicable .col-criteria {
    background-color: #fcfcfc;
  }
}