/* assets/css/won-appearance-customizations.css */

/* ========================================================================== */
/* == Cài đặt chung cho các mục trong Appearance Panel == */
/* ========================================================================== */

#appearance-panel .customize-section {
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid #595757;
  display: flex;
  align-items: center; /* Căn giữa các item theo chiều dọc */
  flex-wrap: wrap; /* Cho phép nhãn và control xuống dòng nếu không đủ không gian */
  gap: 10px; /* Khoảng cách giữa các phần tử */
  justify-content: space-between; /* >>> ĐÂY LÀ THAY ĐỔI QUAN TRỌNG <<< */
}

/* >>> THÊM LẠI RULE NÀY ĐỂ ĐẢM BẢO MỤC CUỐI KHÔNG CÓ BORDER BOTTOM <<< */
#appearance-panel .customize-section:last-of-type {
    border-bottom: none;
}

#appearance-panel .customize-label {
  font-weight: normal !important;
  color: #333;
  line-height: 1.4;
  /* flex-grow: 1; >>> DÒNG NÀY ĐÃ BỊ XÓA/CHÚ THÍCH <<< */
  flex-shrink: 0; /* Không cho nhãn co lại quá nhiều */
  margin-right: 10px; /* Khoảng cách giữa nhãn và control nếu cùng hàng */
}

/* === BẮT ĐẦU THAY ĐỔI MỚI/THÊM MỚI === */

/* Điều chỉnh riêng cho section "Change text for Spin button" trên di động */
@media (max-width: 768px) { /* Áp dụng cho màn hình nhỏ hơn hoặc bằng 768px (điện thoại và một số tablet) */
  #appearance-panel #spin-button-text-customization-section {
    /* Đảm bảo chúng luôn nằm trên một dòng nếu có thể */
    flex-wrap: nowrap; /* Ngăn container này tự động xuống dòng các item con */
    /* Nếu nội dung quá dài (ví dụ nhãn và input cùng dòng), thì chúng ta có thể cho phép cuộn ngang */
    overflow-x: auto; /* Cho phép cuộn ngang nếu không đủ không gian */
    padding-bottom: 5px; /* Thêm padding nếu thanh cuộn ngang xuất hiện */
	justify-content: space-between;
  }

  #appearance-panel #spin-button-text-customization-section .customize-label {
    /* Giảm flex-grow để nhãn không chiếm quá nhiều không gian,
       cho phép input nằm cùng hàng.
       Hoặc đặt một chiều rộng tối đa cụ thể.
    */
    flex-grow: 0; /* Không cho nhãn quá phát triển */
    flex-shrink: 0; /* Không cho nhãn co lại */
    /* max-width: 150px; */ /* Tùy chọn: Đặt chiều rộng tối đa cho nhãn nếu muốn kiểm soát chặt hơn */
    /* Giữ nguyên margin-right: 10px; để có khoảng cách giữa label và input */
    line-height: 1.2; /* Tối ưu line-height khi xuống dòng */
  }

  #appearance-panel #spin-button-text-customization-section input[type="text"] {
    flex-shrink: 0; /* Ngăn input co lại */
    width: 100px; /* Đặt một chiều rộng cố định cho input trên di động */
    min-width: 80px; /* Giới hạn tối thiểu */
    max-width: 120px; /* Giới hạn tối đa */
    /* display: inline-block; */ /* Không cần nếu dùng flexbox container */
  }
}
/* === KẾT THÚC THAY ĐỔI MỚI/THÊM MỚI === */

/* Phần điều khiển chung */
#appearance-panel .customize-section > input[type="text"],
#appearance-panel .customize-section > select,
#appearance-panel .customize-section > .won-color-trigger-icon,
#appearance-panel .customize-section > .wheel-color-picker-trigger,
#appearance-panel .customize-section > .entry-color-icons-container {
  box-sizing: border-box;
  flex-shrink: 0; /* Ngăn control co lại khi không cần thiết */
  /* Không đặt flex-grow: 1 ở đây để control chỉ chiếm độ rộng cần thiết của nó */
}

