/* Reset cơ bản cho modal Customize */
.popup-modal#popup-customize {
  display: none;
  position: fixed;
  z-index: 105;
  left: 0;
  top: 0;
  width: 100%;
  height: 100dvh;
  background: rgba(0,0,0,0.4);
}

/* Nội dung modal */
.popup-content#popup-customize-content {
  margin: 5% auto;
  background: #fff;
  padding: 20px;
  width: 90%;
  max-width: 500px;
  border-radius: 8px;
  position: relative;
}

/* CSS cho color-palette (nếu chưa có hoặc cần điều chỉnh) */
#appearance-panel .color-palette, /* Hoặc nếu nó được chèn trực tiếp vào popup-content */
.popup-content#popup-customize-content > .color-palette {
  /* ... các style hiện tại của .color-palette ... */
  position: absolute; /* Đã đặt trong JS, nhưng có thể set ở đây để rõ ràng */
  z-index: 1001;      /* Đảm bảo nó nổi lên trên các thành phần khác trong popup */
  /* Các style khác như background, border, padding, shadow đã có */
  max-width: 250px; /* Giới hạn chiều rộng để không quá to */
}


/* Tab header trong Customize */
.popup-tabs {
  display: flex;
  border-bottom: 1px solid #ccc;
  margin-bottom: 10px;
}
.popup-tab {
  flex: 1;
  text-align: center;
  padding: 8px 0;
  cursor: pointer;
  background-color: #f9f9f9;
  border: none;
  outline: none;
  font-weight: bold;
}
.popup-tab.active {
  background-color: #fff;
  border-bottom: 2px solid #007BFF;
}

/* Các panel (nội dung cho từng tab) */
.popup-panel {
  display: none;
}
.popup-panel.active {
  display: block;
}

/* Header modal */
.popup-header#popup-customize-header {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin-bottom: 10px;
}
.popup-header-title {
  font-size: 18px;
  text-transform: lowercase;
  text-align: center;
  width: 100%;
}
.popup-close-btn {
  position: absolute;
  right: 10px;
  top: 10px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 24px;
}

/* Body modal */
.popup-body {
  margin-top: 10px;
}
.customize-section {
  margin-bottom: 16px;
}
.customize-label {
  font-weight: bold;
  margin-bottom: 5px;
  display: block;
}

/* Dropdown styling cho Sound và Spin time: cho rộng hơn */
.customize-dropdown {
  position: relative;
  display: inline-block;
  width: 100%;
}
.customize-dropdown > button {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid #ccc;
  background-color: #4d89f2;
  color: #fff !important;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.customize-dropdown > button:hover {
  background-color: #2f79fb;
  border: 1px solid #ffcc00;
  box-shadow: 0 0 6px rgba(41, 182, 246, 1); /* Thêm chút bóng sáng (glow) */
}
.customize-dropdown-content {
  display: none;
  position: absolute;
  background-color: white;
  border: 1px solid #ccc;
  z-index: 10;
  width: 100%;
}

.customize-dropdown-content:hover {
  border: 1px solid #007bff;
}

.customize-dropdown-content a {
  display: block;
  padding: 8px 10px;
  text-decoration: none;
  color: black;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.customize-dropdown-content a:hover {
  background-color: #256d19;
  color: #fff; /* Màu chữ trắng */
}

/* Play/Pause controls */
.customize-play-pause {
  margin-top: 5px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.customize-play-pause button {
  padding: 4px;
  border: none;
  background: transparent;
  cursor: pointer;
}
.customize-play-pause button:hover {
    background-color: #fff;
/* Viền màu xanh #499dfa */
    border: #499dfa !important;
    /* Bóng sáng màu xanh dương (Glow) */
    box-shadow: 0 0 6px rgba(41, 182, 246, 1) !important;
      /* Phóng to nhẹ một chút cho sinh động (Tùy chọn) */
    transform: scale(1.1);
}
/* Chỉ áp dụng khi Body có class dark-mode/theme-dark */
body.theme-dark #customize-after-preview-play:hover,
body.dark-mode #customize-after-preview-play:hover,
body.won-dark #customize-after-preview-play:hover,
body.theme-dark #customize-after-preview-pause:hover,
body.dark-mode #customize-after-preview-pause:hover,
body.won-dark #customize-after-preview-pause:hover,
body.theme-dark #customize-preview-pause:hover,
body.dark-mode #customize-preview-pause:hover,
body.won-dark #customize-preview-pause:hover,
body.theme-dark #customize-preview-play:hover,
body.dark-mode #customize-preview-play:hover,
body.won-dark #customize-preview-play:hover {
    
    /* 1. Nền: Nên để trong suốt hoặc tối để không bị chói (Thay vì #fff) */
    background-color: transparent !important; 

    /* 2. Viền: Sửa lỗi cú pháp (Thêm 1px solid) + Đổi sang MÀU VÀNG (#ffd700) */
    border: 1px solid #ffd700 !important;

    /* 3. Bóng sáng (Glow): Đổi sang màu VÀNG KIM (Gold) */
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.8) !important;

    /* 4. Phóng to nhẹ */
    transform: scale(1.1);
    
    /* Đảm bảo transition mượt (thêm vào nếu chưa có ở gốc) */
    transition: all 0.2s ease;
}
.customize-play-pause img {
  width: 24px;
  height: 24px;
}


