/* ============================================================
   PASSION LINK — TÌM KIẾM (giao diện) — Wecha Crystal Glass
   Mọi class prefix .pls- để KHÔNG đụng CSS CMS.
   ============================================================ */

/* ---------- Nút mở tìm kiếm: DESKTOP (pill trong menu) ---------- */
#plSearchOpenDesktop {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 16px; margin-left: 8px;
  background: linear-gradient(135deg, rgba(255,255,255,0.18), rgba(255,255,255,0.08));
  border: 1.5px solid rgba(255,213,79,0.55);
  border-radius: 50px; cursor: pointer;
  color: #fff; font-family: Quicksand, sans-serif; font-weight: 700; font-size: 13.5px;
  white-space: nowrap; transition: all .2s; line-height: 1;
}
#plSearchOpenDesktop:hover { background: rgba(255,213,79,0.22); border-color: rgba(255,213,79,0.85); transform: translateY(-1px); }
#plSearchOpenDesktop .pls-ico { font-size: 15px; }
#plSearchOpenDesktop .pls-kbd {
  margin-left: 4px; padding: 2px 6px; font-size: 10.5px; border-radius: 5px;
  background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.25); color: rgba(255,255,255,0.85);
}

/* ---------- Nút mở tìm kiếm: MOBILE (icon kính lúp) ---------- */
#plSearchOpenMobile {
  display: none; align-items: center; justify-content: center;
  width: 42px; height: 42px; flex-shrink: 0;
  margin-right: 8px; padding: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.16), rgba(255,255,255,0.06));
  border: 1.5px solid rgba(255,213,79,0.50); border-radius: 50%;
  cursor: pointer; color: #fff; font-size: 19px; line-height: 1;
  -webkit-tap-highlight-color: transparent;
}
@media (max-width: 991px) {
  #plSearchOpenMobile { display: inline-flex; }
  .pls-menu-li, #plSearchOpenDesktop { display: none !important; } /* ẩn cả bản gốc + bản meanmenu clone trong hamburger */
}

/* ---------- Lớp phủ (overlay) ---------- */
.pls-overlay[hidden] { display: none !important; }  /* FIX 13/7: khi đóng phải BIẾN MẤT HẲN — thiếu dòng này = tấm kính vô hình chặn mọi click */
.pls-overlay {
  position: fixed; inset: 0; z-index: 99999;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 8vh 16px 16px;
  background: rgba(20, 35, 20, 0.55);
  opacity: 0; transition: opacity .22s ease;
  pointer-events: none; /* LƯỚI AN TOÀN: không mở = không bao giờ hứng click, kể cả khi JS lỗi */
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.pls-overlay.is-open { opacity: 1; pointer-events: auto; }
html.pls-lock, body.pls-lock { overflow: hidden; }

/* ---------- Hộp tìm kiếm ---------- */
.pls-box {
  width: 100%; max-width: 640px; max-height: 80vh;
  display: flex; flex-direction: column; overflow: hidden;
  background: linear-gradient(135deg, rgba(255,255,255,0.97), rgba(244,240,229,0.94));
  border: 1.5px solid rgba(31,168,75,0.30);
  border-radius: 20px;
  box-shadow: 0 24px 64px rgba(31,63,31,0.35), inset 0 1px 0 rgba(255,255,255,0.9);
  transform: translateY(-12px) scale(0.98); transition: transform .22s ease;
  font-family: Quicksand, sans-serif;
}
.pls-overlay.is-open .pls-box { transform: translateY(0) scale(1); }

/* ---------- Thanh nhập ---------- */
.pls-bar { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid rgba(31,168,75,0.16); }
.pls-bar .pls-bar-ico { font-size: 20px; color: #1FA84B; flex-shrink: 0; }
#plPaletteInput {
  flex: 1; border: none; outline: none; background: transparent;
  font-family: Quicksand, sans-serif; font-size: 17px; font-weight: 600; color: #1F2419;
}
#plPaletteInput::placeholder { color: #8a9384; font-weight: 500; }
.pls-iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex-shrink: 0; padding: 0;
  background: rgba(31,168,75,0.10); border: 1px solid rgba(31,168,75,0.20);
  border-radius: 50%; cursor: pointer; color: #1F3F1F; font-size: 16px; line-height: 1;
  transition: background .15s;
}
.pls-iconbtn:hover { background: rgba(31,168,75,0.18); }
#plPaletteClose { font-size: 20px; }

