/* Reset margin, padding và ẩn overflow chiều ngang cho toàn trang */
html {
    /* Tạo hiệu ứng trượt mượt khi bấm vào các link neo (anchor links) */
    scroll-behavior: smooth; 
    /* Chặn hiệu ứng "kéo nảy" (rubber-banding) khó chịu khi cuộn hết trang */
    overscroll-behavior-y: none; 
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif; /* Hoặc font chữ gốc của bạn */
    
    /* Giữ nguyên ẩn thanh cuộn ngang */
    overflow-x: hidden; 
    
    /* [QUAN TRỌNG] Kích hoạt cuộn quán tính mượt mà cho iOS */
    -webkit-overflow-scrolling: touch; 
}

/* Container & Layout */
#main-container {
  display: flex;
  max-width: 1200px;
  margin: 20px auto;
  gap: 50px;
  align-items: flex-start;
  position: relative;
}

#wheel-container {
  text-align: center;
  position: relative;
  flex: 3;
}

/* Container cho các nút điều khiển phía bên phải */
#controls-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 50px;
}

/* Xếp các nút theo từng dòng */
.controls-row {
  display: flex;
  gap: 10px;
}
/* ==========================================
   >>> ĐỘNG CƠ VIỀN CHO NÚT CONTROL <<<
   ========================================== */
.control-btn:focus-visible {
    outline: 2px solid #007bff !important;
    outline-offset: 2px !important;
    border-radius: 4px; /* Nếu nút tròn thì sửa thành 50% nhé */
    box-shadow: 0 0 8px rgba(0, 123, 255, 0.4);
    transition: all 0.2s ease;
}

/* ==========================================
   >>> VIỀN CHO CÁC MỤC TRONG DROPDOWN KHI DÙNG MŨI TÊN/TAB <<<
   ========================================== */
.dropdown-menu a:focus-visible,
.dropdown-menu button:focus-visible,
.menu-extra-dropdown a:focus-visible,
.menu-extra-dropdown button:focus-visible,
#add-images-dropdown-menu a:focus-visible,
#add-images-dropdown-menu button:focus-visible {
    outline: 2px solid #007bff !important;
    outline-offset: -2px !important; /* Thụt viền vào trong một tí cho đỡ lem ra ngoài viền dropdown */
    background-color: #f8f9fa;       /* Đổi nhẹ màu nền cho giống đang hover chuột */
    border-radius: 4px;
}
/* Style chung cho các nút điều khiển */
.control-btn {
  padding: 6px 10px;
  font-size: 14px;
  background-color: white;
  color: black;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: capitalize;
  font-weight: normal;
  font-family: Arial, sans-serif;
}

.control-btn img {
  margin-right: 5px;
}

/* Style riêng cho nút input text và Spin Results */
.wide-btn {
  min-width: 120px;
  font-style: italic;
  text-transform: lowercase;
  padding: 6px 10px;
  font-size: 14px;
  background-color: white;
  color: black;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
}

/* Hover effect cho nút wide-btn: nền chuyển sang xanh và chữ trắng */
.wide-btn:hover {
  background-color: #007BFF !important;
  color: white !important;
}

/* Canvas styling */
canvas {
  width: 100%;
  height: auto;
  max-width: 900px;
}

/* =========================================================
   CẤU HÌNH MŨI TÊN THÔNG MINH (DỰA TRÊN LAYOUT THỰC TẾ)
   ========================================================= */

/* 1. TRƯỜNG HỢP MENU NẰM NGANG (Desktop, iPad Pro Ngang, Surface)
   -> Giữ nguyên vị trí chuẩn của Desktop
*/
/* ==========================================
   >>> KHU VỰC QUY HOẠCH MŨI TÊN #POINTER CHUẨN UX <<<
   ========================================== */

/* 1. Đoạn chuẩn cho Desktop (Kích thước gốc 116x48) */
body.won-mode-desktop #pointer {
    position: absolute;
    top: 50%;
    transform: translate(0%, -50%) !important; /* Ép chết tâm, đéo cho lệch */
    z-index: 10;
    right: 0 !important;         
    width: 116px !important;
    height: 48px !important;
    max-width: none !important; 
    max-height: none !important;
	/* THÊM DÒNG NÀY ĐỂ TỐI ƯU GPU CHO MOBILE */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform-origin: 75% 50%;
}

/* 2. Đoạn chuẩn cho giao diện thu gọn tầm trung/Tablet (Kích thước 99x41) */
body.won-mode-stacked #pointer {
    position: absolute;
    top: 50%;
    transform: translate(0%, -50%) !important;
    z-index: 10;
    right: 0 !important;         
    width: 99px !important;
    height: 41px !important;
    max-width: none !important; 
    max-height: none !important;
	/* THÊM DÒNG NÀY ĐỂ TỐI ƯU GPU CHO MOBILE */
    transform-origin: 75% 50%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* 3. ĐOẠN ĐẶC TRỊ MOBILE < 480PX (Ăn ngay lập tức, triệt tiêu CLS) */
@media (max-width: 480px) {
    /* Ép tất cả các trường hợp trên mobile (dù có class body hay chưa) đều phải nhận size này */
    #pointer, 
    body.won-mode-stacked #pointer, 
    body.won-mode-desktop #pointer {
        position: absolute !important;
        top: 50% !important;
        right: 0 !important;
        width: 60px !important;   /* Giữ cứng size 60px */
        height: 25px !important;
        max-width: none !important; 
        max-height: none !important;
        transform: translate(0%, -50%) !important; /* Diệt tận gốc cú thò ra thụt vào */
        transform-origin: 75% 50% !important;
    }
}

/* 2. TRƯỜNG HỢP MENU RỚT XUỐNG DƯỚI (iPad Dọc, Tablet nhỏ, Mobile)
   -> Đổi sang cấu hình Tablet/Mobile
*/


/* 3. TINH CHỈNH RIÊNG CHO MOBILE BÉ XÍU (Dưới 480px)
   Vẫn là Stacked nhưng cần chỉnh nhỏ lại chút nữa
*/

/* =========================================================
   HIỆU ỨNG KIM NẨY (ANIMATION CHỈ XOAY - KHÔNG DỊCH CHUYỂN)
   ========================================================= */

/* Animation này CHỈ XOAY, không can thiệp vào translate */
@keyframes pointerTickRotateOnly {
    0%   { transform: translate(0%, -50%) rotate(0deg); }
    40%  { transform: translate(0%, -50%) rotate(-8deg); } 
    100% { transform: translate(0%, -50%) rotate(0deg); }
}

.pointer-tick {
    /* Chạy animation */
    animation: pointerTickRotateOnly 0.1s ease-out forwards;
    
    /* Quan trọng: Giữ nguyên các thuộc tính định vị khi đang chạy animation */
    transform-origin: 75% 50%; 
    will-change: transform;
}

/* ==========================================
   >>> ĐỘNG CƠ VIỀN FOCUS CHO NÚT SPIN <<<
   ========================================== */
#spin-btn:focus-visible, 
.spin-btn:focus-visible {
    outline: 4px solid #007bff !important; /* Viền xanh biển cực đậm, nổi bật hẳn lên */
    outline-offset: 4px !important;        /* Cách xa nút ra một tí cho thoáng */
    
    /* TUỲ CHỈNH ĐỘ BO TRÒN TẠI ĐÂY: */
    border-radius: 50% !important;         /* Dùng 50% nếu nút quay của mày là HÌNH TRÒN XOE */
    /* border-radius: 50px !important; */  /* Dùng 50px nếu nút của mày là HÌNH VIÊN THUỐC (Pill) */
    /* border-radius: 12px !important; */  /* Dùng 12px nếu nút của mày là HÌNH CHỮ NHẬT BO GÓC */
    
    box-shadow: 0 0 20px rgba(0, 123, 255, 0.8) !important; /* Toả vầng hào quang cực mạnh kích thích bấm */
    transition: all 0.2s ease-in-out;      /* Hiệu ứng chớp viền mượt mà */
}

