:root {
  --bg: #171717; /* nền đen chính */
  --card: #1c1c1c; /* nền card */
  --text: #e8ecf2; /* chữ sáng */
  --muted: #a6afc3; /* chữ phụ */
  --accent: #ff8a2a; /* cam sáng (chủ đạo) */
  --accent-2: #ffa64d; /* cam nhạt hover */
  --outline: #2a2a2a; /* viền xám đậm */
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto,
    "Helvetica Neue", Arial;
  background: var(--bg);
  color: var(--text);
}

.wrapper {
  max-width: 60%;
  margin-bottom: 56px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 20px;
}

p {
  line-height: 1.6; /* hoặc 1.5 tuỳ bạn muốn thoáng hay chặt */
  margin-bottom: 1em; /* cách giữa các đoạn */
}

/* .section{background:linear-gradient(180deg,var(--card),#0f1424); border:1px solid var(--outline); border-radius:20px; padding:28px; box-shadow:0 10px 30px rgba(0,0,0,.35); margin-top:20px} */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  background: #0c1222;
  border: 1px solid var(--outline);
  padding: 6px 10px;
  border-radius: 999px;
}

h1 {
  font-size: 24px;
  margin: 16px 0 10px;
}

p {
  font-size: 16px;
  color: var(--muted);
  margin: 0 0 18px;
}