/* Footer modal */
.popup-footer#popup-customize-footer {
  text-align: right;
  margin-top: 20px;
}
/* Nút OK (chính) */
.popup-footer#popup-customize-footer button#popup-customize-ok {
  padding: 6px 12px; /* Hoặc padding bạn muốn */
  border: 1px solid #0c7111; 
  border-radius: 4px;
  background-color: #007BFF;
  color: #fff;
  cursor: pointer;
  margin-left: 10px;
  font-size: 14px;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.popup-footer#popup-customize-footer button#popup-customize-ok:hover {
  background-color: #0c7111;
 border-color: #0056b3; 
     /* Bóng sáng màu xanh dương (Glow) */
    box-shadow: 0 0 6px rgba(41, 182, 246, 1) !important;
    
    /* Phóng to nhẹ một chút cho sinh động (Tùy chọn) */
    transform: scale(1.1);
}
body.theme-dark .popup-footer#popup-customize-footer button#popup-customize-ok {
  background-color: #007BFF !important; /* Màu xám tối hơn một chút cho dark mode, !important nếu cần ghi đè */
  color: #fff !important;           /* Màu chữ sáng hơn */
   border-color: #fff !important;   /* Nếu có viền */
}

body.theme-dark .popup-footer#popup-customize-footer button#popup-customize-ok:hover {
  background-color: #0c7111 !important;
  border-color: #fff !important; */ /* Nếu có viền */
}
.popup-footer#popup-customize-footer button {
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  background-color: #007BFF;
  color: #fff;
  cursor: pointer;
  margin-left: 10px; /* Thêm margin-left để tách các nút */
  font-size: 14px; /* Đồng nhất kích thước font */
  transition: background-color 0.2s ease, border-color 0.2s ease; /* Thêm transition */
}
.popup-footer#popup-customize-footer button:hover {
  background-color: #0056b3;
}

/* >>> THÊM MỚI: Style cho nút Cancel trong popup Customize <<< */
.popup-footer#popup-customize-footer button#popup-customize-cancel {
  padding: 6px 12px; /* Đồng nhất padding */
  border: 1px solid #791212; 
  border-radius: 4px;
  background-color: #4A4A4A; 
  color: #ffffff;
  cursor: pointer;
  margin-left: 10px;
  font-size: 14px;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.popup-footer#popup-customize-footer button#popup-customize-cancel:hover {
  background-color: #791212; /* Màu xám đen sẫm hơn khi hover */
 
    border: 1px solid #6d6d6d !important;
    
    /* Bóng sáng màu xanh dương (Glow) */
    box-shadow: 0 0 6px rgba(41, 182, 246, 1) !important;
    
    /* Phóng to nhẹ một chút cho sinh động (Tùy chọn) */
    transform: scale(1.1);
}

/* Dark mode override (nếu cần) */
body.theme-dark #popup-customize-content {
  background-color: #222;
  color: #fff;
  border-color: #444;
}

/* -------- Nested dropdown styles cho Sound effects -------- */
.sound-group {
  position: relative;
}
.sound-group-btn {
  width: 100%;
  padding: 6px 10px;
  border: none;
  background-color: #f9f9f9;
  cursor: pointer;
  text-align: left;
  font-weight: bold;
  border-bottom: 1px solid #ccc;
}
.sound-group-btn:hover {
  background-color: #256d19;
  border: 1px solid #e4ff00;
}
.sound-submenu {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  background-color: #fff;
  border: 1px solid #ccc;
  min-width: 200px;
  z-index: 20;
}
.sound-submenu:hover {
  border: 1px solid #007bff;

}

.sound-submenu a {
  display: block;
  padding: 8px 10px;
  text-decoration: none;
  color: black;
}
.sound-submenu a:hover {
  background-color: #256d19;
  
}

.sound-group.active .sound-submenu {
  display: block;

}

/* Responsive styling */
@media (max-width: 900px) {
  .popup-content#popup-customize-content {
    max-width: 90%;
  }
}


/* Khi dark mode được bật, toàn bộ nền của popup là đen và chữ mặc định là trắng */
body.theme-dark #popup-customize-content {
  background-color: #000; /* Nền màu đen */
  color: #fff; /* Chữ màu trắng */
}