#spin-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0;
  font-size: 24px;
  background-color: #1e1e1e;
  color: white;
  border: 3px solid white; /* << THÊM DÒNG NÀY */
  border-radius: 50%;
  cursor: pointer;
  width: 120px;
  height: 120px;
  transition: background-color 0.2s;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-sizing: border-box; /* << THÊM DÒNG NÀY (Quan trọng) */
}
/* TRẠNG THÁI HOVER: GIỮ CĂN GIỮA + PHÓNG TO + PHÁT SÁNG */
#spin-btn:focus{
    background-color: #ff3600 !important;
    
    /* QUAN TRỌNG: Phải giữ translate(-50%, -50%) để không bị lệch nút */
    /* Thêm scale(1.1) để to lên */
    transform: translate(-50%, -50%) scale(1.4) !important;
    
    /* Hiệu ứng viền đỏ phát sáng mạnh */
    box-shadow: 0 0 15px #ff0000, 0 0 30px #ff4d4d !important;
    
    /* Đổi viền trắng thành viền đỏ khi di chuột */
    border: 3px solid #fff !important;
    
    /* Chuyển động mượt hơn */
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}
#spin-btn:hover {
    background-color: #ff3600 !important;
    
    /* QUAN TRỌNG: Phải giữ translate(-50%, -50%) để không bị lệch nút */
    /* Thêm scale(1.1) để to lên */
    transform: translate(-50%, -50%) scale(2) !important;
    
    /* Hiệu ứng viền đỏ phát sáng mạnh */
    box-shadow: 0 0 15px #ff0000, 0 0 30px #ff4d4d !important;
    
    /* Đổi viền trắng thành viền đỏ khi di chuột */
    border: 3px solid #fff !important;
    
    /* Chuyển động mượt hơn */
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

/* Thêm hiệu ứng rung nhẹ (Pulse) để tăng tính kích thích */
@keyframes spinGlowPulse {
    0% { transform: translate(-50%, -50%) scale(1.1); }
    50% { transform: translate(-50%, -50%) scale(1.15); }
    100% { transform: translate(-50%, -50%) scale(1.1); }
}

#spin-btn:hover {
    animation: spinGlowPulse 0.8s infinite ease-in-out;
}

#center-image-display {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  z-index: 0;
  display: none;
}

.spin-text {
  position: relative;
  z-index: 1;
  color: white;
  font-weight: bold;
  /* Thêm viền đen nhẹ cho chữ bằng text-shadow */
  text-shadow:
    -0.5px -0.5px 0 #000,
     0.5px -0.5px 0 #000,
    -0.5px  0.5px 0 #000,
     0.5px  0.5px 0 #000;
	 /* --- BẮT ĐẦU THAY ĐỔI --- */
  display: inline-block; /* Cho phép đặt max-width và text-align hoạt động đúng */
  text-align: center;    /* Căn giữa văn bản khi có nhiều dòng */
  line-height: 1.15;     /* Khoảng cách giữa các dòng, ví dụ: 1.15. Điều chỉnh nếu cần. */
  max-width: 90%;        /* Giới hạn chiều rộng của text. Quan trọng! Có thể cần điều chỉnh (vd: 80%, 90px) */
  overflow-wrap: break-word; /* Cho phép ngắt từ nếu một từ đơn lẻ quá dài (dự phòng) */
  word-break: normal; /* Ưu tiên ngắt dòng tại khoảng trắng, dấu gạch nối */
  padding: 0 5px;        /* Thêm chút padding ngang để văn bản không chạm sát viền (tùy chọn) */
  transition: font-size 0.1s ease-out;
}

/* Winner text & Overlay */
#winner {
  margin-bottom: 20px;
  font-size: 24px;
  font-weight: bold;
  color: red;
}

/* CHỈNH SỬA: Winner Overlay luôn nằm giữa vòng quay và chữ to khi không có ảnh */
#winner-overlay {
  position: absolute;
  top: 50%; /* Đặt tại giữa theo chiều dọc */
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 28px; /* Mặc định chữ lớn hơn khi không có ảnh */
  font-weight: bold;
  color: white;
  background: red;
  padding: 15px 25px;
  border-radius: 10px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 15;
  width: 80%;
  max-width: 400px;
  text-align: center;
}

/* Khi có ảnh hiện lên: giảm kích thước chữ */
#winner-overlay.with-image {
  font-size: 20px;
}

#winner-image {
  width: 235px;
  height: 235px;
  display: block;
  margin: 10px auto;
  object-fit: contain;
}

#close-winner-btn {
  position: absolute;
  top: 0;
  right: 0;
  background: transparent;
  border: none;
  padding: 5px;
  cursor: pointer;
}

/* Pháo hoa */
#fireworks {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 30;
  pointer-events: none;
}

/* Dropdown styling cho nút Add Images */
.dropdown {
  position: relative;
  display: inline-block;
}


/* Loại bỏ gạch chân của mục cuối cùng (để không dính vào viền khung dưới) */
.dropdown-menu a:last-child {
    border-bottom-color: transparent;
}
.dropdown-menu {
  display: none;
  position: absolute;
  z-index: 100;
  background-color: white;
  border: 1px solid #ccc;
  border-radius: 4px;
  min-width: 200px;
  margin-top: 5px;
  white-space: nowrap;
}
/* 2. XỬ LÝ TỪNG MỤC CON (Items) */
.dropdown-menu a {
    display: block;
    padding: 8px 15px;
    text-decoration: none;
    color: black;
    
    /* MẤU CHỐT KỸ THUẬT: */
    /* Đặt viền 1px cho TẤT CẢ các cạnh nhưng để trong suốt (transparent) */
    border: 2px solid transparent;
    
    /* Ghi đè riêng cạnh dưới thành màu xám (Gạch chân) */
    border-bottom-color: #eee; 
    
    transition: all 0.1s ease;
    margin: 0 2px; /* Cách lề 2 bên một chút cho đẹp */
}

.dropdown-menu a#restart-imported-image {
  color: red;
}
.dropdown-menu a#restart-imported-image:hover {
  color: red;
    background-color: #f2f3f8;
}
.dropdown-menu a:hover {
  background-color: #5873f8;
  color: #fff;
  
}
/* Khi di chuột vào KHUNG TO -> Viền khung đổi màu xanh */
.dropdown-menu:hover {
    border-color: #002af9 !important;
    box-shadow: 0 4px 12px rgba(0, 42, 249, 0.15); /* Bóng mờ xanh nhẹ */
}
/* ======================================================= */
/* HIỆU ỨNG VIỀN XANH (#002af9) CHO MENU DROPDOWN */
/* ======================================================= */

/* ======================================================= */
/* CẤU HÌNH MENU DROPDOWN (GẠCH CHÂN 2PX + NGOẠI LỆ RESTART) */
/* ======================================================= */

/* 1. KHUNG BAO NGOÀI (Container) */
#menu-dropdown.menu-extra-dropdown {
    border: 1px solid #ccc;
    background-color: #fff;
    padding: 0; /* Xóa padding thừa để gạch chân chạm lề */
    border-radius: 4px;
    overflow: hidden; /* Bo góc cho cả nội dung bên trong */
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transition: border-color 0.2s ease;
}

/* Hover vào khung to -> Viền xanh (giữ hiệu ứng cũ nếu bạn thích) */
#menu-dropdown.menu-extra-dropdown:hover {
    border-color: #002af9 !important;
}

