/* ==========================================================================
   DekEnHUB — ชั้นปรับลุค "เฉพาะหน้าแรก" (โหลดต่อจาก dh-theme.css)
   ส่วนที่ใช้ร่วมทุกหน้า (ชุดสี ฟอนต์ แถบเมนู การ์ดน้อง ๆ) ย้ายไป dh-theme.css แล้ว
   ไฟล์นี้เหลือเฉพาะของหน้าแรก: แบนเนอร์ แผนที่ กล่องค้นหา หมวดหมู่ ปุ่ม MORE ท้ายหน้า
   ========================================================================== */

/* ---------- แผนที่ ---------- */
#search_map{border-radius:22px !important;overflow:hidden;box-shadow:var(--dh-shadow);}

/* ---------- กล่องค้นหา ---------- */
.search-form-holder{background:var(--dh-card);border-radius:26px;padding:22px 20px 8px;margin-top:18px;
  box-shadow:var(--dh-shadow);}
.home-search-header{font-weight:800 !important;letter-spacing:-.3px;}
.search-form .form-label,.search-form .head-label{font-size:11.5px !important;font-weight:600 !important;
  color:var(--dh-muted) !important;margin-bottom:5px !important;}
.search-form .form-control,.search-form .form-select{background:var(--dh-bg) !important;
  border:1.5px solid var(--dh-line) !important;border-radius:999px !important;padding:11px 16px !important;
  font-size:13.5px !important;color:var(--dh-ink) !important;box-shadow:none !important;height:auto !important;}