/* Input text và Select */
#appearance-panel .customize-section > input[type="text"],
#appearance-panel .customize-section > select {
  /* width: auto; Để chúng tự co giãn hoặc bạn có thể đặt một giá trị cụ thể */
  min-width: 150px; /* Chiều rộng tối thiểu */
  max-width: 200px; /* Giới hạn chiều rộng tối đa */
  padding: 8px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
}
#appearance-panel #spin-button-size-customization-section #spin-button-size-dropdown {
  appearance: none;
  background: url('data:image/svg+xml;utf8,<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16"><path d="M7 10l5 5 5-5z"/></svg>') no-repeat right 8px center;
  background-color: #fff;
  cursor: pointer;
}


/* Icon trigger để chọn màu */
#appearance-panel .won-color-trigger-icon,
#appearance-panel .wheel-color-picker-trigger {
  width: 38px;
  height: 38px;
  cursor: pointer;
  border: 1px solid #ccc;
  padding: 3px;
  border-radius: 4px;
  background-color: #f0f0f0;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  object-fit: contain;
  object-position: center;
  display: block;
  line-height: 0;
}

#appearance-panel .won-color-trigger-icon:hover,
#appearance-panel .wheel-color-picker-trigger:hover {
  border-color: #999;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* ========================================================================== */
/* == Tùy chỉnh màu từng entry (Customize colors for each entry) == */
/* ========================================================================== */

/* Riêng mục "Customize colors for each entry" sẽ có nhãn chiếm 100% và icon bên dưới */
#appearance-panel #entry-color-customization-section {
  flex-direction: column; /* Buộc nhãn và container icon xếp chồng */
  align-items: flex-start; /* Căn về bên trái */
  gap: 0; /* Bỏ gap của parent nếu đã có margin ở label */
}

#appearance-panel #entry-color-customization-section .customize-label {
  width: 100%;
  margin-right: 0; /* Không cần margin phải khi đã full width */
  margin-bottom: 8px; /* Khoảng cách với container icon bên dưới */
}

#appearance-panel #entry-color-customization-section .entry-color-icons-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  /* padding-top: 5px; /* Không cần nếu label đã có margin-bottom */
  width: 100%;
}

#appearance-panel #entry-color-customization-section .entry-color-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  border: 1px solid #595757;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: transform 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
  outline: none;
  background-clip: padding-box;
}

#appearance-panel #entry-color-customization-section .entry-color-icon:hover {
  transform: scale(1.15);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
}

#appearance-panel #entry-color-customization-section .entry-color-icon:focus-visible {
  outline: 3px solid #007BFF;
  outline-offset: 1px;
}

/* ========================================================================== */
/* == Bảng chọn màu (Color Palette) - ĐÃ SỬA ĐÚNG, GIỮ NGUYÊN == */
/* ========================================================================== */
#popup-customize-content .color-palette {
  display: flex !important;
  flex-wrap: wrap !important;
  position: absolute !important;
  box-sizing: border-box !important;
  gap: 6px;
  padding: 10px;
  background-color: #ffffff;
  border: 1px solid #cccccc;
  border-radius: 4px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  z-index: 1005 !important;
  width: auto;
  max-width: 240px !important; /* Ví dụ cho khoảng 6 ô màu 28px trên một hàng */
  max-height: 290px;
  overflow-y: auto;
  min-width: 150px;
}

#popup-customize-content .color-palette .color-option {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  border: 1px solid #595757;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  outline: none;
  padding: 0;
  font-size: 0;
  background-clip: padding-box;
}

#popup-customize-content .color-palette .color-option:hover {
  transform: scale(1.12);
  box-shadow: 0 2px 6px rgba(0,0,0,0.2), inset 0 0 0 1px rgba(0,0,0,0.05);
  border-color: #bdbdbd;
}

#popup-customize-content .color-palette .color-option:focus-visible {
  outline: 2px solid #007BFF;
  outline-offset: 2px;
  border-color: #007BFF;
}

/* ========================================================================== */
/* == Dark Mode Overrides - GIỮ NGUYÊN HOẶC TINH CHỈNH NẾU CẦN == */
/* ========================================================================== */

body.theme-dark #appearance-panel .customize-label {
    color: #e0e0e0 !important;
}
body.theme-dark #appearance-panel .customize-section {
    border-bottom-color: #3a3a3a;
}
body.theme-dark #appearance-panel .won-color-trigger-icon,
body.theme-dark #appearance-panel .wheel-color-picker-trigger {
    background-color: #3a3a3a;
    border-color: #555555;
}
body.theme-dark #appearance-panel #entry-color-customization-section .entry-color-icon {
    border-color: #4a4a4a;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