/* 2. CẤU HÌNH TỪNG MỤC CON (Menu Items) */
#menu-dropdown.menu-extra-dropdown a {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    color: #333;
    
    /* CẤU HÌNH VIỀN (Gạch chân xám 2px) */
    /* Các cạnh khác viền trong suốt để giữ chỗ */
    border: 1px solid transparent; 
    /* Riêng cạnh dưới màu xám dày 2px */
    border-bottom: 2px solid #eee; 
    
    transition: all 0.2s ease;
    margin: 0;
}

/* Loại bỏ gạch chân của mục cuối cùng cho đẹp */
#menu-dropdown.menu-extra-dropdown a:last-child {
    border-bottom: none;
}

/* 3. HIỆU ỨNG HOVER CHUNG (Nền xanh, Chữ trắng) */
#menu-dropdown.menu-extra-dropdown a:hover {
    background-color: #5873f8 !important;
    color: #fff !important;
 
}

/* 4. XỬ LÝ NGOẠI LỆ: NÚT RESTART ALL (Id="restart-all-btn") */
/* Khi di chuột vào nút này -> Nền xám, Chữ đen/đỏ tùy ý */
#menu-dropdown.menu-extra-dropdown a#restart-all-btn:hover {
    background-color: #e0e0e0 !important; /* Nền xám đậm hơn chút */
    color: #ff0000 !important; /* Chữ màu tối (hoặc đỏ nếu muốn cảnh báo) */
     
}
.dropdown.show .dropdown-menu {
  display: block;
}

/* Responsive styling */
@media (max-width: 900px) {
  #main-container {
    flex-direction: column;
  }
  
  #controls-container {
    width: 100%;
    margin-top: 20px;
  }
  
  canvas {
    min-width: 300px;
  }
  
  #winner-overlay {
    font-size: 28px;
    padding: 10px 15px;
  }
  
  #spin-btn {
    width: 120px;
    height: 120px;
    font-size: 20px;
  }
}

@media (max-width: 500px) {
  #spin-btn {
    width: 60px;
    height: 60px;
    font-size: 14px;
  }
}

/* Input Text & Results */
#names-input-box {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #cccccc;
  background-color: #fff;
  margin: 0;
  padding: 0;
}
#input-buttons {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin: 0;
}
#input-buttons button {
  flex: 1;
  border: 1px solid #cccccc;
  background-color: transparent;
  cursor: pointer;
}
#name-input {
  display: block;
  width: 100%;
  border: none;
  outline: none;
  font-size: 16px;
  resize: vertical;
  padding: 10px;
  margin: 0;
  border-top: 1px solid #cccccc;
}
#list-update-table {
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  border: 1px solid #ccc;
  background-color: #fff;
  overflow-y: auto;
  max-height: 300px;
}
#list-update-table .table-header {
  text-align: center;
  font-weight: bold;
  margin-bottom: 10px;
  font-size: 18px;
  border-bottom: 1px solid #ccc;
  padding-bottom: 5px;
}
#entry-controls div {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
  padding: 5px;
  border-bottom: 1px dotted #ccc;
}
#entry-controls span {
  margin-right: 10px;
  font-size: 16px;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#entry-controls img.restart-btn {
  width: 20px;
  height: 20px;
  cursor: pointer;
}
.modal {
  display: none;
  position: fixed;
  z-index: 200;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.4);
}
.modal-content {
  background-color: #fefefe;
  margin: 10% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  max-width: 500px;
  border-radius: 8px;
}
.close-button {
  float: right;
  cursor: pointer;
}
.close-button img {
  display: block;
}
.close-button:hover,
.close-button:focus {
  opacity: 0.7;
}
img.emoji {
  width: 1.5em;
  height: 1.5em;
  max-width: none;
}
/* Trong won-styles.css (hoặc nơi bạn định nghĩa z-index cuối cùng cho chúng) */

#winner-overlay {
  /* ... các thuộc tính khác ... */
  z-index: 9999 !important; /* Cao thứ hai, dưới animation-layer */
}

#fireworks {
  /* ... các thuộc tính khác ... */
  /* Quan trọng: Đảm bảo dòng này được áp dụng và không bị ghi đè bởi rule khác có z-index cao hơn trừ animation-layer và winner-overlay */
  z-index: 9998 !important; /* Thấp nhất trong 3 lớp này */
}

/* === CSS cho List Update Table - Image Controls === */

/* Container cho mỗi mục trong List Update Table */
/* Lưu ý: một số thuộc tính có thể đã tồn tại từ các rule chung cho #entry-controls div */
/* Chúng ta sẽ làm rõ hơn các class cụ thể. */

#entry-controls .entry-control-item {
  display: flex;
  align-items: center;
  /* justify-content: space-between; */ /* Xem xét lại nếu muốn các nút ảnh nằm sát text */
  margin-bottom: 5px;
  padding: 5px;
  border-bottom: 1px dotted #ccc;
}

#entry-controls .entry-control-item > span { /* Chỉ áp dụng cho span tên entry trực tiếp */
  margin-right: 10px; /* Khoảng cách giữa tên và cụm ảnh/nút */
  font-size: 16px;
  flex-grow: 1; /* Cho phép text co giãn */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* min-width: 0; */ /* Đôi khi cần thiết để flex-grow hoạt động đúng với overflow */
}

/* Container cho thumbnail VÀ nút xóa */
.entry-control-image-display-container {
  position: relative; /* Quan trọng để định vị nút xóa con bên trong */
  display: inline-flex; /* Hoặc 'flex' nếu bạn muốn các item bên trong nó (ảnh, nút xóa) được sắp xếp bằng flex */
  align-items: center; /* Căn giữa các item con theo chiều dọc */
  /* margin-left: 8px; */ /* Sẽ đặt margin cho imageActionsWrapper */
  vertical-align: middle; /* Căn giữa container này với text của entry */
}

.entry-control-thumbnail {
  width: 28px; /* Kích thước thumbnail */
  height: 28px;
  border: 1px solid #ccc;
  object-fit: cover; /* Đảm bảo ảnh không bị méo và lấp đầy khung */
  border-radius: 3px; /* Bo góc nhẹ */
  vertical-align: middle; /* Quan trọng để căn chỉnh với các phần tử inline khác */
  display: block; /* Ngăn các khoảng trống thừa không mong muốn */
}

/* Nút xóa ảnh thumbnail (icon 'x' màu đỏ) */
.entry-control-delete-img-btn {
  position: absolute;
  top: -8px;  /* Dịch lên trên so với góc trên của imageDisplayContainer */
  right: -8px; /* Dịch sang phải so với góc phải của imageDisplayContainer */
  width: 18px; /* Kích thước của nút xóa */
  height: 18px;
  background-color: red;
  color: white; /* Màu của chữ 'x' hoặc icon */
  border: 1px solid darkred; /* Viền cho nút */
  border-radius: 50%; /* Làm cho nút tròn */
  font-size: 12px;    /* Kích thước chữ 'x' */
  font-weight: bold;
  /* line-height: 1px; */ /* Dùng flex để căn giữa sẽ tốt hơn */
  text-align: center;
  cursor: pointer;
  padding: 0; /* Bỏ padding mặc định của button */
  display: flex; /* Sử dụng flex để căn giữa nội dung (chữ 'x') của nút */
  align-items: center;
  justify-content: center;
  z-index: 10; /* Đảm bảo nút xóa nằm trên ảnh thumbnail */
  box-shadow: 0 1px 3px rgba(0,0,0,0.5); /* Tạo bóng đổ nhẹ */
  transition: background-color 0.2s ease, transform 0.2s ease; /* Hiệu ứng chuyển đổi mượt */
}

