:root {
  --color-bg:#FFFFFF;
  --color-accent:#FFA866;
  --color-text:#333;
  --font-primary:'Inter','Noto Sans Thai',sans-serif;
  --gradient-accent: linear-gradient(135deg,#FF9770 0%,#FFCF70 100%);
}

* {
  margin:0; padding:0; box-sizing:border-box;
}
html,body {
  width:100%; height:100%;
  font-family:var(--font-primary);
  background-color:var(--color-bg);
  color:var(--color-text);
  overflow-x:hidden;
  margin: 0; 
  padding: 0;
}
.hidden { display:none !important; }

/* Landing */
.landing-page {
  display:flex; flex-direction:column; 
  align-items:center; justify-content:center;
  min-height:100vh; background:#fff; padding:40px 20px;
}
.landing-content {
  max-width:500px; text-align:center;
  padding:24px; border-radius:12px;
  box-shadow:0 4px 12px rgba(0,0,0,0.1);
  background:#fafafa; margin:0 16px;
}
.landing-logo { width:80px; height:80px; margin-bottom:16px; }
.landing-title { font-size:1.4rem; font-weight:600; margin-bottom:12px; }
.landing-desc { font-size:1rem; color:#555; margin-bottom:24px; line-height:1.4; }
.start-quiz-btn {
  background:var(--gradient-accent); color:#fff; border:none; 
  padding:12px 28px; border-radius:8px; cursor:pointer; 
  font-size:1rem; font-weight:500; transition:transform 0.2s, box-shadow 0.2s;
}
.start-quiz-btn:hover {
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(255,152,0,0.3);
}
.landing-footer {
  margin-top:24px; font-size:0.9rem; color:#999; text-align:center;
}

/* Quiz Wrapper */
.quiz-wrapper {
  width:100%; max-width:600px; margin:0 auto; 
  min-height:100vh; display:flex; flex-direction:column;
  padding:16px; position:relative;
}
.quiz-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:16px;
}
.logo { margin-right:10px; }
.brand-title { font-size:1.3rem; font-weight:600; }

/* Progress */
.progress-section { margin-bottom:8px; }
.progress-bar {
  width:100%; height:8px; background:#eee; border-radius:5px;
  overflow:hidden; margin-bottom:4px;
}
.progress-fill {
  width:0%; height:100%; background:var(--gradient-accent);
  transition:width 0.3s ease;
}
.progress-text {
  text-align:center; font-size:0.9rem; color:#666;
  min-height:18px;
}

/* Back + Badge row */
.back-badge-row {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:8px;
}

/* Back button */
.back-button {
  background:#fff; border:1px solid #ccc; border-radius:8px;
  padding:6px 16px; cursor:pointer; font-size:0.85rem; font-weight:500; 
  color:var(--color-text); transition:background 0.2s;
  display:none;
}
.back-button.show { display:inline-block; }
.back-button:hover { background:#f5f5f5; }

/* Badge */
.category-badge {
  font-size:0.85rem; color:#fff; background:#666;
  padding:6px 10px; border-radius:6px;
}

/* Cards Container */
.cards-container {
  flex:1; position:relative; margin-bottom:12px; overflow:visible;
}

/* Quiz Card */
.quiz-card {
  position:absolute; top:0; left:0; right:0; bottom:0;
  overflow-y:auto;
  background:#fff; border-radius:12px;
  box-shadow:0 3px 10px rgba(0,0,0,0.08);
  padding:20px;
  display:flex; flex-direction:column;
  transition:transform 0.3s ease, opacity 0.3s ease;
  opacity:0.95;
}
.question-title {
  font-size:1.05rem; font-weight:600; margin-bottom:14px; color:var(--color-text);
}
.question-label {
  position:absolute; bottom:8px; left:10px; font-size:0.8rem; color:#999;
}
.options-list {
  display:flex; flex-direction:column; gap:20px; margin-top:auto;margin-bottom: auto;
}
.options-list button {
  background-color:#f9f9f9; border:2px solid transparent; border-radius:8px;
  padding:12px; font-size:1rem; cursor:pointer;
  transition:transform 0.2s, border-color 0.2s;
  color:var(--color-text); text-align:left; 
  white-space:normal; line-height:1.3; word-wrap:break-word; word-break:break-word;
}
.options-list button:hover {
  transform:translateX(3px); border-color:#ccc;
}

/* stack offset */
.quiz-card.stack-0 {
  z-index:3; transform:translate(0,0); filter:none; opacity:1; pointer-events:auto;
}
.quiz-card.stack-1 {
  z-index:2; transform:translate(5px,5px); filter:blur(2px); opacity:0.5; pointer-events:none;
}
.quiz-card.stack-2 {
  z-index:1; transform:translate(10px,10px); filter:blur(2px); opacity:0.5; pointer-events:none;
}
.quiz-card.slide-out {
  opacity:0; transform:translateY(-30px) rotate(-2deg);
}
.quiz-card.slide-in {
  opacity:1; transform:translate(0,0);
}

/* Micro-result / Final Result */
.result-section {
  display:flex; flex-direction:column; align-items:center; margin-top:16px;
}
.result-section h2 {
  font-size:1.2rem; margin-bottom:12px;
}
.result-section p {
  font-size:1rem; margin-bottom:10px;
}
.category-scores {
  font-size:1rem; color:#333; margin-bottom:16px;
}
.chart-container {
  width:100%; max-width:400px; margin:0 auto; margin-bottom:16px;
}
.cta-button {
  background:var(--gradient-accent); color:#fff; border:none;
  padding:10px 24px; border-radius:6px; cursor:pointer; font-size:1rem; font-weight:500;
  transition:transform 0.2s, box-shadow 0.2s;
}
.cta-button:hover {
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(255,152,0,0.3);
}

/* Quiz Footer */
.quiz-footer {
  font-size:0.8rem; color:#999; text-align:center;
  margin-top:auto; padding:8px 0;
}

/* Responsive */
@media(max-width:600px){
  .quiz-wrapper { padding:8px; }
  .quiz-card { padding:16px; }
  .options-list button { padding:10px; font-size:0.95rem; }
  .result-section h2 { font-size:1.1rem; }
}
.badge-container {
  display: flex;        /* ใช้ Flex เพื่อเรียงในบรรทัดเดียว */
  flex-wrap: nowrap;    /* ห้ามตัดลงบรรทัดใหม่ */
  align-items: center;  /* จัดให้อยู่แนวกลาง (แนวตั้ง) */
  gap: 8px;             /* ช่องว่างระหว่าง Badge */
}

.badge-item {
  background: #666;     /* สีพื้น Badge */
  color: #fff;
  font-size: 0.85rem;
  padding: 6px 10px;
  border-radius: 6px;
  white-space: nowrap;  /* ไม่ให้ข้อความภายใน Badge ตัดบรรทัด */
}

.quiz-option {
  display: flex;
  padding: 16px 8px;
  align-items: center;
  gap: 8px;
  align-self: stretch;
  border-radius: 8px;
  border: 1px solid #D0D5DD;
  background: #fff;
  margin-bottom: 10px;
  cursor: pointer;
}
.quiz-option input {
  margin-right: 10px;
}
.quiz-option input[type="radio"] {
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid #F26634; /* Orange border */
  border-radius: 50%;
  outline: none;
  cursor: pointer;
  position: relative;
}
/* Custom filled state when selected */
.quiz-option input[type="radio"]:checked::before {
  content: "";
  width: 12px;
  height: 12px;
  background-color: #F26634; /* Orange fill */
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.quiz-option-label {
  display: flex;
  flex-direction: column;
}
.quiz-option-badge {
  background-color: #4CAF50;
  color: white;
  font-size: 12px;
  font-weight: bold;
  padding: 2px 4px;
  border-radius: 4px;
  display: inline-block;
  text-align: center;
  margin-bottom: 5px;
  width: fit-content;
}
.quiz-option-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}
.quiz-option-industry-select-container {
  position: relative;
  margin-bottom: 15px;
}
.quiz-option-industry-select-container select {
  width: 100%;
  padding: 12px;
  font-size: 16px;
  color: #666;
  border: 1px solid #D0D5DD;
  border-radius: 8px;
  background-color: white;
  appearance: none;
  cursor: pointer;
  outline: none;
}
.quiz-option-industry-select-container::after {
  content: "▼";
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  font-size: 14px;
  color: #666;
  pointer-events: none;
}

.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
}
.modal-content {
  background: white;
  padding: 20px;
  border-radius: 10px;
  max-width: 350px;
  text-align: left;
}
.close {
  float: right;
  cursor: pointer;
}
#infomationModalInputs input {
  width: 100%;
  padding: 8px;
  margin-top: 10px;
}
#infomationModalConfirmButton {
  width: 100%;
  padding: 8px;
  margin-top: 10px;
}

#infomationModalInputs .input-group {
  display: flex;
  gap: 10px;
}
#infomationModalInputs .input-group input {
  flex: 1;
}
#infomationModalInputs label {
  font-weight: bold;
  display: block;
  margin-top: 10px;
}
#infomationModalInputs input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.disabled-button {
  cursor: not-allowed;
  background: #EAECF0;
  color:#fff; 
  border: none; 
  padding: 12px 28px; 
  border-radius: 8px;
  font-size:1rem; 
  font-weight:500; 
  transition:transform 0.2s, box-shadow 0.2s;
}
.error {
  border-color: red;
}
.error-message {
  color: red;
  font-size: 12px;
  display: none;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ddd;
  padding-bottom: 10px;
  margin-bottom: 10px;
}
.modal-header img {
  height: 30px;
}