/* ---------- Vùng kết quả ---------- */
#plPaletteResults { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 6px; }
.pls-group {
  padding: 10px 12px 4px; font-size: 11px; font-weight: 800; letter-spacing: 0.04em;
  text-transform: uppercase; color: #1FA84B;
}
.pls-row {
  display: block; position: relative; padding: 10px 14px 10px 12px; margin: 2px 4px;
  border-radius: 12px; text-decoration: none; color: #1F2419; cursor: pointer;
  border: 1px solid transparent; transition: background .12s;
}
.pls-row:hover, .pls-row[aria-selected="true"] {
  background: linear-gradient(135deg, rgba(31,168,75,0.12), rgba(255,213,79,0.10));
  border-color: rgba(31,168,75,0.22);
}
.pls-row-main { font-size: 14.5px; font-weight: 700; line-height: 1.35; padding-right: 78px; }
.pls-row-sub { font-size: 12px; color: #5a6b52; line-height: 1.4; margin-top: 2px; padding-right: 78px;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.pls-row-badge {
  position: absolute; top: 10px; right: 10px;
  font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 50px;
  background: rgba(31,168,75,0.12); color: #1F7A37; white-space: nowrap;
}
.pls-row-all { text-align: center; font-weight: 800; color: #1FA84B; padding: 12px; margin-top: 4px;
  border-top: 1px dashed rgba(31,168,75,0.25); border-radius: 0 0 8px 8px; }
.pls-row-all:hover { background: rgba(31,168,75,0.08); }
.pls-row mark, .pls-sr-card mark { background: rgba(255,213,79,0.55); color: inherit; padding: 0 1px; border-radius: 3px; }

