#pc-app {
  --pc-primary: #1a73e8;
  --pc-primary-dark: #174ea6;
  --pc-primary-light: #e8f0fe;
  --pc-card-bg: #ffffff;
  --pc-surface: #f8f9fa;
  --pc-border: #dadce0;
  --pc-text: #202124;
  --pc-muted: #5f6368;
  --pc-success: #1e8e3e;
  --pc-success-bg: #e6f4ea;
  --pc-success-border: #ceead6;
  --pc-fluency: #1a73e8;
  --pc-danger: #d93025;
  --pc-danger-light: #fce8e6;
  color: var(--pc-text);
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  box-sizing: border-box;
  /**
   * Kỹ thuật "phá khung" (100vw + margin âm) ở bản trước gây tràn ngang trên site thật — bỏ hẳn,
   * quay lại max-width cố định an toàn. Giá trị px thật sự lấy từ inline style do PHP in ra
   * (xem PC_Shortcode::render(), option "pc_widget_max_width", chỉnh được ở trang Cài đặt) —
   * 1200px ở đây chỉ là fallback nếu vì lý do gì đó style inline không tới được.
   */
  max-width: 1200px;
  margin: 0 auto;
}

/**
 * Theme KAOKY dùng Bootstrap grid: khung nội dung "#site-content" có class "col-lg-9" — chỉ
 * chiếm 75% chiều rộng ".container" cha (25% còn lại dành cho sidebar, dù trang không hiển thị
 * sidebar nào) — đây là "khung cha hẹp" khiến #pc-app dù đặt max-width bao nhiêu cũng bị bóp lại
 * còn 75%. Nới riêng cột này ra 100% CHỈ khi bên trong nó có widget luyện tập (:has), để không
 * đụng tới các trang khác của site vẫn cần layout 9/12 cột bình thường.
 */
#site-content:has(#pc-app) {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
}

#pc-app [hidden] { display: none !important; }
#pc-app * { box-sizing: border-box; }

/* Reset rất tối thiểu — chỉ 2 thuộc tính không class nào cần khác đi.
   QUAN TRỌNG: "#pc-app button" (id + thẻ = độ ưu tiên 1-0-1) thắng MỌI selector
   chỉ có 1 class (1 class = độ ưu tiên 0-1-0), bất kể thuộc tính gì. Vì vậy mọi rule
   định kiểu cho nút bên dưới đều phải viết dạng "#pc-app .ten-class" (thêm tiền tố id
   #pc-app) để đạt độ ưu tiên 1-1-0, cao hơn rule reset này và luôn thắng. */
#pc-app button {
  cursor: pointer;
  font-family: inherit;
}
#pc-app button:disabled { opacity: 0.4; cursor: default; }

/* --- Thanh trên cùng --- */
#pc-app .pc-topbar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 40px 0 0;
  overflow-x: auto;
  padding-bottom: 4px;
}

/* Cùng 1 chiều cao cố định cho mọi nút trong topbar (pill số liệu + Đã lưu/Lịch sử),
   để không lệch nhau do khác font-size/số dòng chữ bên trong. */
#pc-app .pc-stat-pill,
#pc-app .pc-text-toggle {
  flex: none;
  height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--pc-surface);
  border: 1px solid var(--pc-border);
  border-radius: 999px;
  padding: 0 14px;
  white-space: nowrap;
  box-sizing: border-box;
}
#pc-app .pc-stat-pill .pc-stat-value { font-size: 1.05rem; font-weight: 700; color: var(--pc-primary-dark); }
#pc-app .pc-stat-pill .pc-stat-label { font-size: 0.78rem; color: var(--pc-muted); }

#pc-app .pc-text-toggle {
  background: var(--pc-card-bg);
  color: var(--pc-primary);
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: none;
}
#pc-app .pc-text-toggle:hover { background: var(--pc-primary-light); }
#pc-app .pc-text-toggle.active { background: var(--pc-primary-light); border-color: var(--pc-primary); }

/* --- Hàng chip chọn ngôn ngữ (chỉ dùng ở trang không khóa cứng ngôn ngữ) --- */
#pc-app .pc-chip-row { margin-bottom: 14px; }
#pc-app .pc-chip-list { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
#pc-app .pc-chip {
  display: inline-block;
  border: 1px solid var(--pc-border);
  background: var(--pc-card-bg);
  color: var(--pc-text);
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 500;
}
#pc-app .pc-chip.active,
#pc-app .pc-chip:hover { border-color: var(--pc-primary); color: var(--pc-primary); background: var(--pc-primary-light); }