/* Tất cả nút menu bên trong popup-customize-content */
body.theme-dark #popup-customize-content button {
  background-color: #000; /* Nút màu đen */
  color: #fff; /* Chữ trên nút màu trắng */
  border: 1px solid #fff; /* Viền nút màu trắng (tuỳ chọn) */
  transition: background-color 0.3s ease, color 0.3s ease; /* Hiệu ứng chuyển mượt */
}

/* Khi di chuột hoặc nhấn (hover/active) trên nút menu */
body.theme-dark #popup-customize-content button:hover,
body.theme-dark #popup-customize-content button:active {
  background-color: #007bff; /* Nền xanh nhạt khi hover */
  color: #fff !important; /* Chữ chuyển sang màu đen khi hover */
  border-color: #ccc; /* Viền sáng hơn khi hover */
}

/* Đảm bảo rằng tất cả các chữ khác trong popup giữ màu trắng mặc định */
body.theme-dark #popup-customize-content *,
body.theme-dark #popup-customize-content *::placeholder {
  color: #fff !important; /* Màu chữ trắng */
}

/* Đặt màu nền là đen cho các phần tử trong dark mode */
body.theme-dark #customize-sound-options,
body.theme-dark .sound-submenu,
body.theme-dark #customize-spin-options,
body.theme-dark #customize-after-sound-options,
body.theme-dark #animate-winning-entry-options {
  background-color: #000 !important; /* Nền đen */
  color: #fff; /* Chữ màu trắng */
  border-color: #444; /* Viền màu xám tối */
  transition: background-color 0.3s ease, color 0.3s ease; /* Hiệu ứng mượt */
}
body.theme-dark .sound-submenu:hover{
  background-color: #000 !important; /* Nền xanh khi hover */
  color: #000 !important; /* Chữ chuyển thành màu đen khi hover */
  border-color: #0056b3; /* Viền xanh đậm hơn khi hover */
}
body.theme-dark .sound-submenu a:hover {
  background-color: #007bff;
  
}
body.theme-dark #customize-spin-options:hover{
  background-color: #000 !important; /* Nền xanh khi hover */
  color: #000 !important; /* Chữ chuyển thành màu đen khi hover */
  border-color: #0056b3; /* Viền xanh đậm hơn khi hover */
}
#customize-spin-options:hover{
  border-color: #0056b3; /* Viền xanh đậm hơn khi hover */
}
body.theme-dark .customize-dropdown-content a:hover {
  background-color: #007bff;
  color: #fff; /* Màu chữ trắng */
}

/* Hiệu ứng hover: chuyển nền thành xanh và chữ thành đen */
body.theme-dark #customize-sound-options:hover{
  background-color: #000;
  color: #fff; /* Màu chữ trắng */
    border-color: #0056b3; /* Viền xanh đậm hơn khi hover */
}


/* ==========================================================================
   SỬA LỖI HOVER MENU SOUND (CHỈ XANH Ô ĐANG CHỌN)
   ========================================================================== */

/* Chúng ta chọn class .q-item (các dòng con) nằm bên trong ID cha */
body.theme-dark #customize-after-sound-options .q-item--clickable:hover {
    
    /* 1. Đổi nền thành màu xanh dương */
    background-color: #007BFF !important;
    
    /* 2. Đổi màu chữ (Mình khuyên nên để màu TRẮNG sẽ dễ đọc hơn màu Đen trên nền xanh) */
    color: #ffffff !important; 
    /* Nếu bạn vẫn thích chữ đen thì dùng dòng này: color: #000 !important; */
    
    /* 3. Đổi màu viền (nếu có viền) */
    border-color: #0056b3 !important;
    
    /* 4. Thêm chút bo tròn cho đẹp (tùy chọn) */
    border-radius: 4px;
}


/* Khi tab "During spin" hoặc "After spin" được chọn (active), màu nền chuyển xanh */
.popup-tabs .active {
  background-color: #4d89f2 !important;
}

/* Khi di chuột vào tab "During spin" hoặc "After spin" */
.popup-tabs div:hover {
  background-color: #4d89f2 !important;
}

/* Khi di chuột vào các dropdown, nen chuyen mau xanh */
#customize-sound-dropdown:hover,
#customize-spin-dropdown:hover,
#customize-after-sound-dropdown:hover {
  background-color: #4d89f2 !important;
}

/* Dark mode cho ô input 'Display popup with message' */
body.theme-dark #popup-customize-content #display-popup-message-text {
  background-color: #000;  /* Đặt màu nền thành đen */
  color: #fff;             /* Đảm bảo màu chữ là trắng */
  border: 1px solid #555; /* Viền màu xám tối để dễ nhìn hơn trên nền đen (tùy chọn) */
}