.search-form .form-control:focus,.search-form .form-select:focus{border-color:#FF8E3C !important;
  background:#fff !important;box-shadow:0 0 0 .2rem rgba(255,107,44,.14) !important;}
.search-form .slim{border:none !important;padding:0 !important;background:none !important;}

/* ติ๊กประเภทงาน → ชิปกดเลือก */
.idol-check-group .region{display:flex;flex-wrap:wrap;gap:7px;margin-top:6px;background:none !important;
  border:none !important;padding:0 !important;}
.check-idol-third{padding:0 !important;margin:0 !important;min-height:0 !important;background:none !important;}
.check-idol-third .form-check-input{position:absolute !important;opacity:0 !important;pointer-events:none;}
.check-idol-third .form-check-label{display:inline-block;background:var(--dh-bg);color:var(--dh-ink-soft);
  border:1.5px solid var(--dh-line);border-radius:999px;padding:7px 15px;font-size:12.5px;font-weight:600;
  cursor:pointer;margin:0;transition:all .15s ease;}
.check-idol-third .form-check-label.active,
.check-idol-third .form-check-input:checked + .form-check-label{background:var(--dh-grad);color:#fff !important;
  border-color:transparent;box-shadow:0 6px 14px rgba(255,78,107,.26);}

/* ---------- ปุ่ม ---------- */
/* หมายเหตุ: ห้ามเขียนกฎปุ่มแบบกว้าง ๆ ที่ .btn-idol เด็ดขาด
   ปุ่ม "นัดเลย" ในแบนเนอร์ใช้คลาสนี้ร่วมกันอยู่ ถ้าไปยัด padding/border-radius ให้
   ปุ่มจะบวมจนข้อความตกบรรทัดและไปทับลูกศรเลื่อนสไลด์ */
.search-form .btn-idol-third,
.home-idol-regis .btn-idol,
.dh-btn{background:var(--dh-grad) !important;color:#fff !important;border:none !important;
  border-radius:999px !important;font-weight:700 !important;padding:12px 26px !important;
  box-shadow:0 8px 20px rgba(255,78,107,.28) !important;}
.search-form .btn-idol-third:hover,
.home-idol-regis .btn-idol:hover,
.dh-btn:hover{filter:brightness(1.04);color:#fff !important;}
.search-form .btn-idol-third + .btn-idol-third{background:var(--dh-card) !important;color:var(--dh-ink) !important;
  box-shadow:0 6px 16px rgba(38,36,75,.09) !important;}

/* ---------- หมวดหมู่ ---------- */
.category{gap:7px;margin-top:22px;}
.category-item{background:var(--dh-card);border:1.5px solid var(--dh-line);border-radius:999px;padding:7px 16px;
  font-size:12.5px;font-weight:600;box-shadow:none;}
.category-item.active{background:var(--dh-grad);color:#fff !important;border-color:transparent;
  box-shadow:0 6px 14px rgba(255,78,107,.25);}


/* ---------- ปุ่ม MORE ---------- */
.see-more div{background:var(--dh-card);border-radius:999px;padding:11px 0;box-shadow:var(--dh-shadow);}
.see-more label{color:var(--dh-brand) !important;font-weight:700;letter-spacing:.5px;cursor:pointer;}

/* ==========================================================================
   ท้ายหน้าแบบใหม่
   ========================================================================== */
.dh-bottom{max-width:1060px;margin:34px auto 0;font-family:'Prompt',sans-serif;}
.dh-rowcard{display:flex;align-items:center;gap:13px;background:var(--dh-card);border-radius:20px;
  padding:16px 18px;box-shadow:var(--dh-shadow);text-decoration:none;color:var(--dh-ink);
  transition:transform .18s ease,box-shadow .18s ease;}
.dh-rowcard:hover{transform:translateY(-2px);box-shadow:var(--dh-shadow-lg);color:var(--dh-ink);}
.dh-rowtxt{flex:1;display:flex;flex-direction:column;}
.dh-rowtxt .t{font-size:14.5px;font-weight:700;}
.dh-rowtxt .d{font-size:12px;color:var(--dh-muted);}
.dh-chev{flex:none;color:#CFC3BA;}

.dh-ico{flex:none;width:42px;height:42px;border-radius:14px;display:flex;align-items:center;justify-content:center;}
.dh-ico.peach{background:#FFF1E8;color:#FF6B2C;}
.dh-ico.mint{background:#E9F7EF;color:#1FA971;}
.dh-ico.amber{background:#FFF6E0;color:#E0921A;}

.dh-cols{display:grid;grid-template-columns:1fr;gap:18px;margin-top:26px;}
.dh-h{font-size:16px;font-weight:800;margin:0 2px;}
.dh-lead{font-size:12.5px;color:var(--dh-muted);margin:4px 2px 0;line-height:1.6;}
.dh-card{margin-top:12px;background:var(--dh-card);border-radius:24px;padding:4px 18px;box-shadow:var(--dh-shadow);}
.dh-item{display:flex;gap:14px;padding:16px 0;}
.dh-itxt{flex:1;display:flex;flex-direction:column;}
.dh-itxt .t{font-size:14.5px;font-weight:700;}
.dh-itxt .d{font-size:12.5px;color:var(--dh-ink-soft);line-height:1.6;margin-top:2px;}
.dh-line{height:1px;background:var(--dh-line);}
.dh-btn{display:block;margin:6px 0 18px;text-align:center;text-decoration:none;font-size:14.5px;}
.dh-warn{margin-top:16px;font-size:11.5px;color:#FF4E6B;font-weight:600;text-align:center;}
.dh-foot{margin-top:24px;padding:18px 0 46px;border-top:1px solid var(--dh-line);
  display:flex;flex-direction:column;align-items:center;gap:5px;}
.dh-foot img{height:24px;object-fit:contain;opacity:.85;}
.dh-foot .c{font-size:10.5px;color:var(--dh-muted);}

/* ---------- คอม: สองคอลัมน์ การ์ดยืดเต็มความสูงเท่ากัน ---------- */
@media (min-width:992px){
  .dh-bottom{margin-top:44px;}
  .dh-cols{grid-template-columns:1fr 1fr;gap:26px;align-items:start;}
  .dh-col{display:flex;flex-direction:column;height:100%;}
  .dh-col .dh-card{flex:1;display:flex;flex-direction:column;}
  .dh-col .dh-btn{margin-top:auto;}
  .dh-rowcard{padding:20px 24px;}
  .dh-h{font-size:19px;}
  .dh-lead{font-size:13px;}
  .search-form-holder{padding:26px 28px 10px;}
}


/* ---------- กล่องค้นหาแบบใหม่ ---------- */
/* กว้างเท่าแผนที่ด้านบนและรายการน้อง ๆ ด้านล่าง (ทั้งหมดอยู่ใน .col col-11 เหมือนกัน)
   ก่อนหน้านี้ล็อก max-width:520px ไว้ การ์ดเลยแคบกว่าเพื่อนอยู่ตัวเดียว */
/* margin-bottom ต้องอยู่นอก media query ของจอคอม ไม่งั้นบนมือถือการ์ดจะชนรูปใบแรก */
.dh-search{background:var(--dh-card);border-radius:22px;padding:18px 16px;
  margin-top:18px;margin-bottom:22px;
  box-shadow:var(--dh-shadow);width:100%;}
@media (min-width:992px){ .dh-search{padding:24px 26px;} }
/* คอลัมน์ของ Bootstrap มี padding 12px สองข้าง การ์ดที่อยู่ "ข้างใน" คอลัมน์จึงแคบกว่า
   แผนที่กับรายการน้อง ๆ ที่ตัวมันเองเป็นคอลัมน์ (ขอบกล่องอยู่ริมคอลัมน์พอดี) 24px
   ล้าง padding ของคอลัมน์นี้ทิ้ง ความกว้างจะเท่ากันเป๊ะทั้งสามส่วน */
.dh-search-col{padding-left:0 !important;padding-right:0 !important;}
.dh-s-title{font-size:16.5px;font-weight:800;text-align:center;color:var(--dh-ink);}
.dh-s-label{margin-top:13px;font-size:11px;font-weight:600;color:var(--dh-muted);}
/* สูงเท่าปุ่ม "ค้นหาน้องๆ" พอดี (ปุ่ม padding 10px + บรรทัด 13.5px) */
.dh-s-input{margin-top:6px;background:var(--dh-bg);border:1.5px solid #E0E2EE;border-radius:999px;
  padding:9px 16px;display:flex;align-items:center;gap:9px;}
.dh-s-input svg{flex:none;}
.dh-s-input input{flex:1;border:none;outline:none;background:transparent;font-family:'Prompt',sans-serif;
  font-size:13.5px;line-height:1.35;color:var(--dh-ink);min-width:0;padding:0;margin:0;}
/* เพศบังคับ 3 ช่องต่อแถวพอดี = ทั้งหมด/หญิง/ชาย แถวบน สาวประเภทสอง/เก/ทอม แถวล่าง
   ใช้ grid ไม่ใช่ flex-wrap เพราะ wrap จะตัดบรรทัดตามความยาวคำ ได้แถวไม่เท่ากัน */
/* บังคับ 3 ช่องต่อแถวพอดี = ทั้งหมด/หญิง/ชาย แถวบน · สาวประเภทสอง/เก/ทอม แถวล่าง
   ใช้ grid ไม่ใช่ flex-wrap เพราะ wrap ตัดบรรทัดตามความยาวคำ ได้แถวไม่เท่ากัน */
.dh-s-genders{margin-top:6px;display:grid;grid-template-columns:repeat(3,1fr);gap:7px;}
.dh-s-genders .dh-chip{width:auto;padding:7px 6px;font-size:12px;}
.dh-s-cats{margin-top:6px;display:flex;flex-wrap:wrap;gap:7px;}
.dh-chip{border-radius:999px;padding:7px 14px;font-size:12px;font-weight:600;cursor:pointer;
  background:var(--dh-bg);color:var(--dh-ink-soft);border:1.5px solid #E0E2EE;font-family:'Prompt',sans-serif;
  transition:all .15s ease;}
.dh-chip.flex{flex:1;padding:8px 0;font-size:12.5px;}
.dh-chip.on{background:var(--dh-grad);color:#fff;border-color:transparent;
  box-shadow:0 6px 14px rgba(255,78,107,.26);}

/* ปุ่มสองปุ่มเรียงบรรทัดละอัน กว้างเต็มกล่องเท่ากัน และเตี้ยกว่าปุ่มมาตรฐาน */
.dh-s-submit,.dh-s-second{display:block;width:100%;border-radius:999px;padding:10px 0;text-align:center;
  font-size:13.5px;font-weight:700;cursor:pointer;font-family:'Prompt',sans-serif;text-decoration:none;
  border:none;line-height:1.35;}
.dh-s-submit{margin-top:15px;background:var(--dh-grad);color:#fff;box-shadow:0 8px 20px rgba(255,78,107,.3);}
.dh-s-second{margin-top:9px;background:var(--dh-bg);color:var(--dh-ink);border:1.5px solid #E0E2EE;
  box-shadow:none;font-weight:600;}
.dh-s-second:hover{color:var(--dh-ink);}


/* ---------- เว้นที่ให้ปุ่ม "นัดเลย" ใต้แบนเนอร์ ----------
   ปุ่มวางแบบ absolute เกาะขอบล่างของสไลด์ (bottom:0) ตัวมันจึงล้นออกนอกกล่อง
   ไปเกือบชนแผนที่ ไม่แตะตำแหน่งปุ่ม แค่ดันบล็อกถัดไปให้ห่างลงมา */
.banner{margin-bottom:30px;}
@media (min-width:768px){ .banner{margin-bottom:34px;} }

/* ---------- แผนที่: ให้ภาพเต็มกรอบ ไม่เหลือพื้นหลังโผล่บน-ล่าง ----------
   ของเดิม #search_map ตั้ง min-height 400px แต่ .map-blur ข้างในคำนวณความสูง
   จากอัตราส่วนภาพ (650/1902 ≈ 34% ของความกว้าง) พอจอแคบกล่องในเลยเตี้ยกว่ากล่องนอกมาก
   เห็นพื้นหลังคาดหัวคาดท้าย ตรงนี้ให้กล่องในยืดเต็มกล่องนอกไปเลย */
#search_map{position:relative;min-height:0 !important;height:240px;padding:0 !important;}
@media (min-width:768px){ #search_map{height:340px;} }
@media (min-width:992px){ #search_map{height:420px;} }

#search_map .map-blur{
  position:absolute;inset:0;height:auto !important;padding-top:0 !important;
  margin:0 !important;border-radius:inherit;background:#E7E9F3;
}
#search_map .map-blur img{
  position:absolute;inset:0;top:0;left:0;transform:none;
  width:100% !important;height:100% !important;object-fit:cover;
}
#search_map .map-blur label{
  top:50%;left:50%;transform:translate(-50%,-50%);
  background:rgba(255,255,255,.92);border-radius:999px;padding:9px 18px;
  font-size:12.5px;font-weight:600;color:var(--dh-ink);text-align:center;
  box-shadow:0 6px 18px rgba(38,36,75,.12);max-width:88%;line-height:1.5;
}
/* มือถือ: โชว์แค่ข้อความ (ไอคอน+ปุ่มซ่อนไว้) — เอาจากดีไซน์เดสก์ท็อปมาแต่ห้ามกระทบมือถือ */
.dh-map-note .ic,.dh-map-note .tp{display:none;}
@media (min-width:768px){
  #search_map .map-blur label.dh-map-note{
    display:flex;align-items:center;gap:11px;padding:12px 12px 12px 22px;
    max-width:none;font-size:14px;backdrop-filter:blur(4px);
    background:rgba(255,255,255,.94);box-shadow:0 10px 26px rgba(38,36,75,.14);
  }
  .dh-map-note .ic{display:block;flex:none;color:var(--dh-brand);}
  .dh-map-note .tp{
    display:inline-block;flex:none;background:var(--dh-grad);color:#fff !important;
    border-radius:999px;padding:7px 16px;font-size:12.5px;font-weight:700;
    text-decoration:none !important;
  }
  .dh-map-note .tp:hover{filter:brightness(1.04);}
}

/* ---------- แบนเนอร์บนมือถือ: ลูกศรไปชิดขอบจอ ไม่ให้รูปทับ ----------
   ของเดิมลูกศรเป็นคอลัมน์ flex กว้าง 10% วางเรียงข้างกล่องสไลด์
   พอจอแคบ กล่องรูปกินพื้นที่จนล้นมาทับลูกศร (บนคอมกว้างพอเลยไม่เจอ)
   แก้โดยยกลูกศรออกมาลอยทับด้านบนแล้วดันไปชิดขอบ ส่วนสไลด์เว้นที่ให้ทั้งสองข้าง */
@media (max-width:767.98px){
  /* ลูกศรยังเรียงแบบ flex เหมือนเดิม (absolute แล้วหลุดออกนอกจอ)
     ที่เพิ่มคือ min-width:0 + overflow:hidden ให้กล่องรูปหดได้จริง เลยไม่ล้นไปทับลูกศร */
  .banner .banner-slide{position:relative;flex-wrap:nowrap;}
  .banner .banner-slide .slide-nav{
    flex:none;width:32px !important;display:flex;align-items:center;justify-content:center;
    padding:0;z-index:5;
  }
  /* รูปลูกศรวางแบบ absolute กลางกล่อง ถ้ากล่องแคบกว่ารูปมันจะล้นออกมาทั้งสองข้าง
     ของเดิมรูปกว้าง 30px จึงต้องให้กล่องกว้างกว่านั้น */
  .banner .banner-slide .slide-nav img{width:22px !important;}
  /* ต้องเป็น visible ไม่งั้นครึ่งล่างของปุ่ม "นัดเลย" ที่คร่อมขอบการ์ดโดนตัดหาย
     กันรูปล้นด้วยการให้การ์ดแต่ละใบคลิปตัวเอง + คลิปแนวนอนที่ตัวแบนเนอร์แทน */
  /* การ์ดมีแต่ margin-right (3%) ด้านซ้ายเลยชิดลูกศรจนทับกัน เว้นให้เท่ากันสองข้าง */
  /* ธีมเดิมใส่ padding-bottom:22px ไว้ที่กล่องสไลด์ ปุ่มที่ยึด bottom:0
     เลยไปเกาะขอบล่างของ padding ไม่ใช่ขอบล่างของการ์ด ตกลงไปห่างเกิน */
  .banner .banner-slide .slide{flex:1;min-width:0;padding:0 0 0 10px;
    overflow-x:clip;overflow-y:visible;}
  .banner .banner-box{overflow:hidden;}
  .banner{overflow-x:clip;}

  /* ครึ่งล่างของปุ่ม "นัดเลย" ยื่นพ้นการ์ดออกมาราว 20px ต้องเผื่อระยะให้พ้นแผนที่ด้วย */
  .banner{margin-bottom:30px;}
}

/* ปุ่ม "นัดเลย" คร่อมเส้นขอบล่างของการ์ด — เลื่อนลงครึ่งตัวเท่านั้น
   ค่าแนวนอนต้องคงของเดิมไว้ทั้ง 3 แบบ (.left = การ์ด 1, ปกติ = การ์ด 2, .right = การ์ด 3)
   ถ้าไปทับค่าแนวนอนด้วย ปุ่มจะหลุดตำแหน่งทันทีที่เลือกการ์ดอื่น */
/* จุดกึ่งกลางของการ์ดที่ถูกเลือก คำนวณจากความกว้างที่ธีมตั้งไว้:
   การ์ดที่เลือก = 54% การ์ดอื่น = 20% เว้นระหว่างกัน 3%
     เลือกใบ 1 → ใบ 1 กิน 0-54%   จุดกึ่งกลาง 27%
     เลือกใบ 2 → ใบ 2 กิน 23-77%  จุดกึ่งกลาง 50%
     เลือกใบ 3 → ใบ 3 กิน 46-100% จุดกึ่งกลาง 73%
   ใช้ translate(-50%) ทุกตัวเพื่อให้ "กึ่งกลางปุ่ม" ตรงกับ "กึ่งกลางการ์ด" จริง ๆ
   (ของเดิมใช้ -25%/-75% ซึ่งเป็นการเดาระยะ ปุ่มเลยเยื้องไปข้างหนึ่งเสมอ) */
.banner .banner-slide .slide .btn-idol{left:50% !important;transform:translate(-50%,50%) !important;}
.banner .banner-slide .slide .btn-idol.left{left:27% !important;transform:translate(-50%,50%) !important;}
.banner .banner-slide .slide .btn-idol.right{left:73% !important;transform:translate(-50%,50%) !important;}

/* ---------- ไล่สีชุดใหม่ให้ปุ่มที่ยังใช้ชุดเก่า ----------
   .btn-idol เดิมไล่สีแดง→ส้ม (rgba(242,112,114) → rgba(248,158,90)) คนละชุดกับธีมใหม่
   แตะเฉพาะ background เท่านั้น ห้ามยุ่งกับ padding/border-radius เพราะปุ่ม "นัดเลย"
   ในแบนเนอร์พึ่งพาขนาดเดิมอยู่ */
.banner .banner-slide .slide .btn-idol,
.board-work{
  background:var(--dh-grad) !important;
  color:#fff !important;
  box-shadow:0 8px 20px rgba(255,78,107,.3) !important;
}

/* ปุ่ม "นัดเลย" เตี้ยลง — ธีมเดิมตั้ง line-height:200% ไว้ที่ .btn-idol
   ความสูงเลยมาจากบรรทัดตัวอักษร ไม่ใช่ padding ต้องลดตรงนั้น */
.banner .banner-slide .slide .btn-idol{
  line-height:1.25 !important;
  padding:9px 16px !important;
  font-size:1.05rem !important;
  white-space:nowrap;
}

/* ---------- แถบหมวดหมู่บนมือถือ ----------
   ธีมเดิมย่อ/ขยายด้วยการล็อกความสูงเป็นตัวเลขตายตัว (26px → 121px)
   พอเปลี่ยนรายการเป็นชิปที่สูงกว่าเดิม ตัวเลขนั้นเลยตัดรายการขาดกลางคัน
   เปลี่ยนมาใช้ซ่อน/แสดงรายการแทน ความสูงจะยืดตามเนื้อหาเอง */
.category .category-item.active{text-decoration:none !important;}
@media (max-width:767.98px){
  .category.mobile{
    height:auto !important;overflow:visible !important;
    flex-direction:column;align-items:center;gap:8px;
    margin-top:18px;margin-bottom:18px;
  }
  .category.mobile .active-holder{display:flex;align-items:center;gap:8px;}
  .category.mobile > .category-item{display:none;}
  .category.mobile.active > .category-item{display:inline-block;}
  .category.mobile .category-item{margin:0 !important;}
  .category.mobile .category-toggle{
    display:flex;align-items:center;justify-content:center;
    width:28px;height:28px;border-radius:50%;background:#fff;
    box-shadow:0 4px 12px rgba(38,36,75,.08);
  }
  .category.mobile .category-toggle img{width:13px;}
}

/* ---------- ซ่อนแถบหมวดหมู่ (All category / เด็กเอนเตอร์เทน / พริตตี้ / ...) ----------
   ลิงก์พวกนี้เป็น href="#" เปล่า ๆ ไม่มีตัวจับคลิกเลยสักตัว กดแล้วได้อย่างเดียวคือ
   เด้งกลับไปบนสุดของหน้า ไม่ได้กรองอะไร แถมพอกดค้นหา searchIdol() จะเขียนทับ
   #idol-list-holder ทั้งก้อน แถบนี้ก็หายไปเองอยู่ดี
   หน้าที่กรองหมวดหมู่ตอนนี้อยู่ที่ชิป "เลือกประเภท" ในกล่องค้นหาซึ่งทำงานจริง */
#idol-list-holder .category,
#idol-list-holder .category.mobile{display:none !important;}

/* ---------- จอคอม: ปุ่ม "นัดเลย" ต้องไม่โดนตัด ----------
   ธีมเดิมตั้ง overflow:hidden + padding-bottom:22px ไว้ที่กล่องสไลด์
   ปุ่มที่คร่อมขอบล่างจึงโดนเฉือนหายครึ่งใบบนจอคอม (มือถือแก้ไปแล้วในบล็อกด้านบน) */
@media (min-width:768px){
  .banner .banner-slide .slide{overflow-x:clip;overflow-y:visible;padding-bottom:0;}
}

/* ---------- จอคอม: วางเป็น 3 คอลัมน์แถวเดียวแบบหน้าเก่า ----------
   หน้าเก่าเรียง [คำค้น] [เพศ] [ประเภท] อยู่บรรทัดเดียวกัน แล้วปุ่มอยู่ใต้ซ้าย
   ของใหม่เรียงลงมาเป็นชั้น ๆ พอจอกว้างเลยยืดจนแต่ละอันยาวเป็นแท่ง
   ตรงนี้จับวางเป็นกริดตามหน้าเก่า โดยไม่แตะลำดับ HTML เลย */
@media (min-width:992px){
  .dh-search{
    padding:22px 26px 24px;
    display:grid;
    grid-template-columns:1.1fr 1.3fr 2fr;
    column-gap:22px;row-gap:0;
    align-items:start;
  }
  .dh-search > .dh-s-title{grid-column:1 / -1;margin-bottom:14px;font-size:18px;}
  .dh-search > .dh-s-label{margin-top:0;margin-bottom:6px;}
  .dh-search > *:nth-child(2){grid-column:1;grid-row:2;}   /* ป้าย คำค้น */
  .dh-search > *:nth-child(3){grid-column:1;grid-row:3;}   /* ช่องคำค้น */
  .dh-search > *:nth-child(4){grid-column:2;grid-row:2;}   /* ป้าย เพศ */
  .dh-search > *:nth-child(5){grid-column:2;grid-row:3;}   /* ชิปเพศ */
  .dh-search > *:nth-child(6){grid-column:3;grid-row:2;}   /* ป้าย ประเภท */
  .dh-search > *:nth-child(7){grid-column:3;grid-row:3;}   /* ชิปประเภท */
  .dh-search > .dh-s-actions{grid-column:1 / -1;grid-row:4;margin-top:18px;}
  .dh-search > select,.dh-search > #dhTagBox{grid-column:1;grid-row:5;}

  .dh-s-genders{margin-top:0;}
  .dh-s-cats{margin-top:0;justify-content:flex-start;}
  .dh-s-input{margin-top:0;}
}

/* ---------- จอคอม: ให้ข้อความฮีโร่กว้างขึ้น การ์ด 3 ใบชิดขวา ----------
   ธีมเดิมแบ่ง col-lg-3 ให้ข้อความ (แคบมาก) และ col-lg-7 ให้การ์ด
   หัวเรื่อง "คัดสรรเพื่อคุณ" เลยตกบรรทัดกลางคำ ขยายฝั่งซ้ายและดันการ์ดไปชิดขวา */
@media (min-width:992px){
  .banner{justify-content:space-between !important;}
  /* ให้ขอบซ้าย-ขวาตรงกับแผนที่และกล่องค้นหาเป๊ะ ๆ
     ทั้งสองอันเป็น .col col-11 ใน row ที่จัดกึ่งกลาง จึงเริ่มที่ (12-11)/12/2 = 4.1667%
     ส่วน .banner เป็น row ที่มี margin ติดลบ 12px อยู่ ต้องบวกคืนเข้าไปด้วย */
  .banner{
    padding-left:calc(4.1667% + 12px) !important;
    padding-right:calc(4.1667% + 12px) !important;
  }
  .banner .banner-txt{
    flex:0 0 40% !important;max-width:40% !important;
    padding-left:0 !important;padding-right:24px !important;text-align:left;
  }
  .banner .banner-txt h1,
  .banner .banner-txt h2,
  .banner .banner-txt p{text-align:left;}
  .banner .banner-txt h1{white-space:nowrap;}
  .banner .banner-slide{
    flex:0 0 54% !important;max-width:54% !important;margin-left:auto !important;
  }
}

/* ---------- ข้อความฮีโร่: เอาสีดำ ----------
   #26244B ของธีมเป็นม่วงอมกรมท่า พออยู่บนตัวอักษรใหญ่จะเห็นอมน้ำเงินชัดมาก
   ตรงนี้ใช้ดำล้วน ส่วนที่อื่นของหน้ายังใช้สีธีมเดิม */
.banner .banner-txt h1,
.banner .banner-txt h2,
.banner .banner-txt p{color:#000 !important;}

/* ---------- จัดหน้าจอคอมเพิ่มเติม ---------- */
@media (min-width:992px){
  /* ปุ่มสองอันอยู่กึ่งกลางการ์ด บรรทัดเดียวกัน (กริดเดิมวางไว้คนละคอลัมน์) */
  /* กันการ์ดค้นหาชนแถวรูปด้านล่าง */
  .dh-search{margin-bottom:26px;}

  /* ขอบแถวการ์ดน้อง ๆ ให้ตรงกับแผนที่และกล่องค้นหา
     ธีมเดิมให้แถวนี้เป็น .col-lg-10 (83.33%) ส่วนอีกสองส่วนเป็น .col col-11 (91.67%) */
  #idol-list-holder > .col-lg-10{
    flex:0 0 91.6667% !important;max-width:91.6667% !important;
  }
}

/* ---------- แถวปุ่มในกล่องค้นหา ----------
   มือถือ: เรียงลงมาเต็มความกว้าง / คอม: อยู่คู่กันกึ่งกลางการ์ด */
.dh-s-actions{display:flex;flex-direction:column;gap:9px;margin-top:15px;}
.dh-s-actions .dh-s-submit,
.dh-s-actions .dh-s-second{margin-top:0;max-width:none;}
@media (min-width:992px){
  .dh-s-actions{flex-direction:row;justify-content:center;gap:12px;margin-top:0;}
  .dh-s-actions .dh-s-submit,
  .dh-s-actions .dh-s-second{width:280px;flex:none;}
}

/* ---------- ปุ่ม LOGIN กับลิงก์สมัครสมาชิกบนแถบเมนู ----------
   ให้ใช้ชุดสีเดียวกับหน้าเข้าสู่ระบบ: ปุ่มหลักไล่สีส้ม-ชมพู ทรงแคปซูล
   (ปุ่มนี้ใช้คลาส .btn-idol ร่วมกับปุ่ม "นัดเลย" ในแบนเนอร์ จึงเจาะจงเฉพาะในแถบเมนู) */
.navbar .btn-idol{
  background:var(--dh-grad) !important;
  color:#fff !important;
  border:none !important;
  border-radius:999px !important;
  padding:9px 26px !important;
  font-size:14px !important;
  font-weight:700 !important;
  line-height:1.3 !important;
  box-shadow:0 8px 20px rgba(255,78,107,.3) !important;
}
.navbar .btn-idol:hover{filter:brightness(1.04);color:#fff !important;}

/* ลิงก์ "สมัครสมาชิก" ข้าง ๆ เป็นตัวรอง ไม่ต้องแย่งสายตากับปุ่มหลัก */
.navbar .navbar-static .nav-link,
.navbar .navbar-nav .nav-link{
  color:var(--dh-ink) !important;font-weight:600;
}
.navbar .navbar-nav .nav-link:hover{color:var(--dh-brand) !important;}

/* ---------- ปุ่ม MORE ----------
   ของเดิมเป็นกล่องขาวกว้าง 150px ตัวหนังสือ 1.5rem กับลูกศรอีกบรรทัด ดูเทอะทะ
   ย่อเป็นปุ่มแคปซูลบรรทัดเดียว ลูกศรอยู่ท้ายข้อความ */
.see-more{margin:22px 0 8px;}
.see-more div{
  width:auto !important;margin:0 auto !important;
  display:inline-flex;align-items:center;gap:8px;
  background:#fff;border:1.5px solid var(--dh-line);border-radius:999px;
  padding:10px 26px;box-shadow:var(--dh-shadow);
  transition:transform .15s ease,box-shadow .15s ease;
}
.see-more div:hover{transform:translateY(-2px);box-shadow:var(--dh-shadow-lg);}
.see-more label{
  font-size:14px !important;font-weight:700 !important;letter-spacing:.4px;
  color:var(--dh-brand) !important;width:auto !important;
}
.see-more img{width:13px !important;margin:0 !important;}

/* ---------- ท้ายหน้า: กว้างเท่าส่วนอื่น และปิดฟุตเตอร์เก่าที่ซ้ำ ----------
   ธีมเดิมมีฟุตเตอร์ดำ "2023 DekEnHUB All rights reserved." อยู่แล้ว
   พอบล็อกท้ายหน้าแบบใหม่มีฟุตเตอร์ของตัวเอง เลยกลายเป็นสองอันซ้อนกัน */
.dh-bottom{max-width:none;}
/* มือถือ: ขอบต้องตรงกับการ์ดน้อง ๆ ซึ่งอยู่ใน .col-lg-10 (เต็มความกว้าง)
   ขอบจริงจึงมาจาก padding 12px ของ main.container-fluid อย่างเดียว → ที่นี่เป็น 0
   คอม: การ์ดน้อง ๆ ถูกบีบเป็น 91.6667% เท่าแผนที่ ต้องบวก 4.1667% + 12px คืน */
.dh-bottom{padding-left:0;padding-right:0;}
@media (min-width:992px){
  .dh-bottom{
    padding-left:calc(4.1667% + 12px);
    padding-right:calc(4.1667% + 12px);
  }
}
footer.container-fluid{display:none;}