/* --- Bố cục chính: sidebar chủ đề bên trái + flashcard giữa + sidebar thao tác/điểm số bên phải --- */
#pc-app .pc-workspace {
  display: grid;
  grid-template-columns: 220px 1fr 240px;
  gap: 20px;
  align-items: start;
}

#pc-app .pc-topic-sidebar {
  background: var(--pc-surface);
  border: 1px solid var(--pc-border);
  border-radius: 14px;
  padding: 8px;
}
#pc-app .pc-topic-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 420px; /* ~10 chủ đề, còn lại cuộn */
  overflow-y: auto;
}
#pc-app .pc-topic-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--pc-text);
  font-size: 0.9rem;
}
#pc-app .pc-topic-item:hover { background: var(--pc-card-bg); }
#pc-app .pc-topic-item.active { background: var(--pc-primary-light); color: var(--pc-primary-dark); font-weight: 600; }

/* Dropdown chủ đề — chỉ hiện trên mobile (xem media query bên dưới), thay cho danh sách dọc. */
#pc-app .pc-topic-select {
  display: none;
  width: 100%;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--pc-border);
  background: var(--pc-card-bg);
  color: var(--pc-text);
  font-size: 0.95rem;
  font-family: inherit;
}

/* --- Flashcard từ vựng --- */
#pc-app .pc-flashcard-empty {
  min-height: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1.5px dashed var(--pc-border);
  border-radius: 16px;
  padding: 40px 24px;
  color: var(--pc-muted);
  background: var(--pc-card-bg);
}
#pc-app .pc-placeholder-icon { font-size: 2.5rem; margin-bottom: 12px; }
#pc-app .pc-flashcard-empty p { max-width: 340px; margin: 0; }

#pc-app .pc-flashcard {
  background: var(--pc-card-bg);
  border: 1px solid var(--pc-border);
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(60, 64, 67, 0.08), 0 1px 2px rgba(60, 64, 67, 0.06);
  padding: 28px;
  text-align: center;
}

#pc-app .pc-flash-progress {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--pc-muted);
  letter-spacing: 0.03em;
  margin-bottom: 6px;
}

#pc-app .pc-word-native { font-size: 2.6rem; font-weight: 700; line-height: 1.25; }
#pc-app .pc-word-phonetic { color: var(--pc-muted); font-size: 1.15rem; margin-top: 4px; }
#pc-app .pc-word-meaning { margin-top: 10px; font-size: 1.05rem; }

/* Danh sách "Từ vựng" / câu ví dụ — mỗi dòng riêng, không phải chip ngang */
#pc-app .pc-sentence-section { margin-top: 18px; text-align: left; }
#pc-app .pc-sentence-list { display: flex; flex-direction: column; gap: 6px; }
#pc-app .pc-list-btn {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--pc-border);
  background: var(--pc-card-bg);
  color: var(--pc-text);
  font-size: 0.92rem;
}
#pc-app .pc-list-btn:hover { border-color: var(--pc-primary); background: var(--pc-primary-light); }
#pc-app .pc-list-btn.active { border-color: var(--pc-primary); background: var(--pc-primary-light); color: var(--pc-primary-dark); font-weight: 600; }

/* Cột thứ 3: tốc độ + Nghe mẫu/Thu âm/Lưu + kết quả điểm — tách riêng khỏi thẻ từ vựng ở giữa để
   không phải cuộn xuống mới thấy nút bấm, và có chỗ hiển thị điểm rộng rãi hơn. Dùng gap của
   flexbox để giãn cách giữa các khối con thay vì margin-top riêng lẻ (dễ chỉnh, không lệch khi
   khối đầu tiên đổi thứ tự). */
#pc-app .pc-actions-sidebar {
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: var(--pc-card-bg);
  border: 1px solid var(--pc-border);
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(60, 64, 67, 0.08), 0 1px 2px rgba(60, 64, 67, 0.06);
  padding: 20px 18px;
}

/* Chỉnh tốc độ phát audio mẫu — áp dụng qua Audio.playbackRate lúc phát, không cần tạo thêm file
   audio. Bỏ nhãn chữ "Tốc độ:" để 3 nút luôn vừa 1 hàng trong cột hẹp (240px). */
