/* ============================= */
/* CSS mở rộng cho Menu, Popup & Theme */
/* ============================= */

/* Dropdown cho Menu Icon */
#menu-icon-btn {
  position: relative;
}
.menu-extra-dropdown {
  position: absolute;
  top: 100%; /* ngay dưới nút */
  left: 0; /* Sẽ được JS điều chỉnh nếu cần căn phải */
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  min-width: 150px; /* Hoặc 200px tùy theo nội dung dài nhất */
  display: none;
  z-index: 1000 !important; /* Đảm bảo nằm trên các dropdown khác như Add Images */
  box-shadow: 0 2px 5px rgba(0,0,0,0.15);
  text-align: left !important; /* Bắt buộc nội dung căn trái */
  margin: 0;
  padding: 5px 0;
}
#menu-dropdown.menu-extra-dropdown a { /* CSS đã có, giữ lại */
  display: block;
  text-align: left !important;
  padding: 8px 15px;
  margin: 0;
  text-decoration: none;
  color: black;
}
#menu-dropdown.menu-extra-dropdown a:hover {
  background-color: #f1f1f1;
}

/* --- Popup Modal Chung --- */
.popup-modal {
  display: none;
  position: fixed;
  z-index: 100; /* z-index này có thể cần điều chỉnh tùy theo các element khác */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.4); /* Lớp phủ mờ */
  overflow-y: auto; /* Cho phép cuộn toàn bộ modal nếu nội dung quá cao */
}

.popup-content {
  background: #fff;
  margin: 10vh auto; /* Căn giữa theo chiều dọc tốt hơn với vh */
  padding: 20px;
  width: 550px;;
  max-width: 550px; /* Điều chỉnh nếu cần */
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  position: relative; /* QUAN TRỌNG: Context cho nút đóng tuyệt đối */
  box-sizing: border-box;
  border: 3px solid #ffea03;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
  margin-bottom: 15px;
  border-bottom: 1px solid #e0e0e0;
  /* position: relative; không cần thiết nếu nút đóng được định vị so với .popup-content */
}

.popup-header h3 {
  margin: 0;
  font-size: 1.2em; /* Kích thước tiêu đề popup */
  color: #333;
  display: flex; /* Cho phép icon và text căn thẳng hàng */
  align-items: center;
  flex-grow: 1; /* Cho tiêu đề chiếm không gian */
}
.popup-header h3 .dashicons { /* Nếu bạn có icon trong tiêu đề */
  margin-right: 8px;
}

/* Nút đóng chung cho các popup */
.popup-close-btn {
  position: absolute;
  top: 10px;            /* Khoảng cách từ đỉnh của .popup-content */
  right: 10px;           /* Khoảng cách từ phải của .popup-content */
  background: transparent;
  border: none;
  padding: 5px;
  cursor: pointer;
  line-height: 1;
  z-index: 10;
  display: inline-flex; /* Giúp căn icon bên trong */
  align-items: center;
  justify-content: center;
}

.popup-close-btn img,
.popup-close-btn .dashicons {
  display: block;
  width: 20px;
  height: 20px;
  transition: opacity 0.2s ease, color 0.2s ease; /* Thêm transition */
 background-color: #fff;
 
}
.popup-close-btn:hover img,
.popup-close-btn:focus img {

 background-color: #fff;
}
/* Nếu muốn tất cả nút X (dùng dashicon) có màu mặc định khác */
/*
.popup-close-btn .dashicons {
  color: #777;
}
.popup-close-btn:hover .dashicons,
.popup-close-btn:focus .dashicons {
  color: #333;
}
*/

.popup-body label {
  display: block;
  margin-top: 12px; /* Đồng nhất margin */
  margin-bottom: 4px;
  color: #333;
  font-weight: normal; /* Giữ font-weight normal cho label */
}
.popup-body input[type="text"],
.popup-body input[type="url"], /* Thêm cho modal Google Sheet */
.popup-body textarea {
  width: 100%;
  padding: 8px 10px; /* Đồng nhất padding */
  margin-top: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  color: #333;
  background-color: #fff;
}
.popup-body textarea {
  resize: vertical;
  min-height: 60px; /* Chiều cao tối thiểu cho textarea */
}