/* ---------- Chip gợi ý (idle) ---------- */
#plPaletteIdle { padding: 14px 16px 18px; }
.pls-idle-label { font-size: 12px; font-weight: 700; color: #5a6b52; margin-bottom: 10px; }
.pls-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pls-chip {
  padding: 7px 14px; border-radius: 50px; cursor: pointer;
  background: rgba(31,168,75,0.10); border: 1px solid rgba(31,168,75,0.22);
  color: #1F3F1F; font-family: Quicksand, sans-serif; font-weight: 600; font-size: 13px;
  transition: all .15s;
}
.pls-chip:hover { background: rgba(31,168,75,0.20); transform: translateY(-1px); }

/* ---------- Trạng thái rỗng / lỗi / tải ---------- */
.pls-state { padding: 36px 24px; text-align: center; }
.pls-state-ico { font-size: 36px; margin-bottom: 10px; }
.pls-state-title { font-size: 16px; font-weight: 800; color: #1F2419; margin-bottom: 6px; }
.pls-state-sub { font-size: 13px; color: #5a6b52; line-height: 1.5; margin-bottom: 14px; }
.pls-state-zalo {
  display: inline-flex; align-items: center; gap: 6px; padding: 10px 20px; border-radius: 50px;
  background: linear-gradient(135deg, #FFD54F, #FFA726); color: #1F2419 !important;
  font-weight: 800; font-size: 13.5px; text-decoration: none !important;
  box-shadow: 0 6px 16px rgba(255,167,38,0.35);
}

/* ---------- Vùng đọc cho screen reader (ẩn nhìn) ---------- */
.pls-sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================================================
   MOBILE (≤768px) — KHÔNG backdrop-filter (chống lag máy Letri)
   ============================================================ */
@media (max-width: 768px) {
  .pls-overlay { -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    background: rgba(20, 35, 20, 0.78); padding: 0; align-items: stretch; }
  .pls-box {
    max-width: 100%; width: 100%; max-height: none; height: 100dvh; border-radius: 0;
    border: none; box-shadow: none;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    background: #f6faf2;
  }
  .pls-bar { padding: 14px 14px; }
  #plPaletteInput { font-size: 16px; } /* ≥16px tránh iOS tự zoom */
  .pls-iconbtn { width: 44px; height: 44px; font-size: 19px; }   /* tap target ≥44px */
  #plPaletteClose { font-size: 24px; }
  #plPaletteResults { flex: 1; padding-bottom: 24px; }
  .pls-row-main, .pls-row-sub { padding-right: 70px; }
}

/* ============================================================
   TRANG KẾT QUẢ tim-kiem.html
   ============================================================ */
.pls-sr-page { font-family: Quicksand, sans-serif; max-width: 860px; margin: 0 auto; padding: 0 16px 60px; }
.pls-sr-header { position: sticky; top: 0; z-index: 210; padding: 16px 0;
  background: linear-gradient(135deg, rgba(246,250,242,0.96), rgba(244,240,229,0.94));
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.pls-sr-bar { display: flex; align-items: center; gap: 10px;
  background: #fff; border: 1.5px solid rgba(31,168,75,0.30); border-radius: 50px; padding: 4px 6px 4px 16px;
  box-shadow: 0 6px 18px rgba(31,168,75,0.12); }
.pls-sr-bar .pls-bar-ico { font-size: 19px; color: #1FA84B; }
#plSrInput { flex: 1; border: none; outline: none; background: transparent;
  font-family: Quicksand, sans-serif; font-size: 16px; font-weight: 600; color: #1F2419; padding: 10px 0; }
#plSrInput::placeholder { color: #8a9384; font-weight: 500; }
.pls-sr-btn { display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex-shrink: 0; border: none; border-radius: 50%; cursor: pointer;
  background: linear-gradient(135deg, #1FA84B, #178039); color: #fff; font-size: 18px; }
#plSrCount { margin: 14px 2px 4px; font-size: 13.5px; font-weight: 700; color: #5a6b52; }
.pls-sr-group { font-size: 12px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
  color: #1FA84B; margin: 22px 2px 8px; }
.pls-sr-card { display: block; position: relative; padding: 14px 16px; margin-bottom: 10px;
  background: linear-gradient(135deg, rgba(255,255,255,0.96), rgba(244,240,229,0.90));
  border: 1px solid rgba(31,168,75,0.20); border-radius: 14px; text-decoration: none; color: #1F2419;
  box-shadow: 0 6px 16px rgba(31,168,75,0.08); transition: transform .15s, box-shadow .15s; }
.pls-sr-card:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(31,168,75,0.16); }
.pls-sr-card-title { font-size: 16px; font-weight: 800; line-height: 1.35; padding-right: 92px; color: #1F3F1F; }
.pls-sr-card-desc { font-size: 13px; color: #5a6b52; line-height: 1.5; margin-top: 4px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pls-sr-card-badge { position: absolute; top: 14px; right: 14px; font-size: 10.5px; font-weight: 700;
  padding: 4px 10px; border-radius: 50px; background: rgba(31,168,75,0.12); color: #1F7A37; white-space: nowrap; }
.pls-sr-empty { text-align: center; padding: 48px 20px; }
.pls-sr-empty-ico { font-size: 44px; margin-bottom: 12px; }
.pls-sr-empty-title { font-size: 19px; font-weight: 800; color: #1F2419; margin-bottom: 8px; }
.pls-sr-empty-sub { font-size: 14px; color: #5a6b52; margin-bottom: 18px; }
.pls-sr-empty .pls-chips { justify-content: center; margin-bottom: 18px; }
.pls-sr-loading { text-align: center; padding: 48px 20px; color: #5a6b52; font-weight: 600; }

@media (max-width: 768px) {
  .pls-sr-header { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: #f6faf2; }
  .pls-sr-card-title { padding-right: 0; }
  .pls-sr-card-badge { position: static; display: inline-block; margin-top: 8px; }
}

/* ============================================================
   DARK MODE
   ============================================================ */
@media (prefers-color-scheme: dark) {
  .pls-box { background: linear-gradient(135deg, #1c281c, #16201a); border-color: rgba(255,213,79,0.25); }
  #plPaletteInput, .pls-state-title, .pls-row-main { color: #f0f5ec; }
  #plPaletteInput::placeholder { color: #7d8a76; }
  .pls-bar { border-bottom-color: rgba(255,255,255,0.10); }
  .pls-row:hover, .pls-row[aria-selected="true"] { background: rgba(255,213,79,0.12); border-color: rgba(255,213,79,0.25); }
  .pls-row { color: #e6ece2; }
  .pls-row-sub, .pls-state-sub, .pls-idle-label { color: #9fb096; }
  .pls-row-badge, .pls-sr-card-badge { background: rgba(255,213,79,0.16); color: #FFE082; }
  .pls-chip { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.16); color: #e6ece2; }
  .pls-iconbtn { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.16); color: #e6ece2; }
  .pls-sr-card { background: linear-gradient(135deg, #1c281c, #16201a); border-color: rgba(255,255,255,0.10); color: #e6ece2; }
  .pls-sr-card-title { color: #f0f5ec; }
  .pls-sr-header { background: #11180f; }
  #plSrInput { color: #f0f5ec; }
  .pls-sr-bar { background: #1c281c; border-color: rgba(255,213,79,0.25); }
  @media (max-width: 768px) { .pls-box, .pls-sr-header { background: #11180f; } }
}

/* Tôn trọng người dùng tắt hiệu ứng */
@media (prefers-reduced-motion: reduce) {
  .pls-overlay, .pls-box, .pls-row, .pls-sr-card, .pls-chip { transition: none !important; }
}