body.theme-dark #appearance-panel #entry-color-customization-section .entry-color-icon:hover {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.6);
}
body.theme-dark #popup-customize-content .color-palette {
  background-color: #2d2d2d !important;
  border-color: #444444 !important;
  color: #e0e0e0;
}
body.theme-dark #popup-customize-content .color-palette .color-option {
  border-color: #555555 !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}
body.theme-dark #popup-customize-content .color-palette .color-option:hover {
  border-color: #777777;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3), inset 0 0 0 1px rgba(255,255,255,0.08);
}
body.theme-dark #popup-customize-content .color-palette .color-option:focus-visible {
  outline-color: #00aeff;
  border-color: #00aeff;
}
body.theme-dark #appearance-panel .customize-section > input[type="text"],
body.theme-dark #appearance-panel .customize-section > select {
    background-color: #222 !important;
    color: #e0e0e0 !important;
    border: 1px solid #444 !important;
}
body.theme-dark #appearance-panel .customize-section > input[type="text"]::placeholder {
    color: #888 !important;
}
body.theme-dark #appearance-panel .customize-section > select option {
    background-color: #222;
    color: #e0e0e0;
}

/* In đậm cho nhãn "Apply a color theme" */
/* Cần kiểm tra ID chính xác của section chứa nhãn này. 
   Nếu section đó có ID là 'appearance-color-theme-dropdown-section' (hoặc tương tự) 
   và nhãn là con trực tiếp hoặc có class 'customize-label'
*/
#appearance-panel #appearance-color-theme-dropdown .customize-label, /* Giả sử nút dropdown cha có id này và label là customize-label */
#appearance-panel .customize-section > label[for="appearance-color-theme-button"] /* Hoặc nếu label có for attribute */ {
  font-weight: bold !important;
}

/* In đậm cho nhãn "Customize colors for each entry:" */
#appearance-panel #entry-color-customization-section .customize-label {
  font-weight: bold !important;
}

/* --- BEGIN: CSS cho Light on/Light off --- */
#appearance-panel .wheel-lights-control {
  display: flex;
  justify-content: space-between; /* Nhãn bên trái, checkbox bên phải */
  align-items: center; /* Căn giữa theo chiều dọc */
  /* Các thuộc tính khác của .customize-section vẫn được kế thừa */
}

#appearance-panel .wheel-lights-control .customize-label {
  /* flex-grow: 1; */ /* Nhãn sẽ chiếm không gian còn lại nếu cần */
  margin-right: 10px; /* Khoảng cách giữa nhãn và checkbox */
  /* font-weight: normal !important; Đã có trong rule chung cho .customize-label */
}