.popup-footer {
  text-align: right;
  margin-top: 20px; /* Tăng khoảng cách */
  padding-top: 15px; /* Thêm padding trên */
  border-top: 1px solid #e0e0e0; /* Viền trên rõ hơn */
  display: flex !important;           /* Kích hoạt chế độ dàn ngang */
    gap: 10px !important;               /* Khoảng cách giữa 2 nút (thay cho margin-right) */
    width: 100% !important;             /* Đảm bảo khung rộng hết cỡ */
    box-sizing: border-box !important;  /* Tính toán kích thước chuẩn */
    padding-top: 15px;                  /* Cách xa nội dung bên trên một chút cho đẹp */
	justify-content: flex-end !important;
}
 /* 2. Ép kích thước cố định cho cả 2 nút */
.popup-footer button {
    /* --- KÍCH THƯỚC CỨNG 40x25 --- */
    width: 70px !important;
    min-width: 70px !important; /* Không cho bé hơn */
    max-width: 70px !important; /* QUAN TRỌNG: Không cho to hơn dù chữ dài */
    height: 35px !important;
    
    /* --- RESET FLEX --- */
    flex: 0 0 70px !important; /* Không co, không giãn, chốt cứng 40px */
    
    /* --- XỬ LÝ NỘI DUNG --- */
    padding: 0 !important;      /* Bỏ đệm để tiết kiệm chỗ */
    margin: 0 !important;
    font-size: 16px !important; /* Chữ phải RẤT BÉ mới nhét vừa 40px */
    white-space: nowrap !important; /* Không cho xuống dòng */
    overflow: hidden !important;    /* Dài quá thì cắt bớt */
    
    /* --- CĂN GIỮA --- */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    border-radius: 3px !important;
}
.popup-btn {
  padding: 8px 15px; /* Tăng padding cho dễ click */
  margin-left: 10px;
  border: 1px solid #00ff48; /* Thêm border để hover effect đẹp hơn */
  background-color: #007bff;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px; /* Kích thước chữ cho nút */
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.popup-btn:hover {
  background-color: #207805;
  border-color: #ffea03;
      /* 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);
}
/* Nút Cancel/Close có thể có style khác */
.popup-btn.popup-btn-secondary { /* Tạo class mới cho nút phụ */
  background-color: #6c757d;
  border-color: #6c757d;
}
.popup-btn.popup-btn-secondary:hover {
  background-color: #5a6268;
  border-color: #545b62;
}


/* --- Container Game Info --- */
#game-info-container {
  display: none;
  position: fixed;
  top: 20px; /* Điều chỉnh lại vị trí */
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  background: #f9f9f9; /* Màu nền sáng hơn chút */
  border: 2px solid #c6c6c2;
  padding: 15px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  max-width: 350px; /* Giới hạn chiều rộng */
  box-sizing: border-box;
}
#game-info-container .game-info {
  position: relative;
}
#game-info-container .game-info h3 {
  margin: 0 0 8px 0; /* Thêm margin dưới */
  font-size: 18px;
  color: #333;
}
#game-info-container .game-info p {
  margin: 0 0 10px 0;
  font-size: 14px;
  color: #555;
  line-height: 1.5;
}
/* Nút đóng cho Game Info */
#game-info-container .game-info-close {
  position: absolute;
  top: -28px;            /* Đẩy nút lên trên một chút so với vùng nội dung .game-info */
  right: -28px;           /* Đẩy nút sang phải một chút so với vùng nội dung .game-info */
  background: transparent;
  border: none;
  padding: 5px;
  cursor: pointer;
  z-index: 10;          /* Đảm bảo nút nằm trên */
  display: inline-flex; /* Căn chỉnh icon tốt hơn */
  align-items: center;
  justify-content: center;
}
#game-info-container .game-info-close .dashicons {
  font-size: 18px;
  color: red !important; /* Giữ màu đỏ từ CSS cũ của bạn */
  transition: color 0.2s ease;
}
#game-info-container .game-info-close:hover .dashicons {
  color: darkred !important;
}