.entry-control-delete-img-btn:hover {
  background-color: darkred; /* Đổi màu nền khi hover */
  transform: scale(1.1); /* Phóng to nhẹ khi hover */
}
/* Viền Focus cho nút Add Image trong danh sách */
.entry-control-modify-img-btn:focus-visible {
    outline: 2px solid #007bff !important;
    outline-offset: 2px !important;
    border-radius: 4px; /* Bo góc nhẹ cho đẹp */
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* Hào quang xanh */
    cursor: pointer;
}
/* Nút để thêm hoặc thay đổi ảnh (sử dụng icon <img>) */
.entry-control-modify-img-btn {
  width: 22px;  /* (20px content + 1px padding trái + 1px padding phải) */
  height: 22px; /* (20px content + 1px padding trên + 1px padding dưới) */
  cursor: pointer;
  margin-left: 8px; /* Khoảng cách với container ảnh hoặc text (nếu không có ảnh) */
  vertical-align: middle; /* Căn giữa với các phần tử khác trên cùng dòng */
  border: 1px solid transparent; /* Border ẩn, hiện khi hover */
  border-radius: 3px;
  padding: 1px; /* Padding nhỏ bên trong border */
  box-sizing: content-box; /* Giữ nguyên hoặc đặt rõ ràng */
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
/* Thêm quy tắc này để đảm bảo hình ảnh lấp đầy 100% vùng content của nút */
.entry-control-modify-img-btn img {
    width: 100%; /* Hình ảnh sẽ co giãn để lấp đầy vùng content 20x20px */
    height: 100%;
    object-fit: contain; /* Đảm bảo giữ tỷ lệ khung hình */
    display: block; /* Loại bỏ khoảng trắng không mong muốn bên dưới hình ảnh */
}
.entry-control-modify-img-btn:hover {
  border-color: #f9f05d; /* Hiện border khi hover */
  background-color: #f0f0f0; /* Nền nhẹ khi hover */
    box-shadow: 0 0 12px rgba(38, 252, 68, 1) !important;
}

/* Dark mode adjustments (ví dụ, bạn có thể tùy chỉnh màu cho phù hợp) */
body.theme-dark #entry-controls .entry-control-item {
  border-bottom-color: #4a4a4a; /* Màu viền đậm hơn trong dark mode */
}
body.theme-dark .entry-control-thumbnail {
  border-color: #555555; /* Màu viền thumbnail trong dark mode */
}
/* Nút xóa trong dark mode vẫn giữ màu đỏ để dễ nhận diện, không cần thay đổi trừ khi bạn muốn */
/* body.theme-dark .entry-control-delete-img-btn { } */

body.theme-dark .entry-control-modify-img-btn:hover {
  border-color: #666666;
  background-color: #3a3a3a; /* Màu nền hover trong dark mode */
}

/* Điều chỉnh cho #entry-controls nếu nó chưa có các thuộc tính cần thiết */
#entry-controls {
  /* overflow-y: auto; */ /* Đã có trong file gốc của bạn */
  /* max-height: 300px; */ /* Đã có trong file gốc của bạn */
}

/* Visually hidden class for ARIA live regions */
.won-visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap; /* Thêm dòng này để đảm bảo không bị xuống dòng bất ngờ */
}

/* === FINAL FIX FOR MOBILE & DESKTOP LAYOUT SHIFT (Replaces all previous fixes) === */

/*
 * 1. Ổn định container chính của bánh xe để nó không bị ảnh hưởng bởi
 * các yếu tố bên ngoài như quảng cáo.
 */
#wheel-container {
    width: 100%;
    max-width: 800px; /* Có thể điều chỉnh kích thước tối đa này nếu muốn */
    margin-left: auto;
    margin-right: auto;
}

/*
 * 2. Biến div chứa các thành phần của bánh xe thành một hình vuông ổn định.
 * Div này có style inline là `position: relative`.
 */
#wheel-container > div[style="position: relative;"] {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 100%; /* Tạo tỷ lệ 1:1 (vuông) */
}

/*
 * 3. Đặt các lớp nền (canvas và lớp animation) lấp đầy container vuông.
 * QUAN TRỌNG: Chúng ta không còn tác động đến #spin-btn và #pointer ở đây nữa.
 */
#wheel-container > div[style="position: relative;"] > canvas,
#wheel-container > div[style="position: relative;"] > #animation-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ==========================================================================
   FINAL FIX: VIỀN XÁM ĐẬM - SIÊU MỎNG - ÔM SÁT ICON - CĂN PHẢI 8PX
   ========================================================================== */

/* 1. KHUNG CHỨA: Ép xuống dòng, căn phải tuyệt đối */
.won-share-actions {
    position: relative !important;
    width: 100% !important;
    display: flex !important;
    justify-content: flex-end !important; /* Đẩy sát lề phải */
    gap: 8px !important;            /* Khoảng cách 8px giữa 2 icon */
    margin-top: 10px !important;    /* Khoảng cách với tên người thắng */
    background: transparent !important;
    border: none !important;
    z-index: 9999;
    padding: 0 !important;
}

/* ==========================================================================
   CSS CHO ICON DOWNLOAD & SHARE (FULL CODE - FIX LỖI NỀN TRẮNG)
   ========================================================================== */

/* 1. CẤU HÌNH KHUNG NÚT BẤM (QUAN TRỌNG: LÀM TRONG SUỐT NỀN) */
.won-icon-btn {
    /* Xóa bỏ nền trắng và viền mặc định */
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer;
    
    /* Flexbox để căn giữa icon */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    /* Hiệu ứng phóng to khi di chuột */
    transition: transform 0.2s ease;
    
    /* Đảm bảo không có outline khi bấm */
    outline: none !important;
}

/* Hiệu ứng hover cho nút */
.won-icon-btn:hover {
    transform: scale(1.1);
}

