/* Layout */
.hth-hero {
  padding: 28px 16px;
  position: relative;
  background: none; /* ✅ เอารูปออกจากด้านนอก */
}

/* ✅ กล่องรับข้อมูล: ใส่รูปพื้นหลังที่นี่แทน */
.hth-hero-inner {
  max-width: 1100px;
  margin: 0 auto;
  border-radius: 18px;
  padding: 28px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);

  position: relative;
  overflow: hidden;

  /* ✅ เอา gradient สีฟ้าอ่อนออก */
  background: transparent;
  z-index: 1;
}

/* ✅ ชั้นรูปพื้นหลัง (อยู่ “ในกล่อง” รับข้อมูล) */
.hth-hero-inner::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: url("http://149.28.69.143/wp-content/uploads/2026/01/bg1-scaled.jpg");
  background-size: cover;
  background-repeat: no-repeat;

  /* ✅ ปรับตำแหน่งรูปตรงนี้ */
  background-position: center top; /* ลอง center center หรือ center 20% ได้ */

  z-index: 0;
}

/* ✅ ชั้น overlay ขาวบาง ๆ เพื่อให้อ่านข้อความง่าย */
.hth-hero-inner::after{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(255,255,255,0.4); /* ปรับความขาว: 0.65 เห็นรูปชัดขึ้น / 0.85 ขาวขึ้น */
  z-index: 1;
}

/* ✅ ทำให้ทุกอย่างในกล่องอยู่เหนือรูป+overlay */
.hth-hero-inner > *{
  position: relative;
  z-index: 2;
}

.hth-title {
  margin: 0 0 6px 0;
  font-size: 34px;
  line-height: 1.2;
  text-align: center;
}

.hth-subtitle {
  margin: 0 0 18px 0;
  text-align: center;
  color: #334155;
}

.hth-form { margin-top: 12px; }

.hth-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 14px;
}

.hth-field label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
  color: #0f172a;
}

.hth-field input,
.hth-field select {
  width: 100%;
  height: 44px;
  border-radius: 12px;
  border: 1px solid #dbeafe;
  padding: 10px 12px;
  outline: none;
  background: #fff; /* ✅ ช่องกรอกขาว */
}

.hth-inline {
  display: flex;
  gap: 10px;
}

.hth-help {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: #64748b;
}

.hth-btn {
  display: block;
  width: 280px;
  margin: 18px auto 0 auto;
  height: 46px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 700;
  background: #2dd4bf;
  color: #062a2a;
}

.hth-btn:hover { filter: brightness(0.98); }

.hth-disclaimer {
  margin-top: 12px;
  text-align: center;
  font-size: 12px;
  color: #64748b;
}

.hth-hidden { display: none !important; }

/* Results */
.hth-results { padding: 24px 16px; }
.hth-results-inner { max-width: 1100px; margin: 0 auto; }

.hth-results-title {
  text-align: center;
  font-size: 28px;
  margin-bottom: 16px;
}

.hth-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 14px;
}

.hth-ai {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.hth-card {
  border-radius: 16px;
  background: #fff;
  border: 1px solid #e2e8f0;
  padding: 16px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.05);
}

.hth-card h3 {
  margin: 0 0 10px 0;
  font-size: 16px;
}

.hth-big {
  font-size: 28px;
  margin: 0 0 6px 0;
  font-weight: 800;
}

.hth-note { margin: 0; color: #475569; font-size: 13px; }

.hth-macro { display: grid; gap: 6px; }

.hth-list { margin: 0; padding-left: 18px; }
.hth-list li { margin: 6px 0; color: #0f172a; }

.hth-error { border-color: #fecaca; background: #fff1f2; }

@media (max-width: 900px) {
  .hth-grid { grid-template-columns: 1fr; }
  .hth-cards { grid-template-columns: 1fr; }
  .hth-ai { grid-template-columns: 1fr; }
}

/* === 2) Force enabled inputs to be white (กันธีมทับ) === */
.hth-form input:not([disabled]),
.hth-form select:not([disabled]),
.hth-form textarea:not([disabled]){
  background: #ffffff !important;
  background-color: #ffffff !important;
}

/* Optional: keep disabled fields slightly gray */
.hth-form input:disabled,
.hth-form select:disabled,
.hth-form textarea:disabled{
  background: #f1f5f9 !important;
  color: #64748b;
}

/* Optional: focus style */
.hth-form input:focus,
.hth-form select:focus,
.hth-form textarea:focus{
  border-color: #93c5fd;
  box-shadow: 0 0 0 3px rgba(147,197,253,0.35);
}
/* ===============================
   FIX 1) Make ALL inputs rounded consistently
   + FIX 2) Reduce input width to 75%
   =============================== */

/* 1) บังคับให้ input/select ทุกชนิดมุมมนเหมือนกัน (กันธีมทับ) */
.hth-form input,
.hth-form select,
.hth-form textarea{
  border-radius: 12px !important;
  -webkit-border-radius: 12px !important;
  overflow: hidden;
}

/* 2) ลดความกว้างของช่องกรอกหลักให้เหลือ 75% และจัดให้อยู่กลางคอลัมน์ */
.hth-field > input,
.hth-field > select,
.hth-field > textarea{
  width: 75% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: block;
}

/* กรณี Height ที่เป็น 2 ช่อง (ft/in) อยู่ใน .hth-inline
   ให้ลดความกว้าง "ทั้งชุด" เหลือ 75% แต่ช่องด้านในยังเต็มพื้นที่ของชุด */
.hth-field .hth-inline{
  width: 75% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.hth-field .hth-inline input{
  width: 100% !important;   /* ให้ ft/in เต็มช่องของตัวเอง */
  border-radius: 12px !important;
}

/* กันบางธีมใส่ appearance ทำให้มุมดูไม่มน */
.hth-form input[type="number"],
.hth-form input[type="text"]{
  -webkit-appearance: none;
  appearance: none;
}

/* มือถือ/จอเล็ก: กลับไปใช้เต็มกว้างเพื่อใช้งานง่าย */
@media (max-width: 900px){
  .hth-field > input,
  .hth-field > select,
  .hth-field > textarea,
  .hth-field .hth-inline{
    width: 100% !important;
  }
}
/* ✅ Align labels to the same left edge as the 75% inputs */
.hth-field label{
  width: 75% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: left !important;
}

/* กรณี label ของชุด Height ที่มี .hth-inline ให้ตรงกันด้วย */
.hth-field .hth-inline{
  width: 75% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* มือถือ: ให้กลับเป็นเต็มกว้างเหมือนเดิม */
@media (max-width: 900px){
  .hth-field label{
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}
/* ✅ Make helper text align with the 75% input edge */
.hth-help{
  width: 75% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: left !important;

  /* optional: spacing */
  margin-top: 4px;
  padding-left: 0;   /* ชิดขอบช่อง */
}

/* มือถือ: ใช้เต็มกว้าง */
@media (max-width: 900px){
  .hth-help{
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}