/* --- Dark Mode Overrides --- */
body.theme-dark:not(.custom-page-bg-active) {
  background-color: #121212 !important; /* Nền tối hơn một chút thay vì #000 */
}
body.theme-dark {
  color: #e0e0e0 !important; /* Chữ sáng hơn chút */
  transition: background-color 0.3s, color 0.3s;
}

body.theme-dark .popup-content { /* Áp dụng cho tất cả các popup-content */
  background-color: #2d2d2d !important;
  border: 3px solid #ffea03 !important;
  color: #e0e0e0 !important;
}
body.theme-dark .popup-header {
  border-bottom-color: #444;
}
body.theme-dark .popup-header h3 {
  color: #e0e0e0 !important;
}
/* Chung cho nút đóng X trong dark mode (nếu dùng dashicon) */
body.theme-dark .popup-close-btn .dashicons {
  color: #ccc; /* Màu xám nhạt */
}
body.theme-dark .popup-close-btn:hover .dashicons {
  color: #fff;
}

body.theme-dark .popup-body label {
  color: #e0e0e0 !important;
}
body.theme-dark .popup-body input[type="text"],
body.theme-dark .popup-body input[type="url"],
body.theme-dark .popup-body textarea {
  background-color: #3a3a3a !important;
  border-color: #fff !important;
  color: #e0e0e0 !important;
}
body.theme-dark .popup-body input[type="text"]::placeholder,
body.theme-dark .popup-body input[type="url"]::placeholder,
body.theme-dark .popup-body textarea::placeholder {
    color: #888;
}

body.theme-dark .popup-footer {
  border-top-color: #444;
}
body.theme-dark .popup-btn {
  background-color: #007bff; /* Giữ màu xanh cho nút chính */
  border-color: #fff;
  color: #fff;
}
body.theme-dark .popup-btn:hover {
  background-color: #207805;
  border-color: #ffea03;
      /* Bóng sáng màu xanh dương (Glow) */
    box-shadow: 0 0 6px rgba(255, 255, 255, 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-btn.popup-btn-secondary { /* Nút phụ trong dark mode */
  background-color: #5a6268;
  border-color: #5a6268;
}
body.theme-dark .popup-btn.popup-btn-secondary:hover {
  background-color: #495057;
  border-color: #495057;
}

/* Dropdown menu trong dark mode */
body.theme-dark .menu-extra-dropdown,
body.theme-dark .dropdown-menu { /* .dropdown-menu là class chung bạn có thể dùng */
  background-color: #2d2d2d !important;
  border-color: #fff !important;
}
body.theme-dark .dropdown-menu:hover { /* .dropdown-menu là class chung bạn có thể dùng */
  background-color: #2d2d2d !important;
  border-color: #4169e1 !important;
}
body.theme-dark .menu-extra-dropdown a,
body.theme-dark .dropdown-menu a {
  color: #fff !important;
}
body.theme-dark .menu-extra-dropdown a:hover,
body.theme-dark .dropdown-menu a:hover {
  background-color: #4169e1 !important;
  box-shadow: 0 0 6px rgba(87, 247, 245, 1) !important;
}

/* Game Info Container trong Dark Mode */
body.theme-dark #game-info-container {
  background-color: #2d2d2d !important;
  border-color: #fff !important;
  color: #e0e0e0 !important;
}
body.theme-dark #game-info-container .game-info h3,
body.theme-dark #game-info-container .game-info p {
  color: #e0e0e0 !important;
}
body.theme-dark #game-info-container .game-info-close .dashicons {
  color: #ff5252 !important; /* Giữ màu đỏ cho nút đóng game info */
}
body.theme-dark #game-info-container .game-info-close:hover .dashicons {
  color: #ff7b7b !important;
}