/* 2. CẤU HÌNH ẢNH ICON (DOWNLOAD & SHARE) */
.won-icon-btn .won-custom-download-icon,
.won-icon-btn .won-custom-share-icon {
    /* Kích thước chuẩn */
    height: 25px !important;
    width: auto !important;
    
    object-fit: contain;
    display: block;
    
    /* HIỆU ỨNG BÓNG ĐỔ (MÀU XÁM #838383) */
    /* Sử dụng filter để bóng bám theo hình dáng icon, không tạo khung vuông */
    filter: drop-shadow(0px 2px 3px #838383) !important;
    
    transition: all 0.2s ease;
}

/* Hiệu ứng khi di chuột vào ảnh (Sáng lên và bóng đậm hơn) */
.won-icon-btn:hover .won-custom-download-icon,
.won-icon-btn:hover .won-custom-share-icon {
    filter: drop-shadow(0px 4px 6px #838383) brightness(1.2) !important;
}

/* ==========================================================================
   MOBILE RESPONSIVE
   ========================================================================== */
@media screen and (max-width: 767px) {
    /* Giảm khoảng cách nút */
    .won-share-actions {
        gap: 5px !important; 
        margin-top: 10px !important;
    }

    /* Giảm kích thước vùng bấm */
    .won-icon-btn {
        width: 25px !important; /* Đặt rộng hơn xíu để dễ bấm trên đt */
        height: 25px !important;
    }

    /* Giảm kích thước icon ảnh */
    .won-icon-btn .won-custom-download-icon,
    .won-icon-btn .won-custom-share-icon {
        height: 18px !important; 
        width: auto !important;
        
        /* Giảm bóng trên mobile */
        filter: drop-shadow(0px 1px 2px #838383) !important;
    }
}

#display-popup-message-text {
    flex-grow: 1;
    border: 1px solid #9c9c9c; /* Viền xám mặc định */
    border-radius: 4px;
    padding: 6px;
    transition: border-color 0.2s; /* Hiệu ứng mượt */
}

#display-popup-message-text:focus {
    border: 2px solid #7380b8; /* Viền xanh đậm hơn khi click vào */
    outline: none;
	/* Bóng sáng màu xanh dương (Glow) */
    box-shadow: 0 0 6px rgba(41, 182, 246, 1) !important;
}
#display-popup-message-text:hover {
    box-shadow: 0 0 6px rgba(41, 182, 246, 1) !important;
}
/* Trạng thái khi click vào (Focus) */
.spin-button-text-input:focus {
    border: 2px solid #7380b8 !important; /* Viền xanh đậm hơn khi click */
        /* Bóng sáng màu xanh dương (Glow) */
    box-shadow: 0 0 6px rgba(41, 182, 246, 1) !important;
}
.spin-button-text-input:hover {
    box-shadow: 0 0 6px rgba(41, 182, 246, 1) !important;
}
/* Trạng thái khi click vào (Focus) */
.spin-button-size-dropdown:focus {
    border: 2px solid #7380b8 !important; /* Viền xanh đậm hơn khi click */
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.1); /* Thêm một chút đổ bóng nhẹ (tùy chọn) */
}
.spin-button-size-dropdown:hover {
   box-shadow: 0 0 6px rgba(41, 182, 246, 1) !important;
}
#game-title {
    /* Trạng thái bình thường */
    border: 1px solid #9c9c9c;      /* Viền xám nhạt */
    border-radius: 4px;           /* Bo góc nhẹ */
    padding: 6px 12px;           /* Tạo khoảng trống cho chữ */
    outline: none;               /* Tắt viền xanh mặc định của trình duyệt */
    transition: border-color 0.2s ease-in-out; /* Hiệu ứng đổi màu mượt */
	
}
#game-title:hover {
    /* Trạng thái khi click vào */
    border: 2px solid #7380b8;          /* Viền xám đậm hơn */
}
#game-title:focus {
    /* Trạng thái khi click vào */
    border: 2px solid #7380b8;          /* Viền xám đậm hơn */
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.05); /* Đổ bóng cực nhẹ để nổi bật */
	    /* 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.04);
}
#game-description {
    /* Trạng thái bình thường */
    border: 2px solid #9c9c9c;      /* Viền xám nhạt */
    border-radius: 4px;           /* Bo góc nhẹ */
    padding: 6px 12px;           /* Tạo khoảng trống cho chữ */
    outline: none;               /* Tắt viền xanh mặc định của trình duyệt */
    transition: border-color 0.2s ease-in-out; /* Hiệu ứng đổi màu mượt */
}
#game-description:hover{
    /* Trạng thái khi click vào */
    border: 2px solid #7380b8;          /* Viền xám đậm hơn */
 box-shadow: 0 0 6px rgba(41, 182, 246, 1) !important;
}
#game-description:focus {
    /* Trạng thái khi click vào */
    border: 2px solid #7380b8;          /* Viền xám đậm hơn */
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.05); /* Đổ bóng cực nhẹ để nổi bật */
	    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.04);
}
/*
 * 4. Để các quy tắc CSS gốc của bạn tự định vị #spin-btn và #pointer.
 * Vì container của chúng (div ở bước 2) đã có kích thước ổn định,
 * các quy tắc gốc như `top: 50%`, `left: 50%`, `transform` sẽ hoạt động chính xác.
 */
 
 /* === HIỆU ỨNG MŨI TÊN (POINTER) PHÁT SÁNG === */
/* Class này sẽ được JS thêm vào khi vòng quay đứng yên */
#pointer.pointer-idle {
    /* Dùng rgba để chỉnh độ mờ. 0.5 là mờ 50% */
    /* Chỉ dùng 1 lớp bóng (drop-shadow) thay vì 2 lớp như trước để bớt đậm */
    filter: drop-shadow(0 0 18px rgba(0, 30, 255, 0.9)); 
    
    transition: filter 0.3s ease-in-out;
    animation: pointerPulse 1s infinite alternate;
}

@keyframes pointerPulse {
    /* Nhấp nháy nhẹ nhàng từ mờ 0.4 đến 0.7 */
    from { filter: drop-shadow(0 0 5px rgba(0, 30, 255, 0.7)); }
    to   { filter: drop-shadow(0 0 10px rgba(247, 116, 223, 1)); }
}

/* === HIỆU ỨNG KIM NẨY (ĐÃ ĐIỀU CHỈNH THEO CSS GỐC) === */

/* ==========================================
   HIỆU ỨNG KIM NẨY (AN TOÀN CHO MỌI THIẾT BỊ)
   ========================================== */
@keyframes pointerTickAnim {
    /* Luôn giữ translate(0%, -50%) để không bị lệch */
    0%   { transform: translate(0%, -50%) rotate(0deg); }
    40%  { transform: translate(0%, -50%) rotate(-10deg); } /* Góc nẩy */
    100% { transform: translate(0%, -50%) rotate(0deg); }
}

.pointer-tick {
    /* Chạy animation cực nhanh */
    animation: pointerTickAnim 0.1s ease-out forwards;
    
    /* Quan trọng: giữ tâm xoay ở đuôi mũi tên */
    transform-origin: 75% 50%;
    
    /* Tối ưu render cho mobile */
    will-change: transform;
}

/* =========================================================
   FIX LỖI GPU: ÉP TRÌNH DUYỆT CẬP NHẬT TỌA ĐỘ CHO JS
   ========================================================= */
#wheel {
    /* [QUAN TRỌNG] Thay đổi từ 'auto' sang 'transform' */
    /* Lệnh này bắt buộc trình duyệt phải tính toán lại vị trí mỗi khung hình */
    will-change: transform !important; 
    
    /* Đảm bảo render phẳng để JS đọc được ma trận 2D */
    -webkit-transform-style: flat !important;
    transform-style: flat !important;
    
    /* Mẹo kích hoạt phần cứng nhưng vẫn giữ kết nối với JS */
    transform: translateZ(0); 
}

/* ==========================================================================
   PHẦN 1: CSS CHO ICON PREFERENCES & CLOSE (SETTINGS & X)
   ========================================================================== */
.won-custom-settings-icon {
    width: 22px !important;
    height: 22px !important;
    object-fit: contain;
    vertical-align: middle;
    margin-right: 8px;
    display: inline-block;
}

.won-pref-title-wrapper {
    display: inline-flex;
    align-items: center;
    font-weight: 600;
}

.won-custom-close-icon {
    width: 16px !important;
    height: 16px !important;
    object-fit: contain;
    display: block;
}

#popup-preferences-close.popup-close-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 5px !important;
    background: transparent;
    border: none;
    cursor: pointer;
}

#popup-preferences-close:hover .won-custom-close-icon {
    transform: rotate(90deg);
    transition: transform 0.3s ease;
}
/* ==========================================================================
   HIỆU ỨNG XOAY NÚT ĐÓNG (POPUP NAME)
   ========================================================================== */

/* 1. Cấu hình mặc định cho cái ảnh bên trong nút */
#popup-name-close img {
    /* Tạo chuyển động mượt trong 0.3 giây */
    transition: transform 0.3s ease !important;
    
    /* Đảm bảo tâm xoay nằm chính giữa ảnh */
    transform-origin: center center !important;
    
    /* Đảm bảo ảnh là khối để xoay không bị lỗi */
    display: block !important; 
}

/* 2. Khi di chuột vào nút (Button) -> Thì xoay cái ảnh (Img) */
#popup-name-close:hover img {
    /* Xoay 90 độ (bạn có thể đổi thành 180deg hoặc 360deg nếu thích xoay nhiều hơn) */
    transform: rotate(90deg) !important;
}

/* ==========================================================================
   PHẦN 2: CSS CHO ICON GIAO DIỆN (LIGHT - SYSTEM - DARK)
   ========================================================================== */

/* 1. Cấu hình kích thước chung */
.won-custom-icon-theme {
    width: 22px !important;
    height: 22px !important;
    object-fit: contain;
    display: inline-block;
    vertical-align: middle;
    margin-right: 6px;
    transition: filter 0.2s ease; /* Hiệu ứng đổi màu mượt */
}

