/* assets/css/won-advanced-entries.css */

/* --- Popup Styling chung --- */
#popup-advanced-entries {
  display: none;
  position: fixed;
  z-index: 1050;
  left: 0;
  top: 0;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  background-color: transparent; /* << THAY ĐỔI Ở ĐÂY */
  font-size: 14px; /* Đặt font-size cơ sở cho popup */
}
#popup-advanced-entries .popup-content {
  background-color: #fefefe;
  margin: 2dvh auto; /* Sử dụng vh để căn giữa tốt hơn theo chiều cao */
  padding: 15px;
  border: 1px solid #888;
  /* width: 95%; /* << CÓ THỂ BỎ DÒNG NÀY */
  max-width: 600px; /* Giảm max-width một chút để dễ quản lý layout hơn */
  min-width: 300px; /* << THÊM chiều rộng tối thiểu để không bị quá hẹp */
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2),0 6px 20px rgba(0,0,0,0.19);
  display: flex;
  width: auto; /* << THAY ĐỔI: Để nó tự co theo nội dung, nhưng không vượt quá max-width */
  flex-direction: column;
  max-height: 96dvh; /* Cho phép chiều cao lớn hơn một chút */
  box-sizing: border-box;
  position: relative; /* << THÊM DÒNG NÀY */
}
#popup-advanced-entries .popup-header {
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
  margin-bottom: 10px;
  display: flex;
  justify-content: center; /* Căn giữa tiêu đề */
  align-items: center;
  flex-shrink: 0;
  position: relative;
}
#popup-advanced-entries .popup-header h3 {
  margin: 0;
  font-size: 1.2em;
  /* Không cần padding-right nếu nút close được định vị chính xác */
}
#popup-advanced-entries .popup-close-btn {
  background: transparent;
  border: none;
  font-size: 20px; /* Điều chỉnh kích thước nút X */
  cursor: pointer;
  padding: 5px; /* Thêm padding để dễ click hơn */
  line-height: 1;
  position: absolute;
  top: -5px; /* Điều chỉnh vị trí nút X cho chính xác */
  right: -5px;
  z-index: 10; /* Đảm bảo nút X nằm trên */
}
.popup-close-btn:focus-visible {
    outline: 2px solid #007bff !important; /* Viền xanh biển nổi bật */
    outline-offset: 2px;
    border-radius: 4px; /* Bo góc mượt mà nếu nút của mày có bo góc */
}
#popup-advanced-entries .popup-close-btn .dashicons { vertical-align: top; }
#popup-advanced-entries .popup-body#advanced-entries-list-container {
  overflow-y: auto;
  overflow-x: hidden; /* << THÊM DÒNG NÀY để ẩn thanh cuộn ngang nếu có */
  flex-grow: 1;
  /* padding-right: 8px; */ /* << THỬ BỎ DÒNG NÀY */
  margin-bottom: 10px;
}
#popup-advanced-entries .popup-footer { padding-top: 10px; border-top: 1px solid #eee; text-align: right; flex-shrink: 0; }
#popup-advanced-entries .popup-footer .popup-btn { padding: 7px 14px; margin-left: 8px; border: none; border-radius: 4px; cursor: pointer; font-size: 0.9em; }
#popup-advanced-entries .popup-footer .popup-btn#popup-advanced-ok { background-color: #007bff; border: 1px solid #00ff48 !important; color: white; }
#popup-advanced-entries .popup-footer .popup-btn#popup-advanced-cancel { 
background-color: #6c757d; 
border: 1px solid #8e0d0d !important; 
color: white; }
body.theme-dark #popup-advanced-entries .popup-footer .popup-btn#popup-advanced-ok { background-color: #007bff; border: 1px solid #fff !important; color: white; }
body.theme-dark #popup-advanced-entries .popup-footer .popup-btn#popup-advanced-ok:hover  { background-color: #207805; 
border: 1px solid #fff !important; 
color: white; }
body.theme-dark #popup-advanced-entries .popup-footer .popup-btn#popup-advanced-cancel { 
background-color: #6c757d; 
border: 1px solid #fff !important; 
color: white; }
body.theme-dark #popup-advanced-entries .popup-footer .popup-btn#popup-advanced-cancel:hover { 
background-color: #8e0d0d; 
border: 1px solid #fff !important; 
color: white; }
#popup-advanced-entries .popup-footer .popup-btn#popup-advanced-cancel:hover { 
background-color: #8e0d0d; 
border: 1px solid #8e0d0d !important; 
color: white; }
#popup-advanced-entries .popup-footer .popup-btn#popup-advanced-ok:hover  { background-color: #207805; 
border: 1px solid #00ff48 !important; 
color: white; }
/* Tự động bắt sự kiện Tab tới 2 nút Cancel/OK */
#popup-advanced-cancel:focus-visible,
#popup-advanced-ok:focus-visible {
    outline: 2px solid #007bff !important; /* Viền xanh chuẩn quốc tế */
    outline-offset: 2px !important;
    border-radius: 4px;
    box-shadow: 0 0 8px rgba(0, 123, 255, 0.4); /* Phát hào quang nhẹ */
}
/* Hiệu ứng viền khi dùng phím Tab tới */
.individual-color-icon:focus-visible {
    outline: 2px solid #007bff !important; /* Viền xanh biển rực rỡ */
    outline-offset: 2px;
    
    /* Tuỳ chọn: Nếu icon của sếp hình tròn thì bo góc luôn cho viền nó ôm sát */
    border-radius: 50%; 
    
    /* Thêm tí hào quang cho sang chảnh */
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); 
}

/* Thêm con trỏ chuột bàn tay cho nó chuẩn UI */
.individual-color-icon {
    cursor: pointer;
}