/* --- Cụ thể cho #popup-name-game (Nút X màu đỏ) --- */
#popup-name-game .popup-close-btn .dashicons, /* Nếu bạn đổi nút X của Name Of The Game thành Dashicon */
#popup-name-game .popup-close-btn img {      /* Nếu vẫn dùng thẻ img */
  color: red !important; /* Sẽ chỉ áp dụng cho Dashicon */
  /* Nếu là img, bạn cần thay src hoặc dùng filter để đổi màu (phức tạp hơn) */
  /* Để đơn giản, nếu bạn dùng ảnh, màu đỏ sẽ không áp dụng trực tiếp bằng 'color' */
}
#popup-name-game .popup-close-btn:hover .dashicons,
#popup-name-game .popup-close-btn:hover img {
  color: darkred !important;
  /* opacity: 0.7; */ /* Dùng cho img nếu muốn hiệu ứng mờ */
}
/* ==========================================
   >>> VIỀN FOCUS CHO NÚT CANCEL & ok <<<
   ========================================== */
#popup-name-cancel:focus-visible,
#popup-name-ok:focus-visible {
    outline: 2px solid #007bff !important;
    outline-offset: 2px !important;
    border-radius: 4px; /* Bo góc nhẹ cho cái nút */
    box-shadow: 0 0 8px rgba(0, 123, 255, 0.4); /* Phát hào quang nhẹ */
}
/* >>> THÊM MỚI: Style cho nút Cancel trong popup Name Of The Game <<< */
#popup-name-game .popup-footer .popup-btn#popup-name-cancel {
  background-color: #4A4A4A; /* Màu xám đen bạn muốn (ví dụ: #4A4A4A) */
  color: #ffffff;           /* Màu chữ trắng để tương phản */
  border: 1px solid #791d1d;   /* Màu viền tối hơn một chút (tùy chọn) */
}

#popup-name-game .popup-footer .popup-btn#popup-name-cancel:hover {
  background-color: #8e0d0d; /* Màu xám đen sẫm hơn khi hover */
   border: 1px solid #7384f0;
       /* 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 cụ thể cho nút X của #popup-name-game */
body.theme-dark #popup-name-game .popup-close-btn .dashicons,
body.theme-dark #popup-name-game .popup-close-btn img {
  color: #ff5252 !important;
}
body.theme-dark #popup-name-game .popup-close-btn:hover .dashicons,
body.theme-dark #popup-name-game .popup-close-btn:hover img {
  color: #ff7b7b !important;
}

/* >>> THÊM MỚI: Style cho nút Cancel trong Dark Mode cho popup Name Of The Game <<< */
body.theme-dark #popup-name-game .popup-footer .popup-btn#popup-name-cancel {
  background-color: #555555; /* Màu xám tối hơn một chút cho dark mode */
  color: #fff;           /* Màu chữ sáng hơn */
  border-color: #fff !important;
}

body.theme-dark #popup-name-game .popup-footer .popup-btn#popup-name-cancel:hover {
  background-color: #8e0d0d;
  border-color: #f9f5c4;
      /* Bóng sáng màu xanh dương (Glow) */
    box-shadow: 0 0 6px rgba(255, 255, 255, 1) !important;
    
    /* Phóng to nhẹ một chút cho sinh động (Tùy chọn) */
    transform: scale(1.1);
}

/* --- Popup Preferences --- */
body.theme-dark #popup-preferences .popup-header h3,
body.theme-dark #popup-preferences .popup-body,
body.theme-dark #popup-preferences .popup-body label {
  color: #e0e0e0 !important; /* Đảm bảo các text này cũng là màu sáng */
}
body.theme-dark #popup-preferences .popup-body input,
body.theme-dark #popup-preferences .popup-body textarea {
  background-color: #3a3a3a !important; /* Giống các input khác */
  border-color: #555 !important;
  color: #e0e0e0 !important;
}
#popup-preferences .color-options { /* CSS đã có, giữ lại */
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* --- Popup Preferences --- */

/* 1. CẤU HÌNH GỐC (ÁP DỤNG CHO CẢ SÁNG & TỐI) */
#popup-preferences .color-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#popup-preferences .color-options .color-option {
  width: 100%;
  text-align: left;
  padding: 10px;
  /* QUAN TRỌNG: Đặt viền 2px ngay từ đầu để không bị nhảy khung hình khi hover */
  border: 2px solid #ccc; 
  background-color: #f7f7f7;
  border-radius: 4px;
  cursor: pointer;
  /* Transition cả border để đổi màu mượt mà */
  transition: all 0.2s ease; 
  box-sizing: border-box; /* Đảm bảo padding không làm vỡ khung */
  color: #333; /* Màu chữ mặc định */
  border-color: #a4a4a6 !important;  
}