/* Tùy chọn: Điều chỉnh màu của chữ placeholder trong dark mode cho ô input này nếu cần */
body.theme-dark #popup-customize-content #display-popup-message-text::placeholder {
  color: #bbb; /* Màu placeholder hơi sáng hơn trên nền đen */
}

/* >>> THÊM MỚI: Style cho nút Cancel trong Dark Mode cho popup Customize <<< */
body.theme-dark .popup-footer#popup-customize-footer button#popup-customize-cancel {
  background-color: #555555 !important; /* Màu xám tối hơn một chút cho dark mode, !important nếu cần ghi đè */
  color: #fff !important;           /* Màu chữ sáng hơn */
   border-color: #fff !important; */ /* Nếu có viền */
}

body.theme-dark .popup-footer#popup-customize-footer button#popup-customize-cancel:hover {
  background-color: #791212 !important;
  border-color: #fff !important; */ /* Nếu có viền */
}

/* Thêm vào cuối file assets/css/won-customize.css */

/* Đảm bảo popup-content có thể quản lý chiều cao của panel */
.popup-content#popup-customize-content {
  display: flex;
  flex-direction: column;
  max-height: 90dvh; /* Giới hạn chiều cao tối đa của toàn bộ popup */
}

/* =========================================================
   ÉP CÂN VÀ BẬT THANH CUỘN CHO TẤT CẢ CÁC TAB 
   (Appearance, During Spin, After Spin đều được hưởng)
   ========================================================= */
.popup-panel.active {
  flex-grow: 1; 
  overflow-y: auto !important; 
  max-height: calc(90dvh - 150px) !important; 
  padding-right: 10px; 
}

/* Nới lỏng cho màn hình máy tính / Tablet */
@media (min-width: 769px) {
  .popup-panel.active {
    max-height: calc(90dvh - 120px) !important; 
    padding-right: 15px; 
  }
}

/* Cụ thể hơn cho container chứa các icon màu nếu cần */
#appearance-panel #entry-color-customization-section .entry-color-icons-container {
  /* Bạn đã có display: flex; flex-wrap: wrap; rồi, điều này tốt */
  /* Không cần thêm overflow-y ở đây nếu #appearance-panel đã xử lý cuộn */
}

/* === BẮT ĐẦU CSS ĐỂ TĂNG KÍCH THƯỚC CHECKBOX VÀ NHÃN TRONG TAB "AFTER SPIN" (PHIÊN BẢN ƯU TIÊN CAO HƠN) === */

/* Nhắm mục tiêu chính xác hơn vào popup customize và panel after-spin */
.popup-modal#popup-customize .popup-content#popup-customize-content #after-spin-panel.popup-panel .customize-checkbox-section {
  display: flex;
  align-items: center;
  margin-bottom: 12px; /* Bạn có thể điều chỉnh nếu cần */
}

.popup-modal#popup-customize .popup-content#popup-customize-content #after-spin-panel.popup-panel .customize-checkbox-section input[type="checkbox"] {
  width: 20px;  /* Hoặc kích thước bạn muốn */
  height: 20px; /* Hoặc kích thước bạn muốn */
  min-width: 20px; /* Đảm bảo kích thước tối thiểu */
  min-height: 20px; /* Đảm bảo kích thước tối thiểu */
  margin-right: 10px; /* Tăng nhẹ khoảng cách với label */
  cursor: pointer;
  /* Thử thêm thuộc tính appearance để reset style mặc định của trình duyệt nếu cần */
  /* -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none; */
  /* Nếu bạn dùng appearance: none, bạn sẽ cần tự style hình dạng của checkbox (viền, dấu tick) */
}

.popup-modal#popup-customize .popup-content#popup-customize-content #after-spin-panel.popup-panel .customize-checkbox-section label {
  font-size: 15px; /* Hoặc kích thước bạn muốn */
  cursor: pointer;
  line-height: 1.5;
  /* Thêm một chút padding để label không quá sát checkbox nếu có vấn đề căn chỉnh */
  padding-left: 5px; 
}

/* === KẾT THÚC CSS ĐỂ TĂNG KÍCH THƯỚC CHECKBOX VÀ NHÃN === */

/* === Căn chỉnh Popup Customize sang phải cho Desktop và Tablet === */