/* 2. QUY TẮC MÀU SẮC (Logic xếp chồng quan trọng) */

/* BƯỚC A: Trạng thái Mặc định & Trạng thái Active tĩnh (khi vừa load trang) */
/* YÊU CẦU: Nền trong suốt - Icon giữ màu GỐC (không lọc màu) */
.color-options .color-option,
.color-options .color-option.active,
.color-options .color-option:focus { /* Focus mà chưa hover thì vẫn giữ màu gốc */
    background-color: transparent !important;
    color: #333 !important; 
    border: 1px solid #ddd !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Ép icon giữ màu gốc ở trạng thái này */
.color-options .color-option .won-custom-icon-theme,
.color-options .color-option.active .won-custom-icon-theme,
.color-options .color-option:focus .won-custom-icon-theme {
    filter: none !important; 
}


/* BƯỚC B: Trạng thái Tương tác (Di chuột - Hover hoặc Đang nhấn - Active) */
/* YÊU CẦU: Nền Xanh - Icon chuyển TRẮNG */
.color-options .color-option:hover,
.color-options .color-option:active {
    background-color: #007bff !important; /* Nền xanh */
    border-color: #007bff !important;
    color: #ffffff !important;            /* Chữ trắng */
    cursor: pointer;
}

/* Chuyển icon sang TRẮNG (Áp dụng cho Light và System) */
.color-options .color-option:hover .won-custom-icon-theme,
.color-options .color-option:active .won-custom-icon-theme {
    filter: brightness(0) invert(1) !important; 
}


/* BƯỚC C: NGOẠI LỆ CHO ICON DARK (Quan trọng nhất với bạn) */
/* YÊU CẦU: Icon Dark KHÔNG BAO GIỜ được chuyển sang màu trắng */
/* Dù có hover hay active thì nó vẫn phải giữ filter: none */

.color-options .color-option:hover .won-icon-dark,
.color-options .color-option:active .won-icon-dark,
.color-options .color-option.active .won-icon-dark,
.color-options .color-option:focus .won-icon-dark {
    filter: none !important; /* Khóa cứng màu gốc cho icon Dark */
}
/* 1. Xử lý khi di chuột (HOVER) -> BẮT BUỘC chuyển icon thành TRẮNG TINH */
/* Áp dụng cho cả chế độ Sáng (đang nâu -> trắng) và Tối (đang trắng -> vẫn trắng) */
#import-google-sheet-btn-menu-item:hover .won-import-icon {
    /* brightness(0) -> Đen, invert(1) -> Đảo ngược thành Trắng */
    filter: brightness(0) invert(1) !important; 
    opacity: 1 !important;
}

/* 2. Giữ nguyên cài đặt Chế độ Tối cũ của bạn (Không sửa gì ở đây) */
body.theme-dark .won-import-icon {
    filter: brightness(0) invert(1) !important;
    opacity: 0.9;
}

/* Hiệu ứng nút xóa: Viền xám & Phát sáng */
.delete-result-btn {
    transition: all 0.2s ease-in-out !important;
    border: 1px solid transparent !important; /* Giữ viền ẩn để không bị giật khi hover */
    border-radius: 4px;
    padding: 3px;
    line-height: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.delete-result-btn:hover {
    /* 1. Viền xám */
    border: 1px solid #999 !important; 
    
    /* 2. Phát sáng ngoài viền (màu xám bạc) */
    box-shadow: 0 0 10px rgba(99, 243, 112, 0.6); 
    
    /* 3. Phóng to nhẹ một chút */
    transform: scale(1.1);
    
    /* 4. Thêm một chút nền mờ cho chuyên nghiệp */
    background-color: rgba(153, 153, 153, 0.1);
}

.delete-result-btn:active {
    transform: scale(0.95);
}

/* Trạng thái mặc định (Chưa kích hoạt) */
#input-text-btn, #results-btn {
    color: #0d1552;
    transition: all 0.3s ease;
    border-bottom: 2px solid transparent; /* Giữ chỗ cho viền để không bị nhảy */
}

/* Trạng thái ĐANG KÍCH HOẠT (Class .active) */
#input-text-btn:focus, 
#results-btn:focus {
    font-weight: bold !important;    /* In đậm lên cho rõ */
    border-bottom: 2px solid #003366; /* Gạch chân cùng màu cho xịn */
}

/* Nút Share: Màu Xanh da trời */
        button#wonBtnShare.won-popup-btn {
            background-color: #007bff !important;
            color: #ffffff !important;
            border: none !important;
            white-space: nowrap !important;
            /* Thêm tí bo góc và hiệu ứng cho mượt */
            border-radius: 5px !important;
            transition: 0.3s !important;
        }
        button#wonBtnShare.won-popup-btn:hover {
            background-color: #0018ff !important; /* Đậm hơn khi di chuột */
        }

        /* Nút Close: Màu Đỏ */
        button#wonBtnClose.won-popup-btn {
            background-color: #dc3545 !important;
            color: #ffffff !important;
            border: none !important;
            white-space: nowrap !important;
            border-radius: 5px !important;
            transition: 0.3s !important;
        }
        button#wonBtnClose.won-popup-btn:hover {
            background-color: #848484 !important; /* Đậm hơn khi di chuột */
        }
		/* ========================================================================= */
/* CUSTOM ARROW DROPDOWN - DARK MODE & HOVER EFFECTS */
/* ========================================================================= */
/* Tìm đoạn này (hoặc class .won-arrow-list-panel nếu ở file cũ) */
#won-arrow-list {
    display: none; 
    position: absolute; 
    /* ... các thuộc tính khác giữ nguyên ... */
    max-height: 250px; 
    overflow-y: auto; /* Cuộn dọc giữ nguyên */
    
    /* >>> THÊM DÒNG NÀY ĐỂ GIẾT THANH CUỘN NGANG <<< */
    overflow-x: hidden !important; 
}
/* 1. KHI BẬT DARK MODE: NỀN TỐI - VIỀN TRẮNG */
body.theme-dark #won-arrow-trigger,
body.theme-dark #won-arrow-list {
    background-color: #1a1a1a !important; /* Nền tối đen mờ */
    border: 1px solid #ffffff !important; /* Viền trắng muốt */
    color: #ffffff !important;
    transition: all 0.3s ease-in-out; /* Tạo độ mượt khi đổi màu */
}

body.theme-dark .dropdown-item-arrow {
    border-bottom: 1px solid #444 !important; /* Đường kẻ chia cách mờ mờ cho sang */
    transition: all 0.2s ease-in-out;
}

/* 2. HIỆU ỨNG PHÓNG TO & PHÁT SÁNG CHO CÁI NÚT BẤM (TRIGGER) */
body.theme-dark #won-arrow-trigger:hover {
    transform: scale(1.0); /* Phóng to 5% */
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.7) !important; /* Phát sáng aura trắng */
    border-color: #fff !important;
    z-index: 10;
}

/* 3. HIỆU ỨNG PHÓNG TO & PHÁT SÁNG CHO TỪNG Ô MŨI TÊN BÊN TRONG LIST */
body.theme-dark .dropdown-item-arrow:hover {
    background-color: #333 !important; /* Nền sáng lên 1 tí lúc chạm vào */
    transform: scale(1.0); /* Phóng to hẳn 10% cho máu */
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.8) !important; /* Phát sáng cục bộ */
    border-radius: 6px; /* Bo góc lúc phóng to nhìn cho đỡ thô */
    position: relative; /* Giữ cho cái bóng sáng không bị thằng bên dưới đè lên */
    z-index: 11;
}