/* 2. HIỆU ỨNG HOVER / ACTIVE Ở CHẾ ĐỘ SÁNG (LIGHT MODE) */
#popup-preferences .color-options .color-option:hover {
  background-color: #5873f8 !important; /* Nền xanh dương */
  color: #fff !important;
  
  /* --- KỸ THUẬT VIỀN TRONG (INSET) --- */
  /* Cú pháp: inset X Y Blur Spread Color */
  /* Dòng 1: inset 0 0 0 3px #3bed43 -> Tạo viền dày 3px nằm lọt VÀO TRONG màu xanh lá */
  /* Dòng 2: 0 0 10px ... -> Giữ lại chút bóng tỏa sáng bên ngoài cho đẹp */
  box-shadow: inset 0 0 0 2px #12ff00, 
              0 0 6px rgba(59, 237, 67, 0.7) !important;
              
  /* Đổi màu viền cứng (thực tế) trùng màu nền hoặc trong suốt để ẩn nó đi */
  border-color: #fff !important; 
  
  transform: scale(1.01); /* Phóng to nhẹ */
}

/* 3. CẤU HÌNH CHO CHẾ ĐỘ TỐI (DARK MODE) */
body.theme-dark #popup-preferences .color-options .color-option {
  background-color: #2d2d2d !important; /* Nền tối */
  border-color: #e5e5e7 !important;        /* Viền tối màu xám */
  color: #e0e0e0 !important;            /* Chữ sáng */
}

/* Đảm bảo icon và text bên trong cũng sáng */
body.theme-dark #popup-preferences .color-options .color-option span,
body.theme-dark #popup-preferences .color-options .color-option .dashicons {
  color: #e0e0e0 !important;
}

/* 4. HIỆU ỨNG HOVER / ACTIVE ĐẶC BIỆT Ở CHẾ ĐỘ TỐI (DARK MODE) */
/* Đây là phần làm "viền sáng bắt buộc" như bạn yêu cầu */
body.theme-dark #popup-preferences .color-options .color-option:hover{
  background-color: #5873f8 !important; /* Nền sáng hơn nền tối một chút */
  
  /* MẤU CHỐT: VIỀN TRẮNG SÁNG */
  border-color: #ffffff !important; 
  
  /* Chữ trắng tuyệt đối */
  color: #ffffff !important; 
  
  /* Hiệu ứng phát sáng trắng */
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.4) !important;
  transform: scale(1.01);
}

/* Đảm bảo icon bên trong cũng trắng khi hover */
body.theme-dark #popup-preferences .color-options .color-option:hover span,
body.theme-dark #popup-preferences .color-options .color-option:hover .dashicons {
  color: #ffffff !important;
}


/* --- List Update Table Dark Mode --- */
body.theme-dark #list-update-table {
  background-color: #222 !important; /* Nền tối hơn chút */
  color: #e0e0e0 !important;
  border-color: #444 !important;
}
body.theme-dark #list-update-table .table-header {
  color: #e0e0e0 !important;
  border-bottom-color: #444; /* Viền dưới cho header table */
}

/* --- Các phần tử còn lại từ file gốc của bạn --- */
/* Bắt buộc tất cả chữ trong popup Results luôn hiển thị màu #334155 */
#results-modal .modal-content,
#results-modal .modal-content * {
  color: #334155 !important;
}

/* Light Mode (nếu bạn quyết định dùng class .theme-light) */
body.theme-light {
  background-color: #ffffff !important;
  color: #000000 !important;
  transition: background-color 0.3s, color 0.3s;
}