/* Áp dụng cho màn hình có chiều rộng từ 769px trở lên (máy tính bảng và lớn hơn) */
@media (min-width: 769px) {
  .popup-modal#popup-customize {
    /* Để căn chỉnh popup-content sang phải, chúng ta cần tác động lên chính popup-modal
      để nó không chiếm toàn bộ chiều rộng và cho phép popup-content di chuyển.
      Tuy nhiên, popup-modal thường được thiết kế để làm lớp phủ mờ toàn màn hình.
      Cách tốt hơn là điều chỉnh margin của popup-content.
    */
  }

  .popup-content#popup-customize-content {
    /* Reset các cài đặt margin cũ có thể đang căn giữa popup */
    margin-top: 5dvh; /* Giữ một khoảng cách nhỏ với đỉnh màn hình */
    margin-bottom: 5dvh; /* Giữ một khoảng cách nhỏ với đáy màn hình (giúp cuộn nếu nội dung dài) */
    margin-left: auto;  /* Đẩy popup sang bên phải */
    margin-right: 5vw;  /* Khoảng cách từ mép phải màn hình, ví dụ 5% chiều rộng viewport */
    
    /* Nếu bạn muốn popup chiếm một chiều rộng cụ thể và cố định ở bên phải,
      bạn có thể bỏ margin-left: auto và đặt left/right cho popup-modal
      nhưng điều đó phức tạp hơn và có thể ảnh hưởng đến lớp phủ.
      Cách dùng margin cho popup-content thường đơn giản và hiệu quả hơn.
    */

    /* Đảm bảo max-width vẫn được tôn trọng để popup không quá rộng.
      Giá trị max-width: 500px; đã có sẵn trong CSS của bạn cho #popup-customize-content.
      Nếu bạn muốn nó rộng hơn trên desktop, bạn có thể tăng giá trị này ở đây.
      Ví dụ:
      max-width: 600px; 
    */
  }
}
/* ... (Phần còn lại của tệp won-customize.css) ... */
/* Nếu bạn muốn một breakpoint khác cho máy tính bảng, ví dụ màn hình từ 992px trở lên 
  cho máy tính bàn, bạn có thể thêm một media query khác:

@media (min-width: 992px) {
  .popup-content#popup-customize-content {
    margin-right: 3vw; // Khoảng cách nhỏ hơn cho màn hình lớn hơn
    max-width: 650px;  // Có thể cho phép rộng hơn nữa
  }
}
*/
/* ==========================================================================
   ĐỔI MÀU VÀNG CHO CHỮ TRÊN TAB CUSTOMIZE KHI ĐƯỢC CHỌN (ACTIVE)
   ========================================================================== */

/* 1. Đổi màu chữ cho tab đang active */
.popup-tabs .popup-tab.active {
    color: #f6ff00 !important;   /* Màu vàng Gold */
    font-weight: bold !important; /* Làm đậm chữ cho nổi bật */
}

/* 3. Tùy chọn: Nếu muốn có gạch chân màu vàng bên dưới tab đang chọn */
.popup-tabs .popup-tab.active {
    border-bottom: 2px solid #f6ff00 !important;
}

/* 3. HIỆU ỨNG DI CHUỘT (Cái bạn cần) */
input[type="checkbox"]:hover {
 
  box-shadow: 0 0 6px rgba(41, 182, 246, 1); /* Thêm chút bóng sáng (glow) */
}
input[type="checkbox"]:checked:hover {
 
  box-shadow: 0 0 6px rgba(41, 182, 246, 1); /* Thêm chút bóng sáng (glow) */
  cursor: pointer;
}
/* ==========================================================================
   CHỈNH CON TRỎ CHUỘT TRONG MENU MÀU SẮC (CHUẨN XÁC)
   ========================================================================== */

/* 1. Chỉ hiện bàn tay ở các dòng CÓ THỂ BẤM (Các dòng chứa màu) */
/* Dựa vào class 'q-item--clickable' có sẵn trong HTML của bạn */
#appearance-color-theme-options .q-item--clickable {
    cursor: pointer !important;
    transition: background-color 0.2s ease; /* Thêm hiệu ứng nền mượt */
}
/* 2. Các dòng tiêu đề (General, Nature, Flags...) thì dùng chuột bình thường */
/* Dựa vào thuộc tính role="separator" */
#appearance-color-theme-options .q-item[role="separator"] {
    cursor: default !important; /* Chuột hình mũi tên bình thường */
    pointer-events: none;       /* Chặn hoàn toàn việc click vào tiêu đề */
    font-weight: bold;          /* (Tùy chọn) Làm đậm tiêu đề cho đẹp */
    color: #666;                /* (Tùy chọn) Màu chữ tiêu đề nhạt hơn chút */
}