.row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid var(--outline);
  background: linear-gradient(180deg, #1b2640, #152038);
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.btn.primary {
  background: linear-gradient(180deg, var(--accent), #4a88ff);
  color: #07111f;
  border-color: #4a88ff;
}

.btn.secondary {
  background: transparent;
}

input[type="text"] {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--outline);
  background: #0e1322;
  color: var(--text);
  margin-bottom: 12px;
}

.preview {
  margin-top: 16px;
  text-align: center;
}

.preview img {
  max-width: 100%;
  border-radius: 12px;
  border: 1px solid var(--outline);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.alert {
  padding: 12px 16px;
  border-radius: 12px;
  margin: 10px 0;
  font-size: 14px;
  display: none;
}

.alert.success {
  background: #15331f;
  border: 1px solid #3dbb6a;
  color: #9ef2b5;
}

.alert.error {
  background: #3a1c1c;
  border: 1px solid #d65c5c;
  color: #ffbaba;
}

.alert.info {
  background: #1c2640;
  border: 1px solid #6aa3ff;
  color: #a8c8ff;
}

.section {
  background: linear-gradient(90deg, #3a2a1f, #241f28, #221b35);
  /* nâu → tím */
  border: 1px solid #a36b3f;
  /* viền cam nâu nhạt */
  border-radius: 12px;
  padding: 28px;
  margin: 20px 0;
}

a {
  color: #ff8a2a;
  /* cam sáng */
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px dashed rgba(255, 138, 42, 0.6);
  /* gạch chân mờ */
}

a:hover {
  color: #ffa64d;
  /* cam nhạt khi hover */
  border-bottom: 1px solid #ffa64d;
}

.logo-fixed {
  position: fixed;
  top: 16px;
  left: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 999;
  padding: 6px 10px;
  border-radius: 12px;
  background: rgba(23, 23, 23, 0.6);
  /* nền mờ để nổi bật hơn */
  backdrop-filter: blur(8px);
}

.logo-fixed img {
  width: 40px;
  height: 40px;
}

.logo-fixed .logo-text {
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}

b {
  color: #ff8a2a;
  /* màu cam sáng giống màu link */
  font-weight: 700;
  /* đậm hơn để dễ nhìn */
}

.api-test-box {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.apikey-input {
  flex: 1;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.prompt-input {
  width: 100%;
  min-height: 60px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 8px;
  margin-bottom: 10px;
}

.gen-btn {
  background: #ff9900;
  color: #fff;
  border: none;
  padding: 10px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.3s;
}

.gen-btn:hover {
  background: #e68a00;
}

.code-block {
  overflow-x: auto;
  /* cuộn ngang */
  white-space: nowrap;
  /* không xuống dòng */
  padding: 10px;
  background: #2d2d2d;
  border-radius: 15px;
}

.gen-container {
  /* background: #111; */
  border: 1px solid #333;
  border-radius: 12px;
  padding: 20px;
  margin: 20px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: #eee;
  font-family: Arial, sans-serif;
}

.gen-container label {
  font-size: 14px;
  color: #ffa64d;
  font-weight: bold;
}

.gen-container input {
  background: #1b1b1b;
  border: 1px solid #444;
  border-radius: 8px;
  padding: 10px;
  color: #fff;
  font-size: 14px;
  height: 40px;
  /* giữ 1 dòng */
}

.gen-container textarea {
  background: #1b1b1b;
  border: 1px solid #444;
  border-radius: 8px;
  padding: 10px;
  color: #fff;
  font-size: 14px;
  min-height: 100px;
  /* cao mặc định */
  resize: vertical;
  /* chỉ prompt mới co giãn */
}

.gen-container input:focus,
.gen-container textarea:focus {
  outline: none;
  border-color: #ffa64d;
  box-shadow: 0 0 6px rgba(255, 166, 77, 0.5);
}

.gen-container button {
  background: linear-gradient(90deg, #ffa64d, #ff7b00);
  border: none;
  border-radius: 8px;
  padding: 12px;
  font-size: 15px;
  font-weight: bold;
  color: #111;
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.gen-container button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 166, 77, 0.5);
}

.popup-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6); /* nền mờ */
  z-index: 1000;
  justify-content: center;
  align-items: center;
}

.popup-box {
  position: relative;
  background: var(--card);
  padding: 24px;
  border-radius: 16px;
  max-width: 400px;
  width: 90%;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  border: 1px solid var(--outline);
  animation: fadeIn 0.3s ease;
  color: var(--text);
}

.popup-box h2 {
  margin: 0 0 12px;
  font-size: 20px;
  color: var(--accent); /* tiêu đề dùng accent */
}

.popup-box p {
  margin: 0;
  font-size: 15px;
  color: var(--muted); /* text phụ */
}

/* Icon close */
.popup-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
  color: var(--muted);
  cursor: pointer;
  border-radius: 50%;
  transition: background 0.2s, color 0.2s;
}

.popup-close:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--accent-2);
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.header {
  position: sticky; /* bám trên cùng khi scroll */
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(23, 23, 23, 0.9); /* nền tối mờ */
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  z-index: 1000;
}

.logo {
  display: flex;
  align-items: center;
  gap: 8px;
}

.logo img {
  width: 36px;
  height: 36px;
}

.logo .logo-text {
  font-size: 24px; /* chỉnh theo ý */
  background: linear-gradient(90deg, #d16ba5, #ff6f61, #ffb347);
  -webkit-background-clip: text; /* cắt gradient theo chữ */
  -webkit-text-fill-color: transparent; /* làm chữ trong suốt để hiện gradient */
  background-clip: text; /* cho trình duyệt khác */
}

.nav {
  display: flex;
  gap: 16px;
}

.nav a {
  color: var(--text);
  font-weight: 500;
  text-decoration: none;
  border-bottom: none;
}

.nav a:hover {
  color: var(--accent);
}

.aspect-ratio {
  display: flex;
  gap: 10px;
  margin: 10px 0;
}

.aspect-option {
  flex: 1;
  text-align: center;
  border: 1px solid #444;
  border-radius: 8px;
  padding: 10px;
  cursor: pointer;
  background: #222;
  transition: 0.2s;
}

.aspect-option:hover {
  background: #333;
}

.aspect-option.active {
  border: 2px solid orange;
}

 select {
      width: 100%;
      padding: 10px;
      border-radius: 8px;
      border: 1px solid #444;
      background: #0d0d0d;
      color: #e8ecf2;
      font-size: 14px;
    }

/* Mobile responsive */
@media (max-width: 768px) {
  .header {
    flex-direction: column;
    align-items: flex-start;
    padding: 12px;
  }

  .nav {
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
  }

  .wrapper {
    max-width: 100%;
  }
}

input[type="radio"] {
  outline: none;
}
input[type="radio"]:focus {
  outline: none;
  box-shadow: none;
}

label.required::after {
    content: " *";
    color: red;
  }