/* Các thẻ h2, h3 và link trong nội dung web khi chế độ dark */
body.theme-dark h2,
body.theme-dark h3,
body.theme-dark .content a { /* Giả sử nội dung chính của bạn có class .content */
  color: #ffffff !important;
}
body.theme-dark a { /* Link chung trong dark mode (cẩn thận, có thể ghi đè link trong UI plugin) */
    /* color: #6cb2ff !important;  Màu xanh sáng cho link chung */
    /* Tốt hơn là nên cụ thể hơn cho link nội dung website, ví dụ: */
    /* body.theme-dark .your-website-content-area a { color: #6cb2ff !important; } */
}
body.theme-dark a[rel="home"][itemprop="url"] { /* Chữ "wheelofnames.name" */
  color: #ffffff !important;
}
body.theme-dark li.menu-item a.menu-link { /* Menu của theme WordPress */
  color: initial !important;
}


/* Z-index cho các lớp phủ */
#winner-overlay {
  z-index: 9999 !important;
}
#fireworks {
  z-index: 10000 !important;
}
#wheel-container { /* Đã có trong won-styles.css, không cần lặp lại nếu giống hệt */
  position: relative;
}
/* Căn giữa pháo hoa */
/* #fireworks { // Đã có trong won-styles.css
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
} */

/* Dropdown âm thanh trong Customize cuộn được */
#customize-sound-options,
#customize-after-sound-options {
  max-height: 300px; /* Giảm chiều cao một chút */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}


/* ========================================================================== */
/* == CSS CHO CHỮ TRẮNG TRÊN NỀN TỐI TÙY CHỈNH (TỪ APPEARANCE) == */
/* (Giữ nguyên phần này từ file gốc của bạn nếu bạn vẫn cần) */
/* ========================================================================== */
body.text-white-on-dark-bg {
    /* ... */
}
body.text-white-on-dark-bg .your-website-main-content p,
body.text-white-on-dark-bg .your-website-main-content li,
/* ... (các quy tắc còn lại cho text-white-on-dark-bg) ... */
body.text-white-on-dark-bg #name-input,
body.text-white-on-dark-bg .popup-body input,
body.text-white-on-dark-bg .popup-body textarea {
    /* color: initial !important; */ /* Đã có trong file gốc */
}
/* ======================================================================== */

/* Responsive adjustments for Popups */
@media (max-width: 600px) { /* Hoặc một breakpoint khác phù hợp với bạn */
  .popup-modal .popup-content {
    width: 95%; /* Cho phép rộng hơn một chút trên màn hình nhỏ */
    padding: 15px; /* Giảm padding một chút */
    margin-top: 5vh; /* Giảm margin top */
    margin-bottom: 5vh;
  }

  #popup-name-game .popup-body input[type="text"],
  #popup-name-game .popup-body textarea {
    font-size: 16px; /* Điều chỉnh font size nếu cần */
  }

  #popup-preferences .color-options .color-option {
    padding: 8px;
    font-size: 16px;
  }

  .popup-footer .popup-btn {
    padding: 7px 12px; /* Giảm padding nút */
    font-size: 16px;
  }
}

/* ==========================================================
   🔥 VẮC-XIN TỔNG: CHỐNG ZOOM CHO MỌI Ô NHẬP LIỆU TRÊN IOS
   (Áp dụng cho TOÀN BỘ trang web, mọi loại Popup)
   ========================================================== */
@media (max-width: 768px) {
  input[type="text"],
  input[type="number"],
  input[type="url"],
  input[type="email"],
  input[type="password"],
  input[type="color"],
  textarea,
  select {
    font-size: 16px !important;
  }
}
/* ==========================================================
   TEST ÉP CÂN NÚT ĐÓNG PREFERENCES TRÊN MOBILE
   ========================================================== */
@media (max-width: 768px) {
  #preferences-close-btn {
    font-size: 16px !important; /* Ép chữ trên nút to ra 16px */
    padding: 10px 15px !important; /* Bơm thêm tý đệm cho cái nút nó mập mạp dễ bấm */
  }
}
/* Định màu đỏ cho mục "Restart All" trong menu dropdown */
#menu-dropdown.menu-extra-dropdown a#restart-all-btn {
    color: #D32F2F; /* Một màu đỏ đậm hơn, dễ nhìn hơn 'red' thuần */
}