/* 2. Trạng thái khi DI CHUỘT (Hover) */
#wheelBorderColorTrigger:hover {
    /* Viền màu xanh #499dfa */
    border: 1px solid #499dfa !important;
    
    /* Bóng sáng màu xanh dương (Glow) */
    box-shadow: 0 0 6px rgba(41, 182, 246, 1) !important;
    
    /* Phóng to nhẹ một chút cho sinh động (Tùy chọn) */
    transform: scale(1.1);
}
#wheelBgColorTrigger:hover {
    /* Viền màu xanh #499dfa */
    border: 1px solid #499dfa !important;
    
    /* Bóng sáng màu xanh dương (Glow) */
    box-shadow: 0 0 6px rgba(41, 182, 246, 1) !important;
    
    /* Phóng to nhẹ một chút cho sinh động (Tùy chọn) */
    transform: scale(1.1);
}
#spinButtonColorTriggerIcon:hover {
    /* Viền màu xanh #499dfa */
    border: 1px solid #499dfa !important;
    
    /* Bóng sáng màu xanh dương (Glow) */
    box-shadow: 0 0 6px rgba(41, 182, 246, 1) !important;
    
    /* Phóng to nhẹ một chút cho sinh động (Tùy chọn) */
    transform: scale(1.1);
}
#pageTextColorTriggerIcon:hover {
    /* Viền màu xanh #499dfa */
    border: 1px solid #499dfa !important;
    
    /* Bóng sáng màu xanh dương (Glow) */
    box-shadow: 0 0 6px rgba(41, 182, 246, 1) !important;
    
    /* Phóng to nhẹ một chút cho sinh động (Tùy chọn) */
    transform: scale(1.1);
}
#pageBgColorTriggerIcon:hover {
    /* Viền màu xanh #499dfa */
    border: 1px solid #499dfa !important;
    
    /* Bóng sáng màu xanh dương (Glow) */
    box-shadow: 0 0 6px rgba(41, 182, 246, 1) !important;
    
    /* Phóng to nhẹ một chút cho sinh động (Tùy chọn) */
    transform: scale(1.1);
}

/* ======================================================= */
/* CẤU HÌNH CÁC NÚT TRIGGER MÀU SẮC (Border, BG, Icon...) */
/* ======================================================= */

/* 1. TRẠNG THÁI BÌNH THƯỜNG (MẶC ĐỊNH) */
#wheelBorderColorTrigger,
#wheelBgColorTrigger,
#spinButtonColorTriggerIcon,
#pageTextColorTriggerIcon,
#pageBgColorTriggerIcon {
    /* Yêu cầu: Viền xám đậm ở chế độ sáng */
    border: 1px solid #a5a5a5 !important;  
    
    /* Thêm transition để khi hover hoặc đổi màu mượt mà hơn */
    transition: all 0.2s ease;
    cursor: pointer;
    border-radius: 4px; /* Bo góc nhẹ cho đẹp (tùy chọn) */
}

/* 2. TRẠNG THÁI BÌNH THƯỜNG - KHI Ở CHẾ ĐỘ TỐI (DARK MODE) */
body.theme-dark #wheelBorderColorTrigger,
body.theme-dark #wheelBgColorTrigger,
body.theme-dark #spinButtonColorTriggerIcon,
body.theme-dark #pageTextColorTriggerIcon,
body.theme-dark #pageBgColorTriggerIcon {
    /* Yêu cầu: Viền sáng trắng bắt buộc */
    border-color: #ffffff !important; 
}
/* ======================================================= */
/* CẤU HÌNH Ô CHỌN MÀU (ENTRY COLOR ICONS) */
/* ======================================================= */

/* 1. Trạng thái mặc định (Giữ chỗ viền để không bị nhảy layout) */
.entry-color-icons-container .entry-color-icon {
    /* Tạo viền 2px nhưng trong suốt */
    border: 2px solid transparent; 
    
    /* Đảm bảo viền tính vào kích thước ô, không làm ô to phình ra */
    box-sizing: border-box; 
    
    /* Hiệu ứng chuyển màu mượt mà */
    transition: all 0.2s ease; 
}

/* 2. CHẾ ĐỘ TỐI (DARK MODE) -> BẮT BUỘC VIỀN TRẮNG */
body.theme-dark .entry-color-icons-container .entry-color-icon {
    /* Đổi màu viền sang trắng tinh */
    border-color: #ffffff !important;
    
    /* (Tùy chọn) Thêm chút bóng nhẹ để tách biệt khỏi nền tối */
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.5); 
}

/* 3. (Tùy chọn) Khi di chuột vào ô màu thì viền sáng hơn hoặc đổi màu */
.entry-color-icons-container .entry-color-icon:hover {
    border-color: #ccc; /* Chế độ sáng: Viền xám */
    transform: scale(1.1); /* Phóng to nhẹ */
    cursor: pointer;
}

/* Khi di chuột trong chế độ tối -> Viền vẫn trắng nhưng sáng rực rỡ hơn */
body.theme-dark .entry-color-icons-container .entry-color-icon:hover {
    border-color: #ffffff !important;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.8) !important;
}
#popup-customize {
    /* Đặt nền trong suốt cho lớp phủ ngoài cùng */
    background-color: transparent !important;
    background: none !important;
    
    /* Tắt hiệu ứng làm mờ nền (nếu có) */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* ================================================================= */
/* HIỆU ỨNG GƯƠNG KÍNH (FIXED PALETTE) */
/* ================================================================= */