/* 2. TRẠNG THÁI DI CHUỘT (HOVER) */
.individual-color-icon:hover {
    /* Viền màu xanh dương sáng (#29b6f6) */
    border-color: #29b6f6 !important;
    
    /* Hiệu ứng phát sáng (Glow) màu xanh */
    /* Cú pháp: ngang - dọc - độ mờ - màu sắc */
    box-shadow: 0 0 3px rgba(41, 182, 246, 0.8) !important;
    
    /* Phóng to nhẹ 10% cho sinh động */
    transform: scale(1.1);
    
    /* (Tùy chọn) Nếu muốn thêm nền mờ nhẹ để icon rõ hơn */
    /* background-color: rgba(41, 182, 246, 0.1) !important; */
}
/* --- Định dạng cho mỗi hàng entry (entryRow) --- */
.advanced-entry-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 2px; /* Giảm padding một chút */
  border-bottom: 2px dotted #262626;
}
.advanced-entry-row:last-child { border-bottom: none; }
.advanced-entry-row.disabled-entry { opacity: 0.6; background-color: #f9f9f9; }
.advanced-entry-row.disabled-entry > div > *:not(.entry-enable-wrapper):not(.enable-entry-checkbox),
.advanced-entry-row.disabled-entry > div > div > *:not(.entry-enable-wrapper):not(.enable-entry-checkbox) { pointer-events: none; }
.advanced-entry-row.disabled-entry .enable-entry-checkbox { pointer-events: auto !important; }

/* --- Các sub-row --- */
.adv-entry-primary-controls-row,
.adv-entry-secondary-controls-row {
  display: flex;
  flex-wrap: wrap; /* **QUAN TRỌNG:** Mặc định cho phép wrap, sẽ điều chỉnh sau cho desktop */
  align-items: center;
  gap: 8px;
}

/* ==========================================================================
   CẤU HÌNH CHUẨN CHO NÚT ICON (.adv-icon-btn)
   ========================================================================== */
/* Tự động bắt sự kiện Tab tới mọi nút có class này */
.adv-icon-btn:focus-visible {
    outline: 2px solid #007bff !important;
    outline-offset: 2px !important;
    border-radius: 4px;
}
/* 1. CẤU HÌNH CHUNG (Mặc định) */
.adv-icon-btn {
    /* Định dạng vị trí */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    cursor: pointer;
    border-radius: 4px;
    line-height: 1;
    
    /* QUAN TRỌNG: Đặt viền trong suốt 2px để giữ chỗ (tránh nhảy hình) */
    /* Xóa bỏ dòng border: none cũ đi nhé */
    border: 2px solid transparent !important; 
    
    /* Đảm bảo nền trong suốt ở trạng thái bình thường (trừ khi có style đè) */
    background-color: transparent; 

    /* Hiệu ứng mượt */
    transition: all 0.2s ease;
}

/* 2. HIỆU ỨNG DI CHUỘT (HOVER) - CHUNG CHO TẤT CẢ */
/* Tất cả các nút đều sẽ có viền vàng và bóng vàng */
.adv-icon-btn:hover {
    border-color: #ffcc00 !important;
    box-shadow: 0 0 9px rgba(107, 246, 228, 1) !important;
    transform: scale(1.1);
}

/* 3. XỬ LÝ MÀU NỀN (QUAN TRỌNG NHẤT) */

/* Trường hợp A: Các nút thông thường (Xóa, Upload...) -> ÉP NỀN TRONG SUỐT */
/* Dịch: Nếu nút này KHÔNG PHẢI (.not) là nút chọn màu (.entry-color-picker-btn) thì xóa nền đi */
.adv-icon-btn:not(.entry-color-picker-btn):hover {
    background-color: transparent !important;
    background: none !important;
}


/* Trường hợp B: Nút chọn màu (.entry-color-picker-btn) */
/* Ta KHÔNG viết gì ở đây cả. 
   Trình duyệt sẽ tự động giữ lại màu nền xanh (Green) từ style="..." trong HTML của bạn. */

.adv-icon-btn-order { font-size: 1em; padding: 1px 3px;} /* Nút mũi tên */
.adv-img-icon { width: 20px; height: 20px; vertical-align: middle; } /* Icon ảnh duplicate */
.adv-icon-btn .dashicons, .adv-icon-btn { font-size: 18px; vertical-align: middle; } /* Size chung cho icon/emoji */


/* --- Hàng 1: Order, Text Input, Main Actions --- */
.adv-entry-primary-controls-row .entry-order-controls {
  flex-shrink: 0;
  align-self: center; /* Đảm bảo nút order căn giữa với ô text */
}
.adv-entry-primary-controls-row .entry-text-wrapper {
  /* flex-grow: 1; /* Bỏ hoặc đặt là 0 nếu không muốn nó co giãn nữa */	
  flex-grow: 1; /* Cho ô text co giãn */
  flex-shrink: 0; /* Ngăn co lại */
  width: 188px;   /* << THÊM: Đặt chiều rộng cố định */
  flex-basis: 150px; /* Chiều rộng cơ sở, sẽ co lại nếu cần */
  min-width: 188px; /* Đảm bảo không bị thu nhỏ hơn */
  margin-right: 8px; /* Thêm khoảng cách với cụm icon bên phải */
}
.entry-text-input {
  width: 100%; padding: 6px 8px; border: 1px solid #ccc;
  border-radius: 4px; font-size: 0.9em; box-sizing: border-box;
}
.adv-entry-primary-controls-row .entry-main-actions-wrapper {
  display: flex; align-items: center;
  flex-wrap: wrap; /* Cho phép các icon trong này xuống dòng nếu không đủ chỗ */
  gap: 6px; /* Giảm khoảng cách giữa các icon Màu, Ảnh, Sound, Duplicate */
  flex-basis: 100%; /* Nếu muốn nó luôn chiếm một hàng mới khi wrap ở .adv-entry-primary-controls-row */
  flex-shrink: 0;
  margin-left: auto; /* Đẩy nhóm này về bên phải trên desktop nếu còn chỗ */
}
.entry-image-action-wrapper { display: flex; align-items: center; }
.entry-thumbnail { width: 22px; height: 22px; border: 1px solid #ddd; object-fit: cover; margin-left: 3px; border-radius: 3px; }
.entry-color-picker-btn { width: 24px !important; height: 24px !important; border: 1px solid #ccc !important; box-sizing: border-box; border-radius: 4px;}


/* --- Hàng 2: Weight, Popup Message, Enable, Delete --- */
.adv-entry-secondary-controls-row {
  display: flex;
  flex-wrap: wrap; /* Cho phép xuống dòng trên mobile */
  align-items: center;
  gap: 8px;
}
.entry-weight-wrapper {
  display: flex; align-items: center; border: 1px solid #ccc; border-radius: 4px;
  padding: 2px 4px; flex-shrink: 0;
  /* width: 145px; /* Ước lượng chiều rộng cố định cho Weight */
  box-sizing: border-box;
}
.entry-weight-wrapper .weight-icon { font-size: 18px; /* Icon cán cân nhỏ hơn */ margin-right: 3px; line-height: 1; }
.entry-weight-wrapper input[type="number"].entry-weight-input {
  width: 38px; /* Ô số nhỏ hơn */
  text-align: center; border: none; padding: 4px 0; font-size: 0.85em; -moz-appearance: textfield;
}
.entry-weight-wrapper input[type="number"]::-webkit-outer-spin-button,
.entry-weight-wrapper input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.entry-weight-wrapper .weight-change-btn { padding: 1px 4px; line-height: 1; font-size: 0.85em; border: 1px solid #cccccc; background-color: #f9f9f9; min-width: 20px; }
.entry-weight-wrapper .weight-percentage { font-size: 0.75em; color: #555; min-width: 35px; text-align: right; padding-left: 3px; }

.entry-popup-message-wrapper {
  /* width: 145px; /* Chiều rộng bằng ô weight */
  flex-grow: 1; /* Cho phép nó co giãn để lấp đầy không gian còn lại với các mục khác trên hàng 2 */
  flex-basis: 120px; /* Chiều rộng cơ sở */
  min-width: 100px;
  box-sizing: border-box;
}
.custom-popup-message-input {
  width: 100%; padding: 6px 8px; border: 1px solid #ccc;
  border-radius: 3px; font-size: 0.9em; box-sizing: border-box;
}

.entry-enable-wrapper { display: flex; align-items: center; flex-shrink: 0; }
.enable-entry-checkbox { width: 22px; height: 22px; min-width: 20px; min-height: 20px; cursor: pointer; margin: 0; }
.entry-enable-wrapper label { /* Đảm bảo label không có padding/margin gây ảnh hưởng */
    padding-left: 0;
    margin: 0;
    display: flex; /* Giúp căn chỉnh checkbox bên trong label nếu cần */
    align-items: center;
}
.entry-delete-wrapper { flex-shrink: 0; }
.adv-icon-btn-delete { font-size: 14px !important; /* Icon xóa nhỏ hơn, khoảng 1/2 của 20px là 10px, 14px có thể dễ nhìn hơn */ }
.adv-icon-btn-delete .adv-img-icon { width: 14px !important; height: 14px !important; }


/* === Desktop First: Điều chỉnh cho màn hình lớn hơn === */
@media (min-width: 769px) {
  .adv-entry-primary-controls-row,
  .adv-entry-secondary-controls-row {
    flex-wrap: nowrap; /* Ngăn không cho các nhóm chính xuống dòng trên desktop */
  }
  .adv-entry-primary-controls-row .entry-text-wrapper {
     /* Giảm max-width để nhường chỗ cho icon, ví dụ */
     max-width: calc(100% - 220px); /* 220px là ước lượng cho nút order và cụm icon actions */
  }
  .adv-entry-secondary-controls-row {
    justify-content: flex-start; /* Căn các nhóm về trái */
  }
  .entry-weight-wrapper {
    width: auto; /* Để nó tự co theo nội dung trên desktop */
    /* Hoặc đặt width cố định nếu muốn */
    /* width: 160px; */
  }
  .entry-popup-message-wrapper {
    width: auto; /* Tự co theo nội dung trên desktop */
    max-width: 200px; /* Giới hạn lại để không quá dài */
    /* Nếu muốn bằng ô weight thì đặt width cố định giống weight */
    /* width: 160px; */
  }
}

/* === Mobile Specific Adjustments === */
@media (max-width: 768px) {
  #popup-advanced-entries .popup-content { /* 🔥 KẸP THÊM CÁI ID VÀO CHO CHẮC CỐP TRÁNH ĐỤNG HÀNG */
    margin: 2dvh auto; /* 🔥 ĐỔI 5% THÀNH 2dvh CHO NÓ ĐO ĐÚNG CHIỀU CAO THỰC TẾ */
    padding: 10px;
  }
}
  
/* === Mobile Specific Adjustments === */
@media (max-width: 768px) {
  .popup-content {
    margin: 5% auto; /* Tăng margin top cho mobile */
    padding: 10px;
  }
  .advanced-entry-row {
    gap: 12px; /* Tăng khoảng cách giữa 2 hàng trên mobile */
  }

  /* Trong @media (max-width: 768px) */
  .adv-entry-primary-controls-row {
	display: flex;
    flex-wrap: wrap; /* Vẫn cho phép wrap tổng thể nếu cần */
	align-items: center; /* Căn giữa các item theo chiều dọc */
    gap: 8px;
  }
  .adv-entry-primary-controls-row .entry-order-controls {
	flex-shrink: 0; /* Không cho co lại */
    margin-right: 5px; /* Giữ khoảng cách với ô text */
  }
  .adv-entry-primary-controls-row .entry-text-wrapper {
    flex-grow: 1; /* Cho ô text co giãn để chiếm phần còn lại của dòng với nút order */
	flex-shrink: 1; /* Cho phép co lại nếu cần */
    /*flex-basis: calc(100% - 70px); /* Bỏ flex-basis nếu muốn nó co giãn hoàn toàn dựa trên flex-grow */
    min-width: 100px; /* Không để quá hẹp */
    /* max-width: none; /* Bỏ max-width để nó tự điều chỉnh */
  }
  .adv-entry-primary-controls-row .entry-main-actions-wrapper {
    width: 100%; /* Nhóm icon actions xuống dòng và chiếm cả hàng */
    justify-content: flex-start; /* Căn trái các icon */
    margin-left: 0; /* Reset margin-left */
    margin-top: 8px; /* Khoảng cách với ô text khi xuống dòng */
    gap: 8px;
  }

  /* Hàng 2 trên mobile: [Weight] [Popup Msg] [Enable] [Delete] - Cố gắng trên 1 dòng */
  .adv-entry-secondary-controls-row {
    flex-wrap: nowrap; /* Cố gắng giữ trên 1 dòng */
    justify-content: space-between; /* Phân bố đều nếu có thể */
    overflow-x: auto; /* Cho phép cuộn ngang nếu vẫn quá dài */
    padding-bottom: 5px; /* Tạo không gian cho thanh cuộn ngang nếu xuất hiện */
    gap: 6px;
  }
  .entry-weight-wrapper {
    /* width: auto; */ /* Để tự co lại */
    flex-shrink: 1; /* Cho phép co lại một chút nếu cần */
    min-width: 130px; /* Giữ đủ không gian cho các nút bên trong */
  }
  .entry-popup-message-wrapper {
    /* width: auto; */
    flex-grow: 1; /* Co giãn để lấp đầy */
    flex-basis: 100px; /* Chiều rộng cơ sở */
    min-width: 80px;
  }
  .entry-enable-wrapper,
  .entry-delete-wrapper {
    flex-shrink: 0; /* Không cho co lại */
  }
}

@media (max-width: 480px) {
  /* Nếu trên màn hình rất nhỏ, hàng 2 có thể cần phải xuống dòng từng phần */
  .adv-entry-secondary-controls-row {
	display: flex;
    flex-wrap: nowrap; /* << THAY ĐỔI: Cố gắng giữ trên một hàng */
    align-items: center; /* Căn giữa các item theo chiều dọc */
    gap: 8px; /* Khoảng cách giữa ô weight và ô message */
  }
  .entry-weight-wrapper,
  .entry-popup-message-wrapper,
  .entry-enable-wrapper,
  .entry-delete-wrapper {
    width: auto; /* Tự điều chỉnh */
    flex-basis: auto; /* Reset flex-basis */
    margin-bottom: 8px; /* Khoảng cách khi xuống dòng */
  }
  .entry-weight-wrapper {
    flex-shrink: 0; /* Không cho ô weight co lại quá nhiều */
    min-width: 150px; /* Đảm bảo đủ rộng */
  }
  .entry-popup-message-wrapper {
    flex-grow: 1;     /* << THAY ĐỔI: Cho phép ô message co giãn để lấp đầy không gian còn lại */
    flex-shrink: 1;   /* << THAY ĐỔI: Cho phép ô message co lại nếu cần */
	min-width: 100px; /* << THAY ĐỔI: Đặt chiều rộng tối thiểu hợp lý, không phải 100% */
    /* width: auto; */ /* Bỏ width auto */
    /* margin-bottom: 0; */ /* Bỏ margin-bottom */
  }
  /* Đảm bảo input bên trong chiếm 100% wrapper của nó */
  .custom-popup-message-input {
      width: 100%;
  }
}

/* Dark Mode (Copy từ lần trước, điều chỉnh nếu cần sau khi layout ổn) */
body.theme-dark #popup-advanced-entries .popup-content { background-color: #282c34; color: #abb2bf; border-color: #3e4451; }
body.theme-dark #popup-advanced-entries .popup-header { border-bottom-color: #3e4451; }
body.theme-dark #popup-advanced-entries .popup-header h3 { color: #e6efff; }
body.theme-dark #popup-advanced-entries .popup-close-btn .dashicons { color: #abb2bf; }
body.theme-dark .advanced-entry-row { border-bottom-color: #3e4451; }
body.theme-dark .advanced-entry-row.disabled-entry { background-color: #31353f; opacity: 0.5; }
body.theme-dark .entry-text-input,
body.theme-dark .entry-weight-wrapper input[type="number"].entry-weight-input,
body.theme-dark .custom-popup-message-input {
  background-color: #1e2228; color: #d0d8e2; border-color: #4b5260;
}
body.theme-dark .entry-text-input::placeholder,
body.theme-dark .custom-popup-message-input::placeholder { color: #788290; }
body.theme-dark .entry-weight-wrapper { border-color: #eaeaea; }
body.theme-dark .entry-weight-wrapper .weight-change-btn { background-color: #3a3f4b; border-color: #fff; color: #fff; }
/* ========================================================================= */
/* NÚT THAY ĐỔI TRỌNG LƯỢNG (WEIGHT CHANGE) - DARK MODE */
/* ========================================================================= */

/* 1. Tạo độ mượt (transition) cho nút để lúc đổi màu nó không bị giật cục */
body.theme-dark .weight-change-btn {
    transition: all 0.2s ease-in-out;
}

/* 2. KHI DI CHUỘT VÀO (HOVER): Đổi thành màu Xanh dương, chữ Trắng, phát sáng nhẹ */
body.theme-dark .weight-change-btn:hover {
    background-color: #007bff !important; /* Nền xanh dương rực rỡ */
    color: #ffffff !important;            /* Chữ trắng cho dễ đọc */
    border-color: #007bff !important;     /* Viền cũng xanh luôn */
    box-shadow: 0 0 8px rgba(0, 123, 255, 0.6) !important; /* Tỏa hào quang xanh */
    cursor: pointer;
}

/* 3. KHI BẤM CHUỘT XUỐNG (ACTIVE): Màu tối đi một chút và lún xuống */
body.theme-dark .weight-change-btn:active {
    background-color: #0056b3 !important; /* Chuyển sang xanh đậm hơn */
    border-color: #0056b3 !important;
    box-shadow: none !important;          /* Tắt hào quang khi đang bấm chặt */
    transform: scale(0.92) !important;    /* Nút lún nhẹ xuống 8% tạo cảm giác bấm vật lý */
}
/* 1. Các nút thường (Trừ nút chọn màu): Đảo màu icon cho sáng lên */
body.theme-dark .adv-icon-btn:not(.entry-color-picker-btn) { 
    filter: invert(85%) sepia(5%) saturate(100%) hue-rotate(180deg) brightness(1.1) contrast(0.9); 
}

/* 2. Khi di chuột nút thường: KHÔNG NỀN (Transparent) */
body.theme-dark .adv-icon-btn:not(.entry-color-picker-btn):hover { 
    background-color: transparent !important; /* Xóa màu xám cũ */
    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(1.3) contrast(1); 
}

/* 3. Nút Chọn Màu: Giữ nguyên icon gốc, KHÔNG set background (để hiện màu inline style) */
body.theme-dark .entry-color-picker-btn { 
    border-color: #ffffff !important; /* Viền trắng */
    filter: none !important; /* Icon giữ nguyên màu */
}

/* 4. Khi di chuột nút Chọn Màu: Tuyệt đối KHÔNG set background-color */
body.theme-dark .entry-color-picker-btn:hover { 
    /* Đã xóa dòng background-color: #3a3f4b !important; gây lỗi */
    border-color: #ffcc00 !important;
}
body.theme-dark .entry-weight-percentage { color: #8c96a6; }
body.theme-dark #popup-advanced-entries .popup-footer { border-top-color: #3e4451; }

/* ... (CSS hiện tại của bạn) ... */

/* --- Styling cho Bảng chọn màu của Advanced Entry --- */
.advanced-entry-color-palette {
  display: flex;
  flex-wrap: wrap;
  gap: 5px; /* Khoảng cách giữa các ô màu */
  padding: 8px;
  background-color: #ffffff;
  border: 1px solid #cccccc;
  border-radius: 4px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
  position: absolute; /* Sẽ được JS định vị */
  z-index: 1060; /* Cao hơn nội dung popup một chút */
  max-width: 220px; /* Giới hạn chiều rộng */
  max-height: 300px; /* Giới hạn chiều cao, cho phép cuộn */
  overflow-y: auto;
  box-sizing: border-box;
}
/* Hiệu ứng viền khi Tab tới từng ô màu */
.adv-color-option:focus-visible {
    outline: 2px solid #007bff !important; /* Viền xanh biển rực rỡ */
    outline-offset: 2px;
    z-index: 10; /* Đảm bảo viền không bị ô bên cạnh đè lên */
    box-shadow: 0 0 8px rgba(0, 123, 255, 0.6);
}

.adv-color-option:active {
    transform: scale(0.9); /* Nhấn vào thì thu nhỏ tí cho có cảm giác */
}
/* Viền focus cực nét cho ô màu */
.adv-color-option:focus {
    outline: 3px solid #007bff !important;
    outline-offset: 1px;
    z-index: 10;
    box-shadow: 0 0 10px rgba(0,123,255,0.8);
    transform: scale(1.1); /* Phóng to nhẹ để biết đang chọn */
}
.advanced-entry-color-palette .adv-color-option {
  width: 25px;
  height: 25px;
  border-radius: 4px;
  border: 1px solid #e0e0e0;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  outline: none;
  padding: 0;
  font-size: 0; /* Ẩn text nếu có */
  background-clip: padding-box;
}

.advanced-entry-color-palette .adv-color-option:hover {
  transform: scale(1.1);
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  border-color: #bdbdbd;
}

/* --- Styling cho Menu chọn âm thanh của Advanced Entry --- */
.advanced-entry-sound-picker {
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  border: 1px solid #cccccc;
  border-radius: 4px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
  position: absolute; /* JS định vị */
  z-index: 1060;
  min-width: 220px; /* Chiều rộng tối thiểu */
  max-height: 300px; /* Chiều cao tối đa, cho phép cuộn */
  overflow-y: auto;
  box-sizing: border-box;
}

.advanced-entry-sound-picker a {
  padding: 8px 15px;
  text-decoration: none;
  color: #333;
  display: flex; /* << SỬ DỤNG FLEXBOX ĐỂ CĂN GIỮA CHỮ THEO CHIỀU DỌC */
  align-items: center; /* << CĂN GIỮA CHỮ THEO CHIỀU DỌC */
  min-height: 30px; /* << ĐẶT CHIỀU CAO TỐI THIỂU CHO MỖI MỤC ĐỂ CHỮ KHÔNG BỊ CẮT */
  font-size: 15px; /* << SỬA Ở ĐÂY: từ 0.9em thành 14px hoặc 1em */
  line-height: normal; /* << ĐỂ TRÌNH DUYỆT TỰ TÍNH TOÁN HOẶC 1.2 - 1.4 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box; /* Đảm bảo padding không làm tăng kích thước tổng thể ngoài ý muốn */
}

.advanced-entry-sound-picker a:hover {
  background-color: #f0f0f0;
}

.advanced-entry-sound-picker a.selected {
  background-color: #e0e0e0;
  font-weight: bold;
}

/* Nút Add New Entry */
.add-new-entry-button-empty {
    display: block;
    margin: 10px auto;
    padding: 8px 15px;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
}
/* ======================================================= */
/* CẤU HÌNH NÚT THÊM MỚI (ADD NEW ENTRY) */
/* ======================================================= */

/* 1. TRẠNG THÁI MẶC ĐỊNH (LIGHT MODE) */
.add-new-entry-button-footer,
.add-new-entry-button-empty {
    display: block;
    margin: 15px auto 5px auto;
    padding: 8px 15px;
    background-color: #007bff;
    color: white;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
    
    /* YÊU CẦU: Viền xanh lá cây (Light Mode) */
    /* Thay vì border: none cũ */
    border: 2px solid #28a745; 
    
    transition: all 0.2s ease;
}
/* Chỉ hiện viền khi dùng bàn phím (Tab) lướt tới */
.add-new-entry-button-footer:focus-visible {
    outline: 2px solid #007bff !important;
    outline-offset: 2px !important;
    border-radius: 4px;
    box-shadow: 0 0 8px rgba(0, 123, 255, 0.4);
}
/* 2. TRẠNG THÁI DI CHUỘT (LIGHT MODE) */
.add-new-entry-button-footer:hover,
.add-new-entry-button-empty:hover {
    opacity: 0.9;
    /* Bóng sáng xanh dương cũ của bạn */
    box-shadow: 0 0 6px rgba(41, 182, 246, 1) !important;
    transform: scale(1.05);
    
    /* Giữ nguyên viền xanh lá khi hover */
    border-color: #28a745 !important;
}

/* 3. CHẾ ĐỘ TỐI (DARK MODE) -> VIỀN TRẮNG BẮT BUỘC */
/* Trạng thái thường */
body.theme-dark .add-new-entry-button-footer,
body.theme-dark .add-new-entry-button-empty {
    /* Viền trắng tinh */
    border-color: #ffffff !important;
    
    /* (Tùy chọn) Có thể đổi màu nền tối hơn nếu thích */
    /* background-color: #333; */
}

/* Trạng thái di chuột (Hover) trong tối */
body.theme-dark .add-new-entry-button-footer:hover,
body.theme-dark .add-new-entry-button-empty:hover {
    /* Vẫn giữ viền trắng */
    border-color: #ffffff !important;
    
    /* Đổi bóng sang màu trắng cho hợp tông */
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.6) !important;
}
.no-entries-message {
    text-align: center;
    color: #777;
    margin: 20px 0;
    font-style: italic;
}

/* Dark Mode adjustments cho các picker mới */
body.theme-dark .advanced-entry-color-palette {
    background-color: #3a3f4b;
    border-color: #505866;
}
body.theme-dark .advanced-entry-color-palette .adv-color-option {
    border-color: #505866;
}
body.theme-dark .advanced-entry-color-palette .adv-color-option:hover {
    border-color: #788290;
}

body.theme-dark .advanced-entry-sound-picker {
    background-color: #3a3f4b;
    border-color: #505866;
}
/* Dark Mode adjustments cho menu âm thanh */
body.theme-dark .advanced-entry-sound-picker a {
    color: #dde1e6;
}
body.theme-dark .advanced-entry-sound-picker a:hover {
    background-color: #4b5260;
}
body.theme-dark .advanced-entry-sound-picker a.selected {
    background-color: #505866;
	font-weight: bold;
}

/* Căn chỉnh popup Advanced Entry Settings sang phải trên desktop */
@media (min-width: 769px) { /* Hoặc một breakpoint khác phù hợp cho desktop, ví dụ 992px hoặc 1024px */
  #popup-advanced-entries .popup-content {
    margin-right: 2dvh; /* Giữ khoảng cách với mép phải màn hình */
    margin-left: auto; /* Đẩy popup sang phải */
    /* Bạn có thể cần bỏ margin-top hoặc điều chỉnh nếu muốn nó ở vị trí cụ thể theo chiều dọc */
    /* margin-top: 2vh; */ /* Giữ nguyên hoặc thay đổi */
    /* margin-bottom: 2vh; */ /* Giữ nguyên hoặc thay đổi */

    /* Nếu bạn muốn nó cố định ở góc trên bên phải chẳng hạn: */
    /* position: fixed; // Đảm bảo #popup-advanced-entries là position:fixed
    top: 2vh;
    right: 2vh;
    left: auto; // Bỏ căn tự động theo chiều ngang
    bottom: auto; // Bỏ căn tự động theo chiều dọc
    margin: 0; // Reset margin auto
    transform: none; // Nếu có transform nào đang ảnh hưởng đến position fixed
    */
  }

  /* Nếu bạn muốn popup chiếm một phần cố định bên phải màn hình, thay vì chỉ căn lề */
  /*
  #popup-advanced-entries {
    left: auto; // Cho phép popup di chuyển khỏi lề trái
    right: 0;   // Đặt popup ở mép phải
    width: 650px; // Hoặc một giá trị max-width bạn muốn cho popup
                  // Lưu ý: #popup-advanced-entries đang là width: 100%
                  // Nên việc style .popup-content sẽ dễ hơn.
  }
  #popup-advanced-entries .popup-content {
    margin: 2vh 2vh 2vh auto; // top right bottom left
  }
  */
}

/* ... (CSS hiện tại của bạn) ... */

/* Styling cho khu vực chứa icon upload ảnh và thumbnail */
.entry-image-action-wrapper {
  position: relative; /* << THÊM: Để định vị nút xóa ảnh con bên trong */
  display: flex;
  align-items: center;
}

.entry-thumbnail {
  width: 22px;
  height: 22px;
  border: 1px solid #ddd;
  object-fit: cover;
  margin-left: 3px;
  border-radius: 3px;
  display: inline-block; /* Để đảm bảo kích thước đúng */
  vertical-align: middle; /* Căn chỉnh với icon upload */
}

/* Nút xóa ảnh thumbnail */
.adv-delete-entry-image-btn {
  position: absolute;
  top: -5px;       /* Điều chỉnh vị trí theo chiều dọc */
  right: -5px;      /* Điều chỉnh vị trí theo chiều ngang (so với mép phải của thumbnail) */
  width: 16px;      /* Kích thước nút xóa */
  height: 16px;
  background-color: red;
  color: white;
  border: 1px solid darkred;
  border-radius: 50%; /* Làm cho nó tròn */
  font-size: 10px;    /* Kích thước chữ "x" hoặc icon */
  font-weight: bold;
  line-height: 14px;  /* Căn giữa chữ "x" theo chiều dọc */
  text-align: center;
  cursor: pointer;
  z-index: 1;       /* Đảm bảo nó nằm trên ảnh thumbnail */
  display: none;    /* << MẶC ĐỊNH SẼ ẨN, CHỈ HIỆN KHI CÓ ẢNH */
  padding: 0; /* Bỏ padding mặc định của button */
  box-sizing: border-box;
}

.adv-delete-entry-image-btn:hover {
  background-color: darkred;
}

/* Hiện nút xóa khi image-wrapper có ảnh (sẽ được điều khiển bằng class từ JS) */
.entry-image-action-wrapper.has-image .adv-delete-entry-image-btn {
  display: inline-flex; /* Hoặc block, tùy theo bạn muốn căn chỉnh chữ "x" */
  align-items: center;
  justify-content: center;
}

/* Thêm vào cuối file wheel-of-names/assets/css/won-advanced-entries.css */

/* Khi di chuột qua nút đóng của Advanced Entries Popup */
#popup-advanced-entries .popup-close-btn:hover .dashicons {
  color: red !important; /* Đổi màu của icon Dashicon bên trong nút thành màu đỏ */
}

/* Tùy chọn: Nếu bạn muốn màu đỏ khác một chút cho Dark Mode khi hover */
body.theme-dark #popup-advanced-entries .popup-close-btn:hover .dashicons {
  color: #FF5252 !important; /* Một màu đỏ sáng hơn cho nền tối, hoặc giữ nguyên 'red' nếu muốn */
}

/* ==========================================================================
   CUSTOM NÚT TĂNG/GIẢM TRỌNG SỐ (+/-) - LIGHT MODE ONLY
   Bao gồm cả: Di chuột, Đang nhấn, Đã nhấn
   ========================================================================== */

/* Gộp chung 3 trạng thái: :hover (di chuột), :active (đang nhấn), :focus (đang chọn) */
body:not(.dark-mode):not(.dark) .weight-change-btn:hover,
body:not(.dark-mode):not(.dark) .weight-change-btn:active,
body:not(.dark-mode):not(.dark) .weight-change-btn:focus {
    
    /* Màu nền Xanh Lá Đậm */
    background-color: #006400 !important; 
    
    /* Chữ trắng */
    color: #ffffff !important;
    
    /* Viền xanh đậm */
    border-color: #fff !important;
    
    /* Xóa viền xanh/đen mặc định của trình duyệt khi click */
    outline: none !important;
    
    /* Con trỏ tay */
    cursor: pointer !important;
    
    /* Hiệu ứng chuyển màu mượt */
    transition: all 0.2s ease !important;
	    /* Bóng sáng màu xanh dương (Glow) */
    box-shadow: 0 0 5px rgba(113, 246, 226, 1) !important;
}

/* Hiệu ứng nhấn xuống: Nút hơi co lại một xíu tạo cảm giác bấm thật */
body:not(.dark-mode):not(.dark) .weight-change-btn:active {
    transform: scale(0.95);
}

/* ==========================================================================
   TỐI ƯU POPUP ADVANCED CHO MOBILE (GỌN GÀNG - KHÔNG TRÀN)
   ========================================================================== */

@media screen and (max-width: 768px) {
    /* 1. Khung Popup chính: Vừa khít màn hình, có khoảng hở nhỏ */
    #popup-advanced-entries .popup-content {
        width: 95% !important;        /* Rộng gần sát mép màn hình */
        max-width: 95% !important;
        height: 88dvh !important;      /* Chiều dài ngắn hơn màn hình một chút (98% chiều cao) */
        max-height: 88dvh !important;
        margin: 15px auto !important; /* Tạo khoảng hở trên dưới */
        padding: 10px !important;
        display: flex !important;
        flex-direction: column !important; /* Ép cấu trúc Header - Body - Footer */
        overflow: hidden !important;   /* Chặn tràn tổng thể */
        border-radius: 12px !important;
    }

    /* 2. Header và Footer cố định */
    #popup-advanced-entries .popup-header,
    #popup-advanced-entries .popup-footer {
        flex-shrink: 0 !important; /* Không cho phép co lại */
        padding: 5px 0 !important;
    }

    /* 7. Footer: Nút bấm OK/Cancel nằm cạnh nhau cho gọn */
    .popup-footer {
        display: flex !important;
        gap: 10px !important;
    }
    
    .popup-footer .popup-btn {
        flex: 1 !important;
        padding: 10px !important;
    }
}

/* ==========================================================================
   FIX NÚT DUPLICATE (CHẾ ĐỘ TỐI) - LUÔN TRẮNG
   ========================================================================== */

/* 1. CẤU HÌNH CHO NÚT BAO NGOÀI */

body.theme-dark .adv-duplicate-btn {
    /* Reset filter của nút cha để không bị ám màu xám của theme */
    filter: none !important; 
    /* Nền trong suốt */
    background: transparent !important;
    
    /* Hiệu ứng mượt */
    transition: all 0.2s ease;
}

/* 2. QUAN TRỌNG: CẤU HÌNH CHO ICON (ẢNH) BÊN TRONG */
/* Phải có đoạn này thì icon mới trắng được */
body.theme-dark .adv-duplicate-btn img {
    /* Đảo ngược màu gốc (Đen) thành (Trắng) */
    filter: invert(100%) !important; 
}


/* 3. TRẠNG THÁI DI CHUỘT (HOVER) */
body.theme-dark .adv-duplicate-btn:hover {
    /* Viền vàng */
    border-color: #ffcc00 !important;
    
    /* Bóng sáng vàng (Glow) */
    box-shadow: 0 0 6px rgba(255, 215, 0, 1) !important;
    
    /* Phóng to nhẹ */
    transform: scale(1.1);
    
    /* Đảm bảo nền vẫn trong suốt */
    background: none !important;
    background-color: transparent !important;
}

/* 4. ĐẢM BẢO KHI HOVER ICON VẪN TRẮNG */
body.theme-dark .adv-duplicate-btn:hover img {
    /* Giữ nguyên màu trắng cho icon */
    filter: invert(100%) !important;
}
/* Trạng thái khi click vào (Focus) ô tên đổi màu xanh */
.entry-text-wrapper input:focus {
    border: 2px solid #7380b8 !important;           /* Viền xanh đậm hơn hẳn */
    box-shadow: 0 0 6px rgba(96, 131, 248, 1); /* Đổ bóng cực nhẹ để tạo chiều sâu */
}
.entry-text-wrapper input:hover {
    border: 2px solid #7380b8 !important;           /* Viền xanh đậm hơn hẳn */
    box-shadow: 0 0 6px rgba(96, 131, 248, 1); /* Đổ bóng cực nhẹ để tạo chiều sâu */
}

/* Trạng thái khi click vào (Focus) ô custom message đổi màu xanh */
.entry-popup-message-wrapper input:focus {
    border: 2px solid #7380b8 !important;           /* Viền xanh đậm hơn hẳn */
    box-shadow: 0 0 6px rgba(96, 131, 248, 1); /* Đổ bóng cực nhẹ để tạo chiều sâu */
}
.entry-popup-message-wrapper input:hover {
    border: 2px solid #7380b8 !important;           /* Viền xanh đậm hơn hẳn */
    box-shadow: 0 0 6px rgba(96, 131, 248, 1); /* Đổ bóng cực nhẹ để tạo chiều sâu */
}

/* ==========================================================================
   CẤU HÌNH CHO NÚT ĐÓNG ADVANCED (MỚI THÊM)
   ========================================================================== */

/* 1. Căn giữa icon trong nút */
#popup-advanced-close.popup-close-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 5px !important;
    background: transparent;
    border: none;
    cursor: pointer;
}

/* 2. Cấu hình ảnh bên trong (Size và tâm xoay) */
#popup-advanced-close img {
    width: 16px !important;    /* Kích thước chuẩn */
    height: 16px !important;
    object-fit: contain;
    display: block !important;
    
    /* Chuẩn bị cho hiệu ứng xoay */
    transition: transform 0.3s ease !important;
    transform-origin: center center !important;
}

/* 3. Hiệu ứng xoay khi di chuột vào nút */
#popup-advanced-close:hover img {
    transform: rotate(90deg) !important;
}
/* 1. TRẠNG THÁI BÌNH THƯỜNG */

body.theme-dark .entry-order-controls .adv-icon-btn-order {
    /* Đặt sẵn viền trong suốt để giữ chỗ (tránh bị nhảy hình khi hover) */
    border: 1px solid #fff !important;
    
    /* Bắt buộc không nền */
    background-color: transparent !important;
    background: none !important;
    
    /* Hiệu ứng mượt mà */
    transition: all 0.2s ease;
    
    /* Đảm bảo icon giữ nguyên màu gốc (không bị filter đổi màu nếu có css cũ) */
    filter: none !important; 
	/* --- THÊM DÒNG NÀY ĐỂ CÁC NÚT CÁCH NHAU 3PX --- */
    margin-right: 3px !important;
}

/* 2. TRẠNG THÁI DI CHUỘT (HOVER) - Chỉ áp dụng cho nút ĐANG HOẠT ĐỘNG */
/* :not(:disabled) nghĩa là "Chỉ áp dụng nếu nút đó KHÔNG bị khóa" */
body.theme-dark .entry-order-controls .adv-icon-btn-order:not(:disabled):hover {
    
    /* Viền màu vàng tươi (#ffcc00) */
    border-color: #ffcc00 !important;
    
    /* Đổ bóng sáng vàng nhạt (Glow) */
    box-shadow: 0 0 9px rgba(255, 215, 0, 0.8) !important;
    
    /* Vẫn giữ không nền */
    background-color: transparent !important;
    
    /* Phóng to nhẹ cho đẹp */
    transform: scale(1.1);
}
/* ==========================================================================
   CSS RIÊNG CHO NÚT CHỌN MÀU (.entry-color-picker-btn) - CHẾ ĐỘ TỐI
   ========================================================================== */

/* 1. TRẠNG THÁI BÌNH THƯỜNG */
body.theme-dark .entry-color-picker-btn {
    /* Yêu cầu: Viền trắng */
    border: 1px solid #ffffff !important;
    
    /* Đảm bảo icon giữ nguyên màu gốc (không bị ám màu bởi filter khác) */
    filter: none !important;
    
    /* Hiệu ứng mượt mà */
    transition: all 0.2s ease;
}

body.theme-dark .entry-color-picker-btn:hover {
    /* Yêu cầu: Viền chuyển sang Vàng */
    border-color: #ffcc00 !important;
    /* Đảm bảo icon giữ nguyên màu gốc (không bị ám màu bởi filter khác) */
    filter: none !important;
    
    /* Hiệu ứng mượt mà */
    transition: all 0.2s ease;
    
 /* Yêu cầu: Đổ bóng sáng Vàng đậm (Glow) */
    box-shadow: 0 0 6px rgba(255, 215, 0, 1) !important;
    
    /* Phóng to nhẹ cho sinh động */
    transform: scale(1.1);
}
/* Trạng thái BÌNH THƯỜNG (Áp dụng cho cả Dark và Light) */
.entry-color-picker-btn img {
    /* Tạo viền TRẮNG sắc nét quanh icon bảng màu */
    /* Giúp icon nổi bật trên nền nút màu xanh/đỏ */
    filter: 
        drop-shadow(1px 0 0 #ffffff) 
        drop-shadow(-1px 0 0 #ffffff) 
        drop-shadow(0 1px 0 #ffffff) 
        drop-shadow(0 -1px 0 #ffffff) 
        !important;
        
    transition: all 0.2s ease;
}
/* ==========================================================================
   CẤU HÌNH RIÊNG CHO KHỐI ẢNH (ENTRY IMAGE WRAPPER) - CHẾ ĐỘ TỐI
   ========================================================================== */

/* 1. Tác động vào các NÚT (Icon thêm ảnh) nằm trong khối này */
body.theme-dark .entry-image-action-wrapper .adv-icon-btn {
    /* Yêu cầu: Viền trắng mặc định */
    border: 1px solid #ffffff !important;
    
    /* Yêu cầu: Giữ nguyên màu icon gốc */
    filter: none !important;
    
    /* Cấu hình cơ bản để nút đẹp */
    box-sizing: border-box;
    transition: all 0.2s ease;
    
    /* Đảm bảo nền trong suốt cho nút icon ảnh */
    background-color: transparent !important;
}

/* 2. Hiệu ứng DI CHUỘT vào các NÚT này */
body.theme-dark .entry-image-action-wrapper .adv-icon-btn:hover {
    /* Yêu cầu: Viền vàng */
    border-color: #ffcc00 !important;
    
    /* Yêu cầu: Đổ bóng sáng vàng */
    box-shadow: 0 0 6px rgba(255, 215, 0, 1) !important;
    
    /* Phóng to nhẹ */
    transform: scale(1.1);
}

/* 3. BẢO VỆ THUMBNAIL (Ảnh thu nhỏ) */
/* Đảm bảo ảnh thumbnail KHÔNG bị dính viền hay hiệu ứng gì cả */
body.theme-dark .entry-image-action-wrapper .entry-thumbnail {
 
    box-shadow: none !important;
    transform: none !important;
    background: transparent !important;
    /* Giữ nguyên kích thước hoặc style gốc của ảnh */
}
/* ==========================================================================
   HIỆU ỨNG INPUT TRỌNG SỐ (WEIGHT INPUT)
   ========================================================================== */

/* 1. Cấu hình độ mượt cho ô input */
.entry-weight-input {
    transition: all 0.2s ease; /* Giúp viền hiện lên mượt mà không bị giật */
}

/* 2. Hiệu ứng khi DI CHUỘT (Hover) */
.entry-weight-input:focus,
.entry-weight-input:hover {
    /* Viền màu xanh dương sáng (#29b6f6) */
    border-color: #29b6f6 !important;
    
    /* Đổ bóng phát sáng màu xanh dương (Glow) */
    /* Cú pháp: ngang - dọc - độ mờ - màu sắc */
    box-shadow: 0 0 8px rgba(41, 182, 246, 0.8) !important;
}

/* ==========================================================================
   CẤU HÌNH RIÊNG CHO NÚT UPLOAD (.adv-upload-btn) - CHẾ ĐỘ TỐI
   ========================================================================== */

/* 1. TRẠNG THÁI BÌNH THƯỜNG */

body.theme-dark .adv-upload-btn { 
    /* QUAN TRỌNG: Giữ nguyên màu gốc của icon (không bị xám hay đảo màu) */
    filter: none !important;    
    /* Nền trong suốt */
    background-color: transparent !important;
    /* Cấu hình chung */
    box-sizing: border-box;
    transition: all 0.2s ease;
	 /* Tạo 4 bóng đổ cứng màu TRẮNG về 4 phía để giả lập stroke */
    filter: 
        drop-shadow(1px 0 0 #ffffff) 
        drop-shadow(-1px 0 0 #ffffff) 
        drop-shadow(0 1px 0 #ffffff) 
        drop-shadow(0 -1px 0 #ffcc00) 
        !important;
}


/* Trạng thái DI CHUỘT (HOVER) */
body.theme-dark .adv-upload-btn:hover img{
	
	/* Đổ bóng sáng vàng rực rỡ */
    box-shadow: 0 0 5px rgba(255, 204, 0, 0.6) !important;
     /* Phóng to */
    transform: scale(1.1);    
}
/* Đảm bảo nút bao ngoài trong suốt để hiệu ứng icon hiện rõ */
body.theme-dark .adv-upload-btn {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* ==========================================================================
   HIỆU ỨNG CHECKBOX KHI ĐANG BẬT & DI CHUỘT
   ========================================================================== */

/* Selector: :checked (đang bật) + :hover (đang di chuột) */
.enable-entry-checkbox:checked:hover {
    /* Đổ bóng sáng vàng rực rỡ */
    box-shadow: 0 0 15px rgba(136, 247, 111, 1) !important;
    
    /* (Tùy chọn) Đổi màu viền sang vàng cho đồng bộ (nếu trình duyệt hỗ trợ) */
    border: #ffcc00 !important;
    
    cursor: pointer;
}

/* ==========================================================================
   FIX LỖI NÚT XÓA (DELETE) - LUÔN MÀU TRẮNG (CHẾ ĐỘ TỐI)
   ========================================================================== */

/* 1. ÉP ICON THÀNH MÀU TRẮNG (Quan trọng nhất) */
/* Sử dụng brightness(0) để biến thành đen, sau đó invert(1) để đảo thành TRẮNG */

body.theme-dark .delete-entry-btn img {
    filter: brightness(0) invert(1) !important;
    opacity: 1 !important; /* Đảm bảo không bị mờ */
}

/* 2. CẤU HÌNH NÚT BAO NGOÀI (BÌNH THƯỜNG) */
body.theme-dark .delete-entry-btn {
    
    /* Nền trong suốt */
    background-color: transparent !important;
    background: none !important;
    
    /* Reset filter của nút cha để không ảnh hưởng icon con */
    filter: none !important;
    
    transition: all 0.2s ease;
    box-sizing: border-box;
}

/* 3. TRẠNG THÁI DI CHUỘT (HOVER) */
body.theme-dark .delete-entry-btn:hover {
    /* Viền Vàng */
    border-color: #ffcc00 !important;
    
    /* Bóng sáng Vàng */
    box-shadow: 0 0 10px rgba(255, 215, 0, 1) !important;
    
    /* Phóng to */
    transform: scale(1.1);
    
    /* Nền vẫn trong suốt */
    background: none !important;
}

/* 4. KHÓA CỨNG MÀU TRẮNG KHI DI CHUỘT */
/* Đảm bảo khi hover icon KHÔNG bị đổi lại thành đen */
body.theme-dark .delete-entry-btn:hover img {
    filter: brightness(0) invert(1) !important;
}

/* ==========================================================================
   FIX NÚT LOA (SOUND) - LUÔN MÀU TRẮNG (CHẾ ĐỘ TỐI)
   ========================================================================== */

/* 1. ÉP ICON LOA THÀNH MÀU TRẮNG (Cả thường và khi di chuột) */
body.theme-dark .adv-entry-sound-btn img {
    /* Biến icon thành đen (brightness 0) rồi đảo thành TRẮNG (invert 1) */
    filter: brightness(0) invert(1) !important;
    opacity: 1 !important;
    transition: all 0.2s ease;
}

/* 2. CẤU HÌNH NÚT BAO NGOÀI (BÌNH THƯỜNG) */
body.theme-dark .adv-entry-sound-btn {
    /* Viền trắng mỏng */
    border: 1px solid #ffffff !important;
    
    /* Nền trong suốt */
    background-color: transparent !important;
    background: none !important;
    
    /* Reset filter của nút cha */
    filter: none !important;
    
    box-sizing: border-box;
    transition: all 0.2s ease;
}

/* 3. TRẠNG THÁI DI CHUỘT (HOVER) */
body.theme-dark .adv-entry-sound-btn:hover {
    /* Viền Vàng */
    border-color: #ffcc00 !important;
    
    /* Bóng sáng Vàng (Glow) */
    box-shadow: 0 0 10px rgba(255, 215, 0, 1) !important;
    
    /* Phóng to nhẹ */
    transform: scale(1.1);
    
    /* Vẫn không nền */
    background: none !important;
}

/* 4. CHỐT CHẶN: ĐẢM BẢO KHI HOVER ICON VẪN TRẮNG */
/* Ngăn chặn việc icon bị đổi lại màu đen khi di chuột */
body.theme-dark .adv-entry-sound-btn:hover img {
    filter: brightness(0) invert(1) !important;
}

/* ==========================================================================
   FIX ICON MÀU NHỎ - GIẢ LẬP STROKE SẮC NÉT (CHẾ ĐỘ TỐI)
   ========================================================================== */

/* 1. TRẠNG THÁI BÌNH THƯỜNG */
body.theme-dark .individual-color-icon {
 
    /* KỸ THUẬT TẠO VIỀN SẮC NÉT (FAKE STROKE) */
    /* Ta dùng 4 cái bóng đổ cứng (blur=0) về 4 phía: Phải, Trái, Dưới, Trên */
    filter: 
        drop-shadow(1px 0 0 #ffffff) 
        drop-shadow(-1px 0 0 #ffffff) 
        drop-shadow(0 1px 0 #ffffff) 
        drop-shadow(0 -1px 0 #ffffff) 
        !important;
    
    transition: all 0.2s ease;
}