/* Trạng thái bình thường trong chế độ tối */
body.theme-dark #restart-imported-image {
    color: #fe6788 !important; /* Màu đỏ tươi để nổi bật trên nền tối */
    text-decoration: none;      /* Bỏ gạch chân nếu cần */
    transition: all 0.2s ease;
}
body.theme-dark #restart-imported-image:hover {
    color: #ff0000 !important; /* Màu đỏ đậm hơn khi di chuột */
    background-color: #d9e1f8 !important;
}

/* Đảm bảo màu đỏ được áp dụng và dễ đọc trong Dark Mode */
body.theme-dark #menu-dropdown.menu-extra-dropdown a#restart-all-btn {
    color: #fe6788 !important; /* Màu đỏ sáng hơn một chút cho nền tối.
                                  Sử dụng !important để đảm bảo ghi đè quy tắc màu chữ mặc định của menu trong dark mode, 
                                  vì quy tắc đó cũng có thể sử dụng !important. */
}
body.theme-dark #menu-dropdown.menu-extra-dropdown a#restart-all-btn:hover {
	background-color: #d9e1f8 !important;
    color: #ff0000 !important; /* Màu đỏ sáng hơn một chút cho nền tối.  */                  
}

/* Tùy chọn: Nếu bạn muốn màu chữ thay đổi một chút khi hover trong Dark Mode */
body.theme-dark #menu-dropdown.menu-extra-dropdown a#restart-all-btn:hover {
    color: #FF7B7B !important; /* Màu đỏ thậm chí còn sáng hơn một chút khi hover trên nền tối */
    /* Nền của mục menu vẫn sẽ thay đổi theo quy tắc hover chung của dark mode */
}

/* Tùy chọn: Nếu bạn muốn màu chữ thay đổi một chút khi hover trong Light Mode */
#menu-dropdown.menu-extra-dropdown a#restart-all-btn:hover {
    color: #B71C1C; /* Màu đỏ sẫm hơn một chút khi hover */
    /* Nền của mục menu vẫn sẽ thay đổi theo quy tắc hover chung của light mode */
}

/* --- Bắt buộc chữ màu đen trong Dark Mode cho Author Bio (V2) --- */

body.theme-dark .ast-author-bio,
body.theme-dark .page-content,
body.theme-dark .ast-author-bio p {
    color: black !important;
}

/* --- Sửa màu cho văn bản chèn link trong Dark Mode --- */
body.theme-dark .content-area a,
body.theme-dark .entry-content a,
body.theme-dark .ast-archive-description a {
    color: #FFFFFF !important; /* Đặt màu chữ của link thành màu trắng */
}

/* Tùy chọn: Thay đổi màu khi di chuột qua link trong Dark Mode */
body.theme-dark .content-area a:hover,
body.theme-dark .entry-content a:hover,
body.theme-dark .ast-archive-description a:hover {
    color: #fff !important; /* Một màu trắng khi hover để tạo hiệu ứng */

}

/* --- Sửa màu chữ cho menu chính trong Dark Mode --- */
body.theme-dark .main-header-bar-navigation .menu-item > a,
body.theme-dark .main-header-bar-navigation .menu-item > .menu-link {
    color: #FFFFFF !important; /* Đặt màu chữ của link trong menu thành màu trắng */
}

/* Tùy chọn: Thêm hiệu ứng thay đổi màu khi di chuột qua link menu */
body.theme-dark .main-header-bar-navigation .menu-item > a:hover,
body.theme-dark .main-header-bar-navigation .menu-item > .menu-link:hover {
    color: #BBDEFB !important; /* Đổi thành một màu xanh nhạt khi hover */
}

/* ======================================================= */
/* FIX: Giới hạn chiều rộng Popup Name Of The Game & Preferences trên Desktop */
/* ======================================================= */
@media screen and (min-width: 768px) {
  /* Áp dụng cho popup Name Of The Game và Preferences */
  #popup-name-game .popup-content,
  #popup-preferences .popup-content {
    max-width: 550px !important; /* Đặt chiều rộng tối đa là 550px như yêu cầu */
    width: 90% !important;      /* Chiều rộng linh hoạt nhưng không vượt quá max-width */
    margin-left: auto !important;
    margin-right: auto !important;
    left: 0;
    right: 0;
  }
}
/* ==========================================================================
   MÀU SẮC NÚT ĐÓNG PREFERENCES (ĐỎ -> XÁM)
   ========================================================================== */