/* 1. Thiết lập vùng chứa Popup */
#popup-customize-content {
    position: relative !important;
    isolation: isolate; /* Tạo không gian xếp chồng riêng */
}

/* 2. Lớp màn đen Gương Kính (Overlay) */
#won-glass-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%; height: 100%;
    /* Màu đen mờ 60% */
    background-color: rgba(0, 0, 0, 0.6) !important; 
    /* Hiệu ứng làm mờ nền bên dưới (Gương kính) */
    backdrop-filter: blur(5px); 
    -webkit-backdrop-filter: blur(5px);
    
    z-index: 999 !important; /* Cao hơn nội dung popup */
    opacity: 0;
    pointer-events: none; /* Ẩn thì bấm xuyên qua */
    transition: opacity 0.3s ease;
    border-radius: 8px;
}

/* Khi kích hoạt thì hiện lên */
#popup-customize-content.mode-darken #won-glass-overlay {
    opacity: 1;
    pointer-events: auto;
}

/* 3. Container chứa các ô màu (Entry Icons) */
#popup-customize-content.mode-darken #entry-color-icons-container-id {
    position: relative !important;
    z-index: 1000 !important; /* Cao hơn Overlay (9999) -> BẤM ĐƯỢC */
    transform: scale(1.02); /* Phóng to nhẹ */
}

/* 4. BẢNG MÀU PALETTE (FIX LỖI BỊ CHE) */
/* Bắt buộc dùng !important để đè lên style nội tuyến z-index: 1002 */
.color-palette {
    z-index: 1001 !important; /* Giá trị cao nhất có thể của trình duyệt */
    position: absolute !important; 
    box-shadow: 0 10px 25px rgba(0,0,0,0.5) !important; /* Đổ bóng cho nổi bật hẳn lên */
}

/* Các ô màu con bên trong palette cũng phải nổi */
.color-option {
    z-index: 1000 !important;
    cursor: pointer;
}

#appearance-color-theme-dropdown {
    position: relative !important; /* Bắt buộc có để z-index hoạt động */
    z-index: 900 !important;       /* Cao hơn lớp kính (899) */
}

/* Sử dụng: html + body + ID cha + ID con để tạo độ ưu tiên tuyệt đối */
html body.theme-dark #appearance-panel #appearance-color-theme-button,
html body.dark #appearance-panel #appearance-color-theme-button,
html[data-theme="dark"] body #appearance-panel #appearance-color-theme-button {
    
    /* 1. Màu nền Xanh #4d89f2 */
    background-color: #4d89f2 !important;
    background: #4d89f2 !important; /* Đè luôn cả background-image nếu có */
    
    /* 2. Màu chữ & Viền */
    color: #ffffff !important;
    border: 1px solid #f2e44d !important;
    
    /* 3. Đảm bảo hiển thị */
    opacity: 1 !important;
    visibility: visible !important;
    box-shadow: none !important; /* Xóa bóng cũ nếu có */
    

}
/* Hiệu ứng khi di chuột (Hover) */
html body.theme-dark #appearance-panel #appearance-color-theme-button:hover,
html body.dark #appearance-panel #appearance-color-theme-button:hover {
    background-color: #5d96f8 !important; /* Xanh đậm hơn khi hover */
    border-color: #fff !important;
    box-shadow: 0 0 10px rgba(77, 137, 242, 0.6) !important;
    transform: scale(1.02);
}

/* 1. THẰNG ÂM THANH (SOUND) - CHO NỔI CAO NHẤT */
#customize-sound-dropdown {
    position: relative !important; /* Bắt buộc */
    z-index: 9999 !important;      /* Cao chót vót */
    isolation: isolate;            /* Tạo lớp riêng biệt để không bị thằng khác đè */
}

/* 2. MENU CON CỦA ÂM THANH (Cái bảng chứa Bollywood, Cinematic...) */
#customize-sound-options {
    z-index: 10000 !important;     /* Cao hơn cả cha nó để hiện rõ */
}

/* 3. THẰNG THỜI GIAN (SPIN) - CHO CHÌM XUỐNG */
#customize-spin-dropdown {
    position: relative !important;
    z-index: 10 !important;        /* Thấp tè */
}

/* 1. THẰNG "AFTER SOUND" (Âm thanh sau khi quay) - CHO NỔI CAO */
#customize-after-sound-dropdown {
    position: relative !important;
    z-index: 9999 !important;      /* Cao chót vót */
    isolation: isolate;            /* Tạo lớp riêng, đè tất cả */
}

/* Menu con của nó cũng phải cao */
#customize-after-sound-options {
    z-index: 10000 !important;
}

/* 2. THẰNG "ANIMATE" (Hiệu ứng thắng) - CHO CHÌM XUỐNG DƯỚI */
#animate-winning-entry-dropdown {
    position: relative !important;
    z-index: 10 !important;        /* Thấp tè */
}