#appearance-panel .wheel-lights-control input[type="checkbox"] {
  /* flex-shrink: 0; */ /* Checkbox không bị co lại */
  /* Tùy chỉnh kích thước và giao diện của checkbox nếu muốn */
  width: 20px;
  height: 20px;
  cursor: pointer;
}
/* --- END: CSS cho Light on/Light off --- */
/* === BẮT ĐẦU THÊM MỚI CHO SPIN BUTTON SIZE DROPDOWN TRÊN DI ĐỘNG === */
@media (max-width: 768px) { /* Áp dụng cho màn hình nhỏ hơn hoặc bằng 768px (điện thoại và một số tablet) */

  /* Quy tắc cho phần tử <select> của dropdown */
  #appearance-panel #spin-button-size-dropdown {
    width: 100px; /* Chiều rộng cố định cho nút bấm dropdown */
    min-width: 100px; /* Đảm bảo chiều rộng tối thiểu là 100px */
    max-width: 100px; /* Đảm bảo chiều rộng tối đa là 100px */
    flex-shrink: 0; /* Ngăn không cho nó co lại */
    /* Có thể cần điều chỉnh font-size nếu text trong dropdown bị tràn với width 100px */
    font-size: 13px; /* Ví dụ: giảm font-size một chút để vừa */
  }

  /* Quy tắc cho nội dung menu dropdown (nếu nó là một div riêng biệt) */
  /* Dựa trên cấu trúc của bạn, #customize-spin-options là container cho nội dung dropdown */
  #customize-spin-options { /* ID này có thể nằm trong won-customize.css, nhưng bạn có thể ghi đè ở đây */
    width: 100px !important; /* Đặt chiều rộng cố định cho nội dung dropdown */
    min-width: 100px !important;
    max-width: 100px !important;
    box-sizing: border-box; /* Đảm bảo padding không làm tăng kích thước */
  }

  /* Để đảm bảo nhãn và dropdown nằm cùng hàng trên di động (cần kết hợp với flex-wrap: nowrap cho cha) */
  /* Quy tắc này có thể đã được xử lý trong won-appearance-customizations.css */
  /* Hoặc cần được thêm nếu chưa có: */
  #appearance-panel #spin-button-size-customization-section {
    flex-wrap: nowrap; /* Ngăn container này tự động xuống dòng các item con */
    overflow-x: auto; /* Cho phép cuộn ngang nếu không đủ không gian */
    padding-bottom: 5px; /* Thêm padding nếu thanh cuộn ngang xuất hiện */
    /* Căn chỉnh các item nếu cần */
    align-items: center; /* Đảm bảo nhãn và dropdown căn giữa theo chiều dọc */
    justify-content: space-between;
  }

  #appearance-panel #spin-button-size-customization-section .customize-label {
    flex-grow: 0; /* Ngăn nhãn chiếm quá nhiều không gian */
    flex-shrink: 0;
    margin-right: 10px; /* Giữ khoảng cách với dropdown */
  }
}
/* === KẾT THÚC THÊM MỚI CHO SPIN BUTTON SIZE DROPDOWN TRÊN DI ĐỘNG === */
/* --- CODE LOẠI TRỪ MÀU CHỮ --- */
/* Những thành phần này sẽ KHÔNG bị đổi màu theo Page Text Color */
#list-update-table,
.table-header,
#entry-controls,
.popup-body,
.entry-weight-percentage {
    color: #333333; /* Đặt màu cứng là màu đen xám (màu gốc) */
}

/* TRƯỜNG HỢP 2: Chế độ Tối (Dark Mode)
   Áp dụng khi body CÓ class 'theme-dark' */
body.theme-dark #list-update-table,
body.theme-dark .table-header,
body.theme-dark #entry-controls,
body.theme-dark .popup-body,
body.theme-dark .entry-weight-percentage {
    color: #ffffff !important; /* Chuyển sang màu trắng khi nền tối */
}

/* --- TẠO VIỀN TRẮNG CHO CHỮ WINNER --- */
#winner-name {
    /* Tạo viền trắng xung quanh chữ bằng hiệu ứng đổ bóng */
    text-shadow: 
        2px 0 0 #ffffff, -2px 0 0 #ffffff,  
        0 2px 0 #ffffff, 0 -2px 0 #ffffff,  
        1px 1px #ffffff, -1px -1px #ffffff, 
        1px -1px #ffffff, -1px 1px #ffffff;

    /* Nếu bạn muốn đảm bảo chữ luôn là MÀU ĐỎ kể cả khi đổi theme */
    color: red !important; 
    
    /* Làm chữ đậm và to hơn một chút để nổi bật (tùy chọn) */
    font-weight: bold;
}

/* Bao gồm iPad Pro, iPad Air, iPad Mini, Máy tính bảng Android */
@media (max-width: 1024px) {
    #winner-name {
        /* Giảm xuống còn khoảng 2/3 so với Desktop */
        /* Nếu Desktop là 60px -> Tablet để 40px là đẹp */
        font-size: 25px !important;
        
        /* Căn chỉnh lại khoảng cách dòng cho gọn */
        line-height: 1.2 !important;
        
        /* Đảm bảo không bị tràn lề nếu tên quá dài */
        word-wrap: break-word;
        overflow-wrap: break-word;
        max-width: 90%;
        margin-left: auto;
        margin-right: auto;
    }
}

/* 2. ĐIỆN THOẠI NHỎ (Màn hình dưới 480px) */
@media (max-width: 480px) {
    #winner-name {
        /* Giảm tiếp xuống cho vừa màn hình điện thoại dọc */
        font-size: 18px !important;
    }
}

/* --- XỬ LÝ MÀU LINK (LINK NỘI DUNG) --- */

/* 1. Mặc định (Không viết gì cả): 
   Link sẽ giữ nguyên màu xanh/tím mặc định của trình duyệt. 
   Đúng theo ý bạn: "đầu tiên link màu gì kệ nó". */

/* 2. Khi ở chế độ Dark Mode (Preferences -> Dark):
   Buộc link chuyển sang màu TRẮNG để nổi trên nền đen. */
