/* --- BLACKPINK THEME VARIABLES --- */
:root {
  --bp-black: #050505;
  --bp-dark: #111111;
  --bp-pink: #ff65b2;
  --bp-pink-dim: rgba(255, 101, 178, 0.2);
  --bp-text: #ffffff;
  --bp-gray: #333333;
  --bp-light-gray: #b3b3b3;
  
  --font-display: "Syncopate", sans-serif;
  --font-body: "Kanit", sans-serif;
  
  --score-high: #2ecc71;
  --score-mid: #f1c40f;
  --score-low: #e74c3c;
}

/* --- LAYOUT --- */
nav {
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px 50px; width: 100%; position: fixed; top: 0; z-index: 100;
  background: rgba(5, 5, 5, 0.8); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--bp-gray);
}
.logo { font-family: var(--font-display); font-weight: 700; letter-spacing: 2px; font-size: 1.5rem; }
.nav-btn {
  background: transparent; color: var(--bp-pink); border: 1px solid var(--bp-pink);
  padding: 8px 20px; font-family: var(--font-display); font-size: 0.8rem;
  transition: 0.3s;
}
.nav-btn:hover { background: var(--bp-pink); color: #000; box-shadow: 0 0 15px var(--bp-pink); }

main { padding: 100px 20px 80px; max-width: 900px; margin: 0 auto; }

.footer-bar {
  position: fixed; bottom: 0; left: 0; width: 100%;
  padding: 15px 50px; background: var(--bp-black);
  border-top: 1px solid var(--bp-gray);
  display: flex; justify-content: space-between;
  font-size: 0.7rem; color: var(--bp-light-gray); font-family: var(--font-display);
}

/* --- BLINK COMPONENTS --- */
.blink-card {
  background: var(--bp-dark);
  padding: 30px;
  border-radius: 0px; /* Góc nhọn nam tính/mạnh mẽ */
  border: 1px solid var(--bp-gray);
  margin-bottom: 30px;
  position: relative;
}
.blink-card::before {
  content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--bp-pink), transparent);
}

.section-title {
  font-family: var(--font-display); color: var(--bp-text);
  margin-bottom: 25px; font-size: 1.1rem; letter-spacing: 1px;
  text-transform: uppercase;
}

.input-group-wrapper { display: flex; gap: 15px; flex-wrap: wrap; align-items: center; }
.select-wrapper { flex: 1; min-width: 150px; }

/* Select Style */
.bp-select {
  width: 100%; padding: 12px;
  background: var(--bp-black); border: 1px solid var(--bp-gray);
  color: #fff; font-family: var(--font-body);
  outline: none; transition: 0.3s;
}
.bp-select:hover {
    border-color: var(--bp-pink); box-shadow: 0 0 10px var(--bp-pink-dim);
}
.bp-select:focus { border-color: var(--bp-pink); box-shadow: 0 0 10px var(--bp-pink-dim); }

/* Button Glow */
.bp-btn-glow {
  background: var(--bp-pink); color: #000;
  border: none; padding: 12px 25px;
  font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px;
  transition: 0.3s; width: auto;
}
.bp-btn-glow:hover {
  background: #fff; box-shadow: 0 0 20px var(--bp-pink);
  transform: translateY(-2px);
}
.bp-btn-glow:disabled { background: #555; cursor: not-allowed; box-shadow: none; }

/* --- SENTENCE LIST ITEMS --- */
.sentence-item {
  background: rgba(255,255,255,0.03);
  padding: 20px; margin-bottom: 15px;
  border-left: 3px solid var(--bp-gray);
  display: flex; justify-content: space-between; align-items: flex-start;
  transition: 0.3s;
}
.sentence-item:hover { border-left-color: var(--bp-pink); background: rgba(255,255,255,0.05); }

.text-content { font-size: 1.2rem; margin-bottom: 10px; color: #eee; font-weight: 300; }

/* Action Buttons (Small) */
.actions { display: flex; gap: 10px; margin-top: 10px; }
.btn-action {
  background: transparent; border: 1px solid var(--bp-gray);
  color: var(--bp-light-gray); padding: 6px 12px;
  font-size: 0.8rem; border-radius: 20px; transition: 0.2s;
}
.btn-action:hover, .btn-action.active {
  border-color: var(--bp-pink); color: var(--bp-pink);
}

/* Translation Text */
.translation-text {
  color: var(--bp-light-gray) !important; font-style: italic;
  border-left: 2px solid var(--bp-pink) !important;
  padding-left: 10px; margin: 10px 0;
}

/* --- RECORD BUTTON (PULSE) --- */
.recording-controls { display: flex; flex-direction: column; align-items: center; justify-content: center; margin-left: 15px; }
.btn-record {
  width: 60px; height: 60px;
  border-radius: 50%; border: 2px solid var(--bp-gray);
  background: var(--bp-black); color: #fff;
  font-size: 1.2rem; transition: 0.3s; display: flex; align-items: center; justify-content: center;
}
.btn-record:hover { border-color: var(--bp-pink); color: var(--bp-pink); }

.btn-record.recording {
  border-color: var(--bp-pink); background: var(--bp-pink); color: #000;
  animation: glowPulse 1.5s infinite;
}
@keyframes glowPulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 101, 178, 0.7); }
  70% { box-shadow: 0 0 0 15px rgba(255, 101, 178, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 101, 178, 0); }
}

/* --- ANALYSIS RESULT BOX --- */
.analysis-result {
  margin-top: 15px; padding: 15px;
  background: rgba(0,0,0,0.3); border: 1px solid var(--bp-gray);
  border-radius: 5px; display: none;
}

/* Word Colors */
.word-score { padding: 2px 5px; margin: 0 2px; border-radius: 3px; transition: 0.2s; color: #000; font-weight: 500; }
.word-score:hover { transform: scale(1.1); }
.score-high { background: var(--score-high); } /* Green */
.score-mid { background: var(--score-mid); }   /* Yellow */
.score-low { background: var(--score-low); }   /* Red */

/* Tooltip Override */
.phonetic-tooltip {
  position: absolute; z-index: 10000;
  background: #1a1a1a; border: 1px solid var(--bp-pink);
  color: #fff; padding: 15px; border-radius: 0px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.8);
  min-width: 220px; margin-top: 10px;
  opacity: 0; transform: translateY(10px); transition: all 0.2s ease;
}
.phonetic-tooltip.active { opacity: 1; transform: translateY(0); }