/* 4. MÀU CỦA THẰNG ĐANG ĐƯỢC CHỌN (HIGHLIGHT) */
body.theme-dark .dropdown-item-arrow.arrow-selected {
    background-color: #2c3e50 !important; /* Màu xanh đen sang trọng */
    border: 1px solid #00a8ff !important; /* Viền xanh dạ quang nhẹ */
}
/* 3. HIỆU ỨNG CHO TỪNG Ô MŨI TÊN BÊN TRONG LIST */
body.theme-dark .dropdown-item-arrow:hover {
    background-color: #333 !important;
    transform: scale(1.1);
    border-radius: 6px;
    position: relative;
    z-index: 11;
}

/* ============================================================== */
/* TẠO VIỀN TRẮNG ÔM SÁT HÌNH DÁNG CỦA CÁI ẢNH MŨI TÊN (PNG) */
/* ============================================================== */
body.theme-dark .dropdown-item-arrow img {
    /* Tạo 1 cái viền trắng dày 1px ôm sát vào hình thù cái mũi tên */
    filter: drop-shadow(1px 0px 0px white) 
            drop-shadow(-1px 0px 0px white) 
            drop-shadow(0px 1px 0px white) 
            drop-shadow(0px -1px 0px white);
    transition: filter 0.2s;
}

/* Mũi tên được CHỌN hoặc HOVER thì viền trắng nó chói lòa lên (Glow) */
body.theme-dark .dropdown-item-arrow:hover img,
body.theme-dark .dropdown-item-arrow.arrow-selected img {
    filter: drop-shadow(1px 0px 0px white) 
            drop-shadow(-1px 0px 0px white) 
            drop-shadow(0px 1px 0px white) 
            drop-shadow(0px -1px 0px white)
            drop-shadow(0px 0px 5px rgba(255,255,255,0.8)); /* Glow thêm ở ngoài */
}

/* ========================================================================= */
/* CUSTOM ARROW DROPDOWN - LIGHT MODE (CHẾ ĐỘ SÁNG) - GLOW XANH NGỌC */
/* ========================================================================= */

/* 1. HIỆU ỨNG PHÁT SÁNG CHO CÁI NÚT BẤM NGOÀI CÙNG (TRIGGER) */
body:not(.theme-dark) #won-arrow-trigger:hover {
    transform: scale(1.0); /* Giữ nguyên size, đéo phóng to vì dễ vỡ layout ngoài */
    box-shadow: 0 0 15px rgba(0, 206, 209, 0.5); /* Phát sáng aura xanh ngọc */
    border-color: #00ced1;
    z-index: 10;
}

/* 2. HIỆU ỨNG PHÓNG TO & PHÁT SÁNG CHO TỪNG Ô MŨI TÊN BÊN TRONG LIST */
body:not(.theme-dark) .dropdown-item-arrow:hover {
    background-color: #f0fdfd; /* Đổi nền thành màu ngọc siêu nhạt */
    transform: scale(1.1); /* Phóng to 10% */
    box-shadow: 0 0 12px rgba(0, 206, 209, 0.6); /* Phát sáng cục bộ quanh ô */
    border-radius: 6px; 
    position: relative; 
    z-index: 11;
}

/* 3. MÀU CỦA THẰNG ĐANG ĐƯỢC CHỌN (HIGHLIGHT) */
body:not(.theme-dark) .dropdown-item-arrow.arrow-selected {
    background-color: #e0f7fa; /* Xanh ngọc nhạt */
    border: 1px solid #9bf9fa; /* Viền xanh ngọc */
}

/* 4. TẠO VIỀN & HÀO QUANG XANH NGỌC CHO CHÍNH CÁI ẢNH MŨI TÊN (PNG) */
body:not(.theme-dark) .dropdown-item-arrow img {
    transition: filter 0.2s;
}

/* Ở chế độ sáng, mũi tên lúc bình thường tao để nguyên gốc (không viền) cho tự nhiên.
   Chỉ khi nào DI CHUỘT VÀO (hover) hoặc ĐƯỢC CHỌN (selected) nó mới rực cháy lên! */
body:not(.theme-dark) .dropdown-item-arrow:hover img,
body:not(.theme-dark) .dropdown-item-arrow.arrow-selected img {
    /* 4 cái drop-shadow đầu tiên tạo viền xanh ngọc bọc sát mép ảnh */
    /* Cái drop-shadow cuối cùng tỏa hào quang mờ mờ ra xung quanh */
    filter: drop-shadow(1px 0px 0px #9bf9fa) 
            drop-shadow(-1px 0px 0px #9bf9fa) 
            drop-shadow(0px 1px 0px #9bf9fa) 
            drop-shadow(0px -1px 0px #9bf9fa)
            drop-shadow(0px 0px 1px rgba(140, 246, 244, 0.01)); 
}

/* ========================================================================= */
/* FIX THANH CUỘN NGANG KHI MŨI TÊN PHÓNG TO (ÁP DỤNG CẢ SÁNG LẪN TỐI) */
/* ========================================================================= */
#won-arrow-list {
    overflow-x: hidden !important; 
}

/* ==========================================
   >>> VIỀN FOCUS CHO 5 CÁI CHECKBOX VIP <<<
   ========================================== */
#launch-fireworks-checkbox:focus-visible,
#auto-remove-winner-checkbox:focus-visible,
#display-remove-button-checkbox:focus-visible,
#play-sound-on-remove-checkbox:focus-visible,
#show-wheel-lights-checkbox:focus-visible {
    outline: 2px solid #007bff !important;
    outline-offset: 2px !important;
    border-radius: 2px; /* Bo góc cực nhẹ vì checkbox hình vuông */
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* Hào quang xanh */
}

/* ==========================================
   >>> VIỀN FOCUS CHO CỤM NÚT CUSTOMIZE VIP <<<
   ========================================== */
#popup-customize-cancel:focus-visible,
#popup-customize-ok:focus-visible,
#customize-after-sound-button:focus-visible,
#animate-winning-entry-button:focus-visible,
#customize-sound-button:focus-visible,
#customize-sound-options:focus-visible,
#customize-spin-button:focus-visible{
    outline: 2px solid #007bff !important; /* Viền xanh chuẩn quốc tế */
    outline-offset: 2px !important;        /* Cách nút ra một tí cho thoáng */
    border-radius: 4px;                    /* Bo góc nhẹ cho mềm mại */
    box-shadow: 0 0 8px rgba(0, 123, 255, 0.4); /* Phát hào quang xanh */
    transition: all 0.2s ease-in-out;      /* Chớp viền mượt mà */
}

/* 💡 Ghi chú nhỏ: Nếu cái nút play/pause (.customize-play-pause) của sếp là hình tròn, 
   thì sếp tách riêng nó ra 1 block CSS mới và để border-radius: 50% cho nó ôm khít nhé! */
   /* ==========================================
   >>> 1. VIỀN FOCUS CHO 4 NÚT PLAY/PAUSE ÂM THANH <<<
   ========================================== */
#customize-preview-play:focus-visible,
#customize-preview-pause:focus-visible,
#customize-after-preview-play:focus-visible,
#customize-after-preview-pause:focus-visible {
    outline: 2px solid #007bff !important; /* Viền xanh chuẩn bài */
    outline-offset: 2px !important;        /* Cách xa cái nút ra tí */
    
    /* Mấy cái icon play/pause này bo tròn 50% là đẹp nhất. 
       Nếu nút của sếp hình vuông thì đổi thành 4px nhé */
    border-radius: 50%; 
    
    box-shadow: 0 0 8px rgba(0, 123, 255, 0.5); /* Tỏa sáng mạnh mẽ */
    transition: all 0.2s ease;
}

/* ==========================================
   >>> 2. VIỀN FOCUS CHO 3 CÁI TAB (DURING, AFTER, APPEARANCE) <<<
   ========================================== */