body.theme-dark a:not([href="#"]) {
    color: #ffffff !important;
    text-decoration: underline; /* Giữ gạch chân cho dễ nhìn */
}
body.theme-dark .site-header a,
body.theme-dark .site-footer a {
    text-decoration: none !important; /* <<< Chỉ bỏ gạch chân ở đây */
}

body.theme-dark .wp-block-quote,
body.theme-dark .is-layout-flow,
body.theme-dark .wp-block-quote-is-layout-flow,
body.theme-dark h4, h5 {
    color: #ffffff !important;
    border-color: #ffffff !important; /* Nếu quote có viền, viền cũng trắng luôn */
}
/* 3. Khi người dùng ĐÃ CHỌN màu Page Text Color:
   (Phát hiện bằng cách xem thẻ body có bị gắn style 'color' hay không).
   Lúc này link sẽ 'thừa hưởng' (inherit) màu bạn chọn. */
body[style*="color"] a:not([href="#"]) {
    color: inherit !important;
    text-decoration: underline;
}

/* ==========================================================================
   2. NGOẠI LỆ: CHẶN KHÔNG CHO LINK CÓ ĐUÔI ?t= BỊ ĐỔI MÀU THEO BODY
   (Chỉ chặn ở giao diện Sáng, còn chế độ body.theme-dark thì kệ mẹ nó)
   ========================================================================== */
body[style*="color"]:not(.theme-dark) a[href*="?"] {
    color: revert !important;
}

/* ==========================================================================
   2. ÉP CHẾT MÀU MÃ #252525 CHO 4 THUỘC TÍNH TIÊU ĐỀ
   (Chỉ chạy ở giao diện Sáng khi ĐỔI MÀU chữ, CHẶN HOÀN TOÀN khi là body.theme-dark)
   ========================================================================== */
body[style*="color"]:not(.theme-dark) #popup-advanced-title, 
body[style*="color"]:not(.theme-dark) #popup-advanced-title *,
body[style*="color"]:not(.theme-dark) #won-google-sheet-modal-title, 
body[style*="color"]:not(.theme-dark) #won-google-sheet-modal-title *,
body[style*="color"]:not(.theme-dark) #popup-name-game-title, 
body[style*="color"]:not(.theme-dark) #popup-name-game-title *,
body[style*="color"]:not(.theme-dark) .won-pref-title-wrapper, 
body[style*="color"]:not(.theme-dark) .won-pref-title-wrapper * {
    color: #252525 !important;
}


/* Hiệu ứng khi di chuột vào link (cho cả 2 trường hợp) */
a:not([href="#"]):hover {
    filter: brightness(1.2);
    opacity: 0.8;
}

/* 3. Ngăn chặn sự ảnh hưởng của Page Text Color */
/* Dù bạn có chọn màu chữ trang là Đỏ/Vàng, thì Header vẫn phớt lờ */
body[style*="color"] .site-header a {
    /* inherit ở đây nghĩa là lấy lại màu của quy tắc 1 hoặc 2 ở trên */
    /* Tuy nhiên, để chắc chắn nhất, ta set cứng lại một lần nữa */
    color: #333333 !important; 
    text-shadow: none !important;
	text-decoration: none; /* ko gạch chân cho dễ nhìn */
}
body[style*="color"] .site-footer a {
    /* inherit ở đây nghĩa là lấy lại màu của quy tắc 1 hoặc 2 ở trên */
    /* Tuy nhiên, để chắc chắn nhất, ta set cứng lại một lần nữa */
    color: #333333 !important; 
    text-shadow: none !important;
	text-decoration: none; /* ko gạch chân cho dễ nhìn */
}

/* --- TÙY CHỈNH CÁC NÚT CHỨC NĂNG (DARK MODE) --- */

/* 1. Trạng thái bình thường (Khi ở Dark Mode) */
/* Nền Đen - Chữ Trắng - Có viền nhẹ để không bị chìm */
body.theme-dark #menu-icon-btn,
body.theme-dark #shuffle-btn,
body.theme-dark #update-btn,
body.theme-dark #add-images-btn,
body.theme-dark #upload-file-btn,
body.theme-dark #input-text-btn,
body.theme-dark #results-btn {
    background-color: #000000 !important; /* Nền đen */
    color: #ffffff !important;           /* Chữ/Icon trắng */
    border: 1px solid #555555 !important; /* Viền xám mờ để phân biệt nút với nền web */
    transition: all 0.2s ease-in-out;    /* Hiệu ứng chuyển màu mượt mà */
}