/* ==========================================
   >>> VIỀN FOCUS CHO NÚT CLOSE PREFERENCES <<<
   ========================================== */
#preferences-close-btn:focus-visible,
.preferences-close-btn:focus-visible {
    outline: 2px solid #007bff !important; /* Viền xanh dương chói lóa */
    outline-offset: 2px !important;        /* Cách nút ra 2px cho thoáng */
    border-radius: 4px;                    /* Sửa thành 50% nếu nút Close của sếp là hình tròn nhé */
    box-shadow: 0 0 8px rgba(0, 123, 255, 0.4);
    transition: all 0.2s ease-in-out;
}

/* ==========================================
   >>> VIỀN FOCUS CHO CÁC Ô CHỌN MÀU (COLOR OPTIONS) <<<
   ========================================== */
/* Bắt cả cái container hoặc các thẻ con bên trong (button, a, input) */
.color-options:focus-visible,
.color-options button:focus-visible,
.color-options input[type="color"]:focus-visible,
.color-options input[type="radio"]:focus-visible {
    outline: 2px solid #007bff !important;
    outline-offset: 3px !important; /* Phải để 3px để viền xanh không bị lẫn vào màu nền của ô màu */
    border-radius: 4px; /* Bo góc nhẹ */
    box-shadow: 0 0 8px rgba(0, 123, 255, 0.5);
    background-color: #007bff !important; /* Màu Đỏ Đậm */
    /* TUYỆT CHIÊU: Phóng to cái ô màu lên một tí xíu khi Tab tới */
    transform: scale(1.02); 
    z-index: 10; /* Đẩy nó nổi lên trên bọn khác */
    transition: transform 0.15s ease, outline 0.1s ease;
}
#preferences-close-btn {
    /* 1. TRẠNG THÁI MẶC ĐỊNH */
    background-color: #555555 !important; /* Màu Đỏ Đậm */
    /* Hiệu ứng chuyển màu mượt */
    transition: all 0.3s ease !important;
}

/* 2. TRẠNG THÁI DI CHUỘT (HOVER) */
#preferences-close-btn:hover {
    background-color: #c0392b !important; /* Màu Xám Đậm */
	/* Thêm scale(1.1) để to lên */
    transform: translate(-5%, -5%) scale(1.1) !important;
    
    /* Hiệu ứng viền đỏ phát sáng mạnh */
    box-shadow: 0 0 15px #ff4200 !important;
    
    /* Đổi viền trắng thành viền đỏ khi di chuột */
    border: 2px 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;
}
#preferences-ok-btn {
    border: 2px solid #12ff00 !important;
}

body.theme-dark #preferences-ok-btn {
    border: 2px solid #fff !important;
}
/* 2. TRẠNG THÁI DI CHUỘT (HOVER) */
#preferences-ok-btn:hover {
   /* 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(-5%, -5%) scale(1.1) !important;
    
    /* Hiệu ứng viền đỏ phát sáng mạnh */
    box-shadow: 0 0 15px #304dfa !important;
    
    /* Đổi viền trắng thành viền đỏ khi di chuột */
    border: 2px 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;
}

/* CSS XOAY CHO NÚT GAME INFO */
.game-info-close img {
    transition: transform 0.3s ease, background-color 0.3s ease; /* Thêm hiệu ứng cho cả màu nền */
    transform-origin: center center;
    background-color: #a4b6fb;
    border-radius: 50%; /* (Khuyên dùng) Bo tròn nền cho đẹp */
    padding: 2px; /* (Khuyên dùng) Tạo khoảng cách nhỏ để nền không dính sát icon */
}

.game-info-close:hover img {
    transform: rotate(90deg);
    background-color: transparent; /* Sửa 'none' thành 'transparent' */
	background-color: #fff !important;
}