#tab-during:focus-visible,
#tab-after:focus-visible,
#tab-appearance:focus-visible {
    /* Tab thì viền nên thụt vào trong một tí (outline-offset âm) 
       để nó đéo bị lem ra ngoài phá vỡ layout cái thanh menu của sếp */
    outline: 2px solid #ffe400 !important;
    outline-offset: -2px !important; 
    border-radius: 4px; /* Bo góc trên cho mềm mại */
    background-color: rgba(77, 137, 242); /* Đổ tí màu nền mờ mờ cho nó xịn */
    transition: all 0.2s ease;
}

/* ==========================================
   >>> 1. VIỀN FOCUS CHO NÚT MỞ MENU CHỌN ÂM THANH <<<
   ========================================== */
#customize-sound-options: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);
    transition: all 0.2s ease;
	color: #000;
}

/* ==========================================
   >>> 2. VIỀN FOCUS CHO CÁI KHUNG MENU (DROPDOWN CONTENT) <<<
   ========================================== */
/* Tab thụt viền vào trong (-2px) để không phá vỡ layout của cái box */
.customize-dropdown-content:focus-visible {
    outline: 2px solid #007bff !important;
    outline-offset: -2px !important; 
    border-radius: 8px; /* Khung to thì bo góc to tí cho nó Tây */
    box-shadow: 0 8px 16px rgba(0,0,0,0.1), 0 0 8px rgba(0, 123, 255, 0.5);
	color: #000;
}

/* ==========================================
   >>> 3. VIỀN FOCUS CHO TỪNG NÚT NHÓM ÂM THANH BÊN TRONG <<<
   ========================================== */
.sound-group-btn:focus-visible {
    outline: 2px solid #007bff !important;
    outline-offset: -2px !important; /* Thụt vào trong để gọn gàng */
    border-radius: 4px;
    background-color: #f0f8ff; /* Đổi nhẹ màu nền thành xanh nhạt khi Tab tới cho nổi bật */
    transition: all 0.15s ease;
	color: #000;
}

/* ==========================================================================
   CỐ ĐỊNH MÀU HEADER - KHÔNG BỊ ẢNH HƯỞNG BỞI TRÌNH ĐỔI MÀU NỀN TRANG
   ========================================================================== */

#ast-desktop-header, #ast-mobile-header,
#ast-desktop-header .main-header-bar, #ast-mobile-header .main-header-bar,
.ast-builder-menu-mobile {
    background-color: #f8fafc !important;
    --ast-header-background: #f8fafc !important;
    
    /* Đường viền dưới chân nhẹ nhàng */
    border-bottom: 1px solid #e2e8f0 !important; 
    
    /* Đổ bóng nhẹ tinh tế */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03) !important;
    
    transition: all 0.3s ease;
}
/* ==========================================================================
   HIỆU ỨNG BÓNG ĐÈN MỜ PHÁT SÁNG TRẮNG (WHITE GLOW) KHI BẬT DARK MODE
   ========================================================================== */
body.theme-dark #ast-desktop-header, 
body.theme-dark #ast-mobile-header,
body.theme-dark #ast-desktop-header .main-header-bar, 
body.theme-dark #ast-mobile-header .main-header-bar,
body.theme-dark .ast-builder-menu-mobile {
     
    /* 2. Hiệu ứng tỏa sáng trắng dạng bóng đèn mờ (Dùng mã màu RGB trắng 255, 255, 255) */
    box-shadow: 0 3px 3px rgba(255, 255, 255, 0.25), 0 2px 5px rgba(255, 255, 255, 0.2) !important;
    
    /* Xóa bỏ border cũ nếu không thích cảm giác bị đóng khung viền */
    border-bottom: none !important; 
}
/* ==========================================================================
   2. DIỆT TẬN GỐC NỀN ĐEN MOBILE MENU (Ép toàn bộ ruột bên trong về màu Slate 50)
   ========================================================================== */
.ast-builder-menu-mobile .ast-main-header-bar-alignment,
.ast-builder-menu-mobile .main-header-bar-navigation,
.ast-builder-menu-mobile .main-navigation,
#ast-mobile-site-navigation,
ul#ast-hf-mobile-menu,
ul#ast-hf-mobile-menu .menu-item,
ul#ast-hf-mobile-menu .menu-item .menu-link {
    background-color: #f8fafc !important;
    background: #f8fafc !important;
    border-color: #e2e8f0 !important; /* Đổi luôn màu viền phân cách giữa các item cho đồng bộ */
}

/* ==========================================================================
   3. ĐỒNG BỘ MÀU CHỮ MENU (Desktop & Mobile)
   ========================================================================== */
#ast-desktop-header .main-header-menu a, 
#ast-mobile-header .main-header-menu a,
.ast-builder-menu-mobile .main-header-menu a,
.ast-builder-menu-mobile a {
    color: #475569 !important; 
    font-weight: 400 !important; 
    font-size: 14px !important;
    text-decoration: none !important;
}

/* Hover chữ menu */
#ast-desktop-header .main-header-menu a:hover, 
#ast-mobile-header .main-header-menu a:hover,
.ast-builder-menu-mobile .main-header-menu a:hover,
.ast-builder-menu-mobile a:hover {
    color: #3b82f6 !important; 
}

/* ==========================================================================
   4. TÁCH RIÊNG SITE TITLE (Chỉ đồng bộ màu chữ, không động vào nền/khung)
   ========================================================================== */
/* ==========================================================================
   KHÓA CỨNG SITE TITLE - MIỄN NHIỄM VỚI DARK MODE & TRÌNH ĐỔI MÀU CHỮ
   ========================================================================== */
.ast-site-title-wrap,
.ast-site-title-wrap a,
#ast-desktop-header .ast-site-title-wrap a,
#ast-mobile-header .ast-site-title-wrap a {
    /* Khóa chết màu xám thạch anh ban đầu, không ăn theo inline style của #pageTextColorTriggerIcon */
    color: #475569 !important;
    
    /* Chặn Dark Mode tự động đảo màu nền hoặc màu chữ */
    background: transparent !important;
    text-decoration: none !important;
}

/* Chỉ đổi màu duy nhất khi chủ động di chuột (Hover) vào */
.ast-site-title-wrap a:hover,
#ast-desktop-header .ast-site-title-wrap a:hover,
#ast-mobile-header .ast-site-title-wrap a:hover {
    color: #3b82f6 !important; 
}

/* 🔥 VÁ LỖI LỘN XỘN: ÉP CHÂN ICON CHẠM ĐÚNG CHÂN CHỮ */
/*#ast-hf-menu-1 .menu-link {
    /*display: inline-flex !important;
    /*align-items: baseline !important; /* Tuyệt chiêu: Ép đường chân chữ và chân icon hút chặt vào nhau */
    /*gap: 6px !important;             /* Khoảng cách vừa vặn giữa icon và chữ */
/*}

/* Triệt tiêu hoàn toàn khoảng trống thừa do line-height của Astra gây ra trên thẻ span */
/*#ast-hf-menu-1 .menu-link span {
    /*display: inline-flex !important;
    /*align-items: flex-end !important;
    /*line-height: 1 !important;       /* Khóa chiều cao dòng bằng đúng kích thước icon */
    /*height: 1em !important;          /* Ép chiều cao span bằng đúng cỡ chữ */
/*}

/* Định hình lại con emoji SVG của WordPress cho khít sàn */
/*#ast-hf-menu-1 .menu-link .emoji {
    /*width: 16px !important;          /* Ép kích thước icon vừa vặn, không bị quá to */
    /*height: 16px !important;
    /*margin: 0 !important;            /* Xóa sạch margin vô duyên của WordPress */
    /*vertical-align: bottom !important; 
    /*position: relative !important;
    /*top: 2px !important;             /* Nhích nhẹ 2px xuống dưới để chạm đúng đường sàn của chữ */
/*}