#pc-app .pc-speed-control {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: nowrap;
}
#pc-app .pc-speed-btn {
  border: 1px solid var(--pc-border);
  background: var(--pc-card-bg);
  color: var(--pc-text);
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 0.82rem;
  font-weight: 600;
}
#pc-app .pc-speed-btn:hover { border-color: var(--pc-primary); background: var(--pc-primary-light); }
#pc-app .pc-speed-btn.active { border-color: var(--pc-primary); background: var(--pc-primary-light); color: var(--pc-primary-dark); }

/* Nghe mẫu / Thu âm / Lưu — xếp dọc, mỗi nút chiếm trọn chiều rộng cột (đủ hẹp nên icon+chữ nằm
   ngang thay vì icon trên chữ dưới như trước). */
#pc-app .pc-practice-actions { display: flex; flex-direction: column; gap: 10px; }
#pc-app .pc-icon-button {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: var(--pc-card-bg);
  color: var(--pc-text);
  border: 1px solid var(--pc-border);
  font-size: 1.2rem;
  padding: 12px 16px;
  border-radius: 12px;
}
#pc-app .pc-icon-button span { font-size: 0.82rem; font-weight: 600; color: var(--pc-muted); }
#pc-app .pc-icon-button:hover { border-color: var(--pc-primary); background: var(--pc-primary-light); }
#pc-app .pc-icon-button.active { border-color: #b06000; background: #fef7e0; }
#pc-app .pc-icon-button.active span { color: #b06000; }

#pc-app #pc-record-btn.recording {
  border-color: var(--pc-danger);
  background: var(--pc-danger-light);
  animation: pc-record-pulse 1.4s infinite;
}
#pc-app #pc-record-btn.recording span { color: var(--pc-danger); }
@keyframes pc-record-pulse {
  0% { box-shadow: 0 0 0 0 rgba(217, 48, 37, 0.35); }
  70% { box-shadow: 0 0 0 10px rgba(217, 48, 37, 0); }
  100% { box-shadow: 0 0 0 0 rgba(217, 48, 37, 0); }
}
#pc-app .pc-record-status { color: var(--pc-muted); font-size: 0.9rem; min-height: 1.2em; }

/* Đồng hồ âm lượng khi đang ghi âm — giúp học viên tự biết nói to/nhỏ quá NGAY LÚC ĐANG NÓI
   thay vì nộp xong mới bị báo lỗi "không phát hiện được giọng nói" (thường do quá nhỏ) hoặc vỡ
   tiếng (thường do quá to/để mic sát miệng). */
#pc-app .pc-volume-meter {
  height: 8px;
  background: var(--pc-surface);
  border: 1px solid var(--pc-border);
  border-radius: 999px;
  overflow: hidden;
}
#pc-app .pc-volume-meter-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: var(--pc-border);
  transition: width 0.08s linear, background-color 0.15s ease;
}
#pc-app .pc-volume-meter-fill.pc-volume-low { background: var(--pc-muted); }
#pc-app .pc-volume-meter-fill.pc-volume-good { background: var(--pc-success); }
#pc-app .pc-volume-meter-fill.pc-volume-high { background: var(--pc-danger); }

/* Màu khung + nhãn đánh giá đổi theo mức điểm (đặt qua JS: pc-verdict-good/ok/poor trên chính
   #pc-score-result) — trước đây khung luôn xanh "thành công" bất kể điểm cao hay thấp, dễ khiến
   người học tưởng nhầm là đã đọc chuẩn dù điểm thực tế còn thấp. */
#pc-app .pc-score-result {
  padding: 18px 20px;
  background: var(--pc-success-bg);
  border: 1px solid var(--pc-success-border);
  border-radius: 12px;
  text-align: left;
}
#pc-app .pc-score-result.pc-verdict-ok { background: #fef7e0; border-color: #fde293; }
#pc-app .pc-score-result.pc-verdict-poor { background: var(--pc-danger-light); border-color: #f6c6c2; }

#pc-app .pc-score-verdict {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 14px;
  background: rgba(255, 255, 255, 0.6);
}
#pc-app .pc-score-result.pc-verdict-good .pc-score-verdict { color: var(--pc-success); }
#pc-app .pc-score-result.pc-verdict-ok .pc-score-verdict { color: #7a4d00; }
#pc-app .pc-score-result.pc-verdict-poor .pc-score-verdict { color: var(--pc-danger); }

