/* 2026-11-06 หัวหน้าแรก (มือถือ/แท็บเล็ต <1024px) — แถวโปรไฟล์ + ค้นหา แบบ resQ (mockup_hero_slider.html A)
   แบนเนอร์ = แบบ C ของ mockup_hero_full.html (ผู้ใช้เลือก): เต็มขอบจอ ไม่มีขอบมน · รูปเต็ม + ไล่เข้มซ้าย · การ์ดตัวเลขลอยทับขอบล่าง · ของเดิม hero_slides_bk20261106a.css */
.hxa { display: block; color: #0b1e3f; }
.hxa svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 1023px) {
  .hxa { display: block; padding-top: 0; }
  .ix-hero, .ix-stats { display: none !important; }
}
.hxa-row { display: flex; align-items: center; gap: 10px; padding: 12px 16px 10px; }
.hxa-av { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; flex: none; background: #fff; border: 2px solid #ffd66b; display: block; }
.hxa-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hxa-who { flex: 1; min-width: 0; text-decoration: none !important; color: #0b1e3f; }
.hxa-who b { display: block; font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hxa-who small { display: block; font-size: 12px; color: #7a849c; }
.hxa-sp { flex: 1; }
.hxa-login { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 99px; background: #0b1e3f; color: #fff !important; font-weight: 700; font-size: 14px; text-decoration: none !important; }
.hxa-login svg { width: 17px; height: 17px; }
.hxa-ib { width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid #e4e7ef; background: #fff; display: grid; place-items: center; position: relative; color: #0b1e3f; flex: none; text-decoration: none !important; }
.hxa-ib svg { width: 20px; height: 20px; }
.hxa-ib i { position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 99px; background: #e0455a; color: #fff; font-size: 10.5px; font-style: normal; font-weight: 700; display: grid; place-items: center; border: 2px solid #fff; }
.hxa-sr { display: flex; align-items: center; gap: 8px; margin: 0 16px 12px; padding: 5px 5px 5px 14px; background: #fff; border-radius: 99px; border: 1.5px solid #e9ebf2; color: #7a849c; }
.hxa-sr svg { width: 19px; height: 19px; flex: none; }
.hxa-sr input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: 14px; color: #0b1e3f; padding: 6px 0; }
.hxa-sr button { flex: none; padding: 9px 16px; border: 0; border-radius: 99px; background: #0b1e3f; color: #fff; font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }
/* แบนเนอร์เต็มขอบจอ */
.hxa-bnw { position: relative; height: 300px; overflow: hidden; background: #0b1e3f; } /* 2026-11-06 ผู้ใช้กำหนดสูง 300 (ลอง 450 → 350 → 300) */
.hxa-track { display: flex; height: 100%; transition: transform .45s cubic-bezier(.3,.7,.3,1); }
/* 2026-11-06 แถบเมนูแท็บบนแบนเนอร์ กว้าง 760 เท่ากันทุกหน้า (หน้านักเรียน/ครู/โรงเรียน/องค์กรเดิมได้ 920 จาก .ixs .ix-tabs) */
@media (min-width: 1024px) { .ixs > .hxa + .ix-tabs.box-con-01 { max-width: 760px !important; width: 100%; justify-self: center; margin-left: auto !important; margin-right: auto !important; } }
@media (hover: hover) { .hxa-bnw { cursor: grab; user-select: none; } .hxa-bnw.drag { cursor: grabbing; } .hxa-bnw.drag a { pointer-events: none; } } /* 2026-11-06 ลากด้วยเมาส์ */
.hxa-bn { flex: 0 0 100%; height: 100%; position: relative; color: #fff !important; overflow: hidden; text-decoration: none !important; background-position: center; background-size: cover; background-repeat: no-repeat; }
.hxa-bn.cov::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,30,63,.9) 0%, rgba(11,30,63,.45) 50%, transparent 78%); }
.hxa-tx { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); width: 60%; z-index: 2; display: block; }
.hxa-tx small { display: block; font-size: 11.5px; font-weight: 700; color: #ffd66b; }
.hxa-tx b { display: block; font-size: 21px; font-weight: 800; line-height: 1.3; margin: 3px 0 10px; text-shadow: 0 2px 10px rgba(0,0,0,.25); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.hxa-tx b em { font-style: normal; color: #ffd66b; }
.hxa-btn { display: inline-block; padding: 8px 15px; border-radius: 99px; background: #ffd66b; color: #0b1e3f; font-size: 12.5px; font-weight: 700; }
.hxa-im { position: absolute; right: 8px; bottom: 0; height: 94%; width: 44%; display: flex; align-items: flex-end; justify-content: center; }
.hxa-im img { max-height: 100%; max-width: 100%; object-fit: contain; display: block; clip-path: inset(0 1% 0 0); } /* รูปนกมีเส้นทึบ 1px ที่ขอบขวา */
.hxa-dots { position: absolute; left: 18px; bottom: 16px; z-index: 3; display: flex; gap: 5px; }
.hxa-dots i { width: 7px; height: 7px; border-radius: 99px; background: rgba(255,255,255,.55); transition: .3s; cursor: pointer; }
.hxa-dots i.on { width: 22px; background: #ffd66b; }
.hxa-st { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(3, 1fr); margin: -22px 16px 0; background: #fff; border-radius: 20px; padding: 12px 6px; box-shadow: 0 10px 24px rgba(11,30,63,.12); text-align: center; }
.hxa-st div + div { border-left: 1px solid #eef0f5; }
.hxa-st b { display: block; font-size: 18px; font-weight: 800; } .hxa-st small { font-size: 11.5px; color: #7a849c; }
@media (min-width: 600px) { .hxa-tx { left: 32px; width: 55%; } .hxa-tx b { font-size: 28px; } .hxa-dots { left: 32px; } }
/* ตัวอย่างในหลังบ้าน (admin/hero_slides.php) */
.hsx-pv .hxa-bnw { height: 170px; border-radius: 14px; } .hsx-pv .hxa-tx b { font-size: 17px; } .hsx-pv .hxa-dots { display: none; }

/* 2026-11-06 ผู้ใช้: แถบเมนูหมวด (หน้าหลัก/นักเรียน/คุณครู/โรงเรียน/องค์กร) ลอยทับขอบล่างแบนเนอร์ เหมือนแท็บนักเรียน */
@media (max-width: 1023px) {
  .hxa ~ .ix-tabs.box-con-01 { margin-top: -42px !important; /* แถบสูง ~84px → ทับแบนเนอร์ครึ่งหนึ่งพอดี (ผู้ใช้: ให้เท่าๆ กัน) */ position: sticky; z-index: 20; }
  .hxa-dots { bottom: 56px; }
  .hxa-tx { top: 42%; }
}

/* 2026-11-06 ชนิดรูปล้วน (ไม่มีไล่เข้ม/ข้อความ) + ปรับขนาดตัวอักษรต่อสไลด์ (--fs) */
.hxa-bn.img::after { display: none; }
.hxa-tx b { font-size: calc(21px * var(--fs, 1)); }
@media (min-width: 600px) { .hxa-tx b { font-size: calc(28px * var(--fs, 1)); } }

/* ===== 2026-11-06 รูปมือถือ/จอคอมแยกกัน (--bm / --bd) · จอคอมใช้แบนเนอร์ชุดเดียวกัน (ผู้ใช้: เว็บไซต์ด้วย) ===== */
.hxa-bn.cov { background-image: var(--bm); }
@media (min-width: 1024px) {
  .hxa-bn.cov { background-image: var(--bd, var(--bm)); }
  /* หัวเดิม: เหลือแค่แถบเมนูบน · ซ่อนข้อความ/การ์ดกระจก/สไลด์ประชาสัมพันธ์เดิม */
  .ix-hero { display: block !important; padding-bottom: 14px !important; }
  .ix-hero > :not(.ix-top) { display: none !important; }
  .ix-stats { display: none !important; }
  .hxa { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
  .hxa-bnw { height: 460px; }
  .hxa-bn.cov::after { background: linear-gradient(90deg, rgba(11,30,63,.88) 0%, rgba(11,30,63,.4) 38%, transparent 62%); }
  .hxa-tx { left: max(44px, calc(50vw - 596px)); width: min(560px, 44%); top: 44%; }
  .hxa-tx small { font-size: 14px; } .hxa-tx b { font-size: calc(40px * var(--fs, 1)); margin: 6px 0 18px; } .hxa-btn { padding: 11px 22px; font-size: 15px; }
  .hxa-im { right: max(44px, calc(50vw - 596px)); width: 36%; }
  .hxa-dots { left: max(44px, calc(50vw - 596px)); bottom: 70px; }
  .hxa ~ .ix-tabs.box-con-01 { margin-top: -42px !important; position: relative; z-index: 3; }
}@media (min-width: 1024px) { .ix-hero { padding-top: 0 !important; padding-bottom: 6px !important; } }

/* ===== 2026-11-06 จอคอม = แบบ B ของ mockup_hero_desktop.html (ผู้ใช้เลือก): แบนเนอร์เต็มจอ สูง 560 · เมนูเว็บลอยโปร่งบนรูป · ลูกศรซ้ายขวา ===== */
.hxa-ar { display: none; }
@media (min-width: 1024px) {
  .ix-hero { position: absolute !important; left: 0; right: 0; top: 0; z-index: 30; margin: 0 !important; padding: 0 32px !important; /* 2026-11-06 ผู้ใช้: โลโก้ชิดซ้าย · เมนูชิดขวา (เดิมบีบกลาง 1240) */ background: linear-gradient(180deg, rgba(11,30,63,.78), rgba(11,30,63,0)) !important; box-shadow: none !important; }
  .ix-hero::before, .ix-hero::after { display: none !important; }
  .hxa-bnw { height: 560px; }
  .hxa-tx { top: 54%; left: max(24px, calc(50vw - 596px)); width: min(560px, 44%); }
  .hxa-tx b { font-size: calc(46px * var(--fs, 1)); }
  .hxa-dots { left: max(24px, calc(50vw - 596px)); bottom: 74px; }
  .hxa-ar { display: grid; place-items: center; position: absolute; top: 50%; transform: translateY(-50%); z-index: 4; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255,255,255,.9); color: #0b1e3f; cursor: pointer; box-shadow: 0 6px 16px rgba(0,0,0,.18); }
  .hxa-ar svg { width: 20px; height: 20px; } .hxa-ar.l { left: 18px; } .hxa-ar.r { right: 18px; }
  .hxa-im { right: max(24px, calc(50vw - 560px)); height: 86%; width: 34%; }
  .hxa ~ .ix-tabs.box-con-01 { margin-top: -38px !important; }
}
/* 2026-11-06 เงาไล่เข้มใต้เมนูย้ายมาอยู่ในแบนเนอร์เอง (เต็มกว้างพอดี · เดิมเงาอยู่ที่ .ix-hero ซึ่งกว้างไม่เท่าจอ เห็นเป็นแถบขาดที่ขอบซ้าย) */
@media (min-width: 1024px) {
  .ix-hero { background: transparent !important; }
  .hxa-bnw::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 150px; z-index: 3; pointer-events: none; background: linear-gradient(180deg, rgba(11,30,63,.72), rgba(11,30,63,0)); }
}

/* 2026-11-06 ขนาดตัวอักษรแยก: มือถือ --fsm · จอคอม --fs (ตั้งในหลังบ้าน) */
@media (max-width: 1023px) { .hxa-tx b { font-size: calc(21px * var(--fsm, var(--fs, 1))); } }
@media (min-width: 600px) and (max-width: 1023px) { .hxa-tx b { font-size: calc(28px * var(--fsm, var(--fs, 1))); } }

/* 2026-11-06 ผู้ใช้: รูปแบนเนอร์แสดงไม่เต็ม (ความสูงตายตัวทำให้รูปถูกตัด) → สูงตามสัดส่วนรูปที่ครอปในหลังบ้านพอดี: มือถือ 1170×900 · จอคอม 2400×770 */
.hxa-bnw { height: auto !important; aspect-ratio: 1170 / 900; }
@media (min-width: 1024px) { .hxa-bnw { aspect-ratio: 2400 / 770; } }

/* 2026-11-06 แบนเนอร์โฆษณา (ads_slider): รูปชิดขอบกรอบ ไม่มีช่องขาว (เดิม img มี margin-bottom 10px + มุมโค้งไม่เท่ากรอบ) */
.ads-slider .ads-item img { margin: 0 !important; border-radius: 0 !important; }
.ix-ads, .ix-grid .ix-ads { background: transparent !important; padding: 0 !important; }

/* 2026-11-06 แบนเนอร์แท็บนักเรียน (และแท็บอื่นในอนาคต) อยู่ในกริดของแผง → เต็มแถว */
.ixs > .hxa { grid-column: 1 / -1; }
@media (min-width: 1024px) { .ixs > .ix-hero.ixh { position: absolute !important; } }

/* 2026-11-06 แบนเนอร์แท็บนักเรียน/ครู/โรงเรียน/องค์กร เต็มจอเหมือนหน้าหลัก (เดิมโดน margin:auto ของแผงทับ เลยกว้างแค่ 1600) */
@media (min-width: 1024px) { .ixs > .hxa { justify-self: stretch !important; width: 100% !important; max-width: none !important; margin: 0 !important; contain: inline-size; } .ixs > .hxa .hxa-bnw { width: 100vw; left: 50%; transform: translateX(-50%); } /* contain = ไม่ดันความกว้างคอลัมน์กริด */ }
@media (max-width: 1023px) { .ixs > .hxa { justify-self: stretch !important; width: auto !important; } }