/* ========================================================================
   >>> HIỆU ỨNG FOCUS KHI DÙNG BÀN PHÍM (TAB) CHO CÁC NÚT & ICON CHÍNH <<<
   ======================================================================== */
#wheelBorderColorTrigger:focus-visible,
#wheelBgColorTrigger:focus-visible,
#spinButtonColorTriggerIcon:focus-visible,
#spin-button-size-dropdown:focus-visible,
#spin-button-text-input:focus-visible,
#pageBgColorTriggerIcon:focus-visible,
#pageTextColorTriggerIcon:focus-visible,
#won-arrow-trigger:focus-visible {
    outline: none !important; /* Xóa cái viền xanh mờ mờ mặc định của trình duyệt */
    
    /* Tạo 2 lớp viền: 1 trắng ép sát, 1 xanh dương bao ngoài cực nét */
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #007bff !important; 
    
    transform: scale(1.02) !important; /* Phóng to lên 10% cho lòi mắt ra */
    z-index: 10 !important; /* Nhô lên trên cùng, đéo sợ bị thằng nào che mất viền */
    
    /* Chuyển động mượt mà trong 0.2 giây, đéo bị giật cục */
    transition: transform 0.2s ease, box-shadow 0.2s ease !important; 
    
    /* Tùy chọn: Bo tròn góc viền xanh cho nó mềm mại (sếp có thể bỏ nếu thích viền vuông) */
    border-radius: 4px; 
}

/* Lưu ý nhỏ cho ô Input và Dropdown: 
   Nếu sếp thấy ô nhập chữ (#spin-button-text-input) phóng to 1.1 bị lố quá, 
   thì hạ xuống scale(1.02) cho riêng nó thôi nhé! */


/* ========================================================================
   >>> HIỆU ỨNG CHO MŨI TÊN (KHI DÙNG LÊN/XUỐNG TRONG DROPDOWN) <<<
   ======================================================================== */
.arrow-option-btn.dropdown-item-arrow:focus-visible {
    outline: none !important;
    
    /* Viền xanh lọt vào trong (inset) hoặc đẩy ra ngoài tùy thiết kế sếp, tao để đẩy ra ngoài cho đồng bộ */
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #007bff !important;
    
    transform: scale(1.06) !important; /* Phóng to 8% thui vì trong list nó chật */
    z-index: 10 !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease !important;
    
    /* Khuyến mãi thêm: Đổi luôn màu nền nhẹ nhẹ cho nó nổi bần bật */
    background-color: #f0f8ff !important; 
    border-radius: 6px;
}

/* ==========================================================
   >>> GIẢI PHÓNG DROPDOWN: CHO PHÉP TRÀN RA NGOÀI CHE NÚT <<<
   (Áp dụng chuẩn UX Mobile: Nổi lên trên cùng)
   ========================================================== */

/* 1. Đập vỡ lồng kính (Xóa thanh cuộn) của riêng 2 tab chứa Dropdown */
#during-spin-panel.popup-panel.active {
    overflow-y: visible !important;  /* Cho phép nội dung tràn ra ngoài */
    max-height: none !important;     /* Thả rông chiều cao, không ép khung nữa */
}

/* 2. Bơm chiều dài kịch kim cho Dropdown & Ép nổi lên trên OK/Cancel */
#customize-sound-options.customize-dropdown-content,
#customize-spin-options.customize-dropdown-content {
    max-height: 60dvh !important; /* Dài chùm xuống tận 60% màn hình, che lấp mọi thứ */
    z-index: 99999 !important;    /* Bá đạo trên từng hạt gạo, đè nát cả Footer */
    box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important; /* Đổ cái bóng thật đậm cho nó có chiều sâu, tách biệt với nền */
}

#customize-spin-options.customize-dropdown-content {
    max-width: 60% !important; /* Dài chùm xuống tận 60% màn hình, che lấp mọi thứ */
    z-index: 99999 !important;    /* Bá đạo trên từng hạt gạo, đè nát cả Footer */
    box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important; /* Đổ cái bóng thật đậm cho nó có chiều sâu, tách biệt với nền */
}

/* ==========================================================
   >>> MỞ RỘNG CHIỀU NGANG DROPDOWN SPIN OPTIONS (MOBILE) <<<
   ========================================================== */
@media (max-width: 768px) {
    #customize-spin-options.customize-dropdown-content {
        width: 30dvw !important; /* Rộng 40% chiều ngang màn hình động */
        min-width: 120px !important; /* Chốt chặn an toàn: Nếu màn hình quá bé thì tối thiểu vẫn được 150px đéo bị móp méo */
        white-space: normal !important; /* Nếu chữ dài quá thì cho phép tự động xuống dòng đéo bị tràn viền */
    }
}