#pc-app .pc-score-row { display: grid; grid-template-columns: 100px 1fr 44px; align-items: center; gap: 10px; }
#pc-app .pc-score-row + .pc-score-row { margin-top: 10px; }
#pc-app .pc-score-label { font-size: 0.85rem; color: var(--pc-muted); }
#pc-app .pc-score-bar { height: 8px; background: #dcedc8; border-radius: 999px; overflow: hidden; }
#pc-app .pc-score-bar-fill { height: 100%; border-radius: 999px; background: var(--pc-success); transition: width 0.4s ease; width: 0%; }
#pc-app .pc-score-bar-fill.pc-fluency { background: var(--pc-fluency); }
#pc-app .pc-score-number { font-weight: 700; text-align: right; font-size: 0.95rem; }

#pc-app .pc-flash-nav {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--pc-border);
}
#pc-app .pc-flash-nav-btn {
  background: var(--pc-card-bg);
  color: var(--pc-text);
  border: 1px solid var(--pc-border);
  border-radius: 999px;
  padding: 10px 22px;
  font-weight: 600;
}
#pc-app .pc-flash-nav-btn:hover { background: var(--pc-surface); }
#pc-app .pc-flash-nav-btn.pc-flash-nav-next { color: var(--pc-primary); border-color: var(--pc-primary); }
#pc-app .pc-flash-nav-btn.pc-flash-nav-next:hover { background: var(--pc-primary-light); }

/* --- Banner hết credit --- */
#pc-app .pc-out-of-credits {
  padding: 20px 22px;
  background: #fef7e0;
  border: 1px solid #fde293;
  border-radius: 14px;
  text-align: center;
}
#pc-app .pc-out-of-credits p { margin: 0 0 14px; font-weight: 600; color: #7a4d00; }
#pc-app .pc-out-of-credits-actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
#pc-app .pc-cta-btn {
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  border-radius: 999px;
  background: var(--pc-primary);
  color: white;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--pc-primary);
}
#pc-app .pc-cta-btn:hover { background: var(--pc-primary-dark); color: white; }
#pc-app .pc-cta-btn.pc-cta-btn-ghost { background: transparent; color: var(--pc-primary); }
#pc-app .pc-cta-btn.pc-cta-btn-ghost:hover { background: var(--pc-primary-light); }

/* --- Lịch sử --- */
#pc-app .pc-history-panel { background: var(--pc-card-bg); border: 1px solid var(--pc-border); border-radius: 16px; padding: 8px 20px; margin-top: 20px; }
#pc-app .pc-history-header { display: flex; justify-content: flex-end; padding: 10px 0; }
#pc-app #pc-history-list { list-style: none; padding: 0; margin: 0; max-height: 420px; overflow-y: auto; }
#pc-app #pc-history-list li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 0;
  border-bottom: 1px solid var(--pc-border);
  font-size: 0.9rem;
}
#pc-app #pc-history-list li:last-child { border-bottom: none; }
#pc-app .pc-history-word { font-weight: 700; min-width: 100px; }
#pc-app .pc-history-scores { color: var(--pc-muted); }
#pc-app .pc-history-date { color: var(--pc-muted); font-size: 0.82rem; }
#pc-app .pc-empty-note { color: var(--pc-muted); text-align: center; padding: 24px 0; }

/* --- Responsive: điện thoại --- */
@media (max-width: 720px) {
  /* Topbar xuống dòng thoải mái để hiện đủ tất cả nút, không cuộn ngang nữa. */
  #pc-app .pc-topbar { flex-wrap: wrap; overflow-x: visible; padding-bottom: 0; }

  #pc-app .pc-workspace { grid-template-columns: 1fr; }

  /* Chủ đề chuyển từ danh sách dọc sang dropdown cho gọn trên màn hình hẹp. */
  #pc-app .pc-topic-sidebar { background: none; border: none; padding: 0; }
  #pc-app .pc-topic-list { display: none; }
  /* appearance:none để bỏ giao diện select mặc định (trên iOS Safari không tự có mũi tên,
     trông giống hệt ô nhập liệu thường) rồi tự vẽ icon chevron bằng background-image, để
     người dùng nhận ra ngay đây là 1 dropdown có thể bấm vào. */
  #pc-app .pc-topic-select {
    display: block;
    appearance: none;
    -webkit-appearance: none;
    padding-right: 38px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f6368' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px;
  }

  #pc-app .pc-flashcard { padding: 22px 18px 20px; }
  #pc-app .pc-word-native { font-size: 2.1rem; }
  #pc-app .pc-flash-nav-btn { flex: 1; text-align: center; }
  #pc-app .pc-actions-sidebar { padding: 18px; }
}