/* 2. Trạng thái khi di chuột qua (Hover) */
/* Nền Xanh lam vừa phải - Chữ Vàng tương phản */
body.theme-dark #menu-icon-btn:hover,
body.theme-dark #shuffle-btn:hover,
body.theme-dark #update-btn:hover,
body.theme-dark #add-images-btn:hover,
body.theme-dark #upload-file-btn:hover,
body.theme-dark #input-text-btn:hover,
body.theme-dark #results-btn:hover {
    background-color: #4169E1 !important; /* Xanh RoyalBlue (Xanh lam vừa phải) */
    color: #FFD700 !important;           /* Màu Vàng Gold (Tương phản tốt) */
    border-color: #FFD700 !important;    /* Đổi màu viền thành vàng theo chữ */
    cursor: pointer;
}

/* --- CẤU HÌNH INPUT VÀ MODAL (DARK MODE) --- */
/* Khi bật chế độ Tối: Nền Đen - Chữ Trắng */
body.theme-dark #name-input,
body.theme-dark .modal-content {
    background-color: #222222 !important; /* Nền đen tuyền */
    color: #ffffff !important;           /* Chữ trắng tinh */
    border: 1px solid #555555 !important; /* Viền xám nhẹ để tách biệt với nền */
}

/* (Bổ sung) Riêng #name-input là chỗ gõ văn bản, 
   ta nên đổi màu con trỏ chuột (caret) sang trắng luôn cho dễ thấy */
body.theme-dark #name-input {
    caret-color: #ffffff !important;
}

/* --- CẬP NHẬT DARK MODE: VIỀN TRẮNG & CHỮ TRẮNG --- */

/* 1. Tạo VIỀN TRẮNG cho Bảng danh sách và Khung Modal */
body.theme-dark #list-update-table,
body.theme-dark .modal-content {
    border: 1px solid #ffffff !important; /* Viền màu trắng sáng */
}

/* 2. Chuyển CHỮ TRẮNG cho Tiêu đề và Danh sách kết quả */
body.theme-dark #results-modal-title,
body.theme-dark #results-list {
    color: #ffffff !important; /* Chữ trắng */
}

/* (Bổ sung nhỏ) Đảm bảo các dòng chữ con bên trong danh sách kết quả cũng trắng */
body.theme-dark #results-list li,
body.theme-dark #results-list span {
    color: #ffffff !important;
}

/* --- CHỈNH KÍCH THƯỚC POPUP (MODAL) --- */

/* 1. Mặc định (Áp dụng cho Mobile - Điện thoại) */
/* "Full ngang màn hình tự nhiên" */
.modal-content {
    width: 95% !important; /* Chiếm 95% chiều ngang màn hình (để lại xíu viền cho đẹp) */
    margin: 60px auto !important; /* Căn giữa màn hình */
    left: 0 !important;
    right: 0 !important;
	border: 3px solid #00a86b !important; /* Viền xanh */
}

/* 2. Áp dụng cho Máy tính bảng & Máy tính bàn (Màn hình > 768px) */
@media (min-width: 768px) {
    .modal-content {
        width: 550px !important; /* Cố định độ rộng 550px như bạn yêu cầu */
        max-width: 550px !important; /* Không cho to hơn 550px */
        
        /* Căn giữa popup trên màn hình to */
        margin: 60px auto !important; 
		border: 3px solid #00a86b !important; /* Viền xanh */
    }
}

/* --- ĐỒNG BỘ QUOTE & HEADING VỚI PAGE TEXT COLOR --- */
/* Quy tắc: Khi thẻ Body có style="color..." (tức là bạn đã chọn màu chữ),
   thì Quote và Heading sẽ đổi màu theo màu đó */

body[style*="color"] .wp-block-quote,
body[style*="color"] .wp-block-heading {
    color: inherit !important;          /* Lấy màu chữ bạn đã chọn */
    border-color: inherit !important;   /* Viền của Quote cũng đổi màu theo cho đồng bộ */
}

/* Bổ sung: Nếu Heading có link bên trong, cũng ép nó đổi màu theo luôn */
body[style*="color"] .wp-block-heading a {
    color: inherit !important;
}