/* หน้าแรก doxzilla.com (ไทย + อังกฤษ) · ส่วนที่เพิ่มจากเปลือก skin2 · RAMS 1 พ.ย. 2569
   ใช้โทเคนของ skin2.css (--bg --bg-alt --ink --ink-soft --line --accent --btn --shadow --gutter --sp --max --r-*) ไม่มีสีใหม่ ไม่มีฟอนต์ใหม่
   ทุกกฎขึ้นต้นด้วย body.hm จึงไม่กระทบหน้าอื่น และชนะกฎเก่าใน style.css แม้ skin2.css ถูกใส่ท้ายสุด
   ถ้า build โดยไม่เปิด skin2 (DOX_SKIN=0) ไฟล์นี้ยังใช้ได้ แต่ตัวแปรสีจะมาจาก style.css */

/* ---- พาดหัว ทดสอบ ก/ข: ตัดสินใน <head> ก่อนวาดหน้า · ไม่มี JS = ก ---- */
body.hm .h1b{display:none}
html[data-h1=B] body.hm .h1a{display:none}
html[data-h1=B] body.hm .h1b{display:inline}
body.hm .hero3 h1{max-width:18ch}
html[lang=en] body.hm .hero3 h1{max-width:15ch}

/* ---- ตัวเลือก "ฉันคือ" ---- */
body.hm .hm-who{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:24px 0 0}
body.hm .hm-who__l{font-size:15px;line-height:1.5;color:var(--ink-soft);margin-right:4px}
body.hm .hm-who__b{font:inherit;font-size:16px;font-weight:500;line-height:1.4;min-height:44px;padding:0 18px;border-radius:var(--r-btn,980px);
  border:1px solid var(--line);background:var(--bg);color:var(--ink);cursor:pointer}
body.hm .hm-who__b:hover{border-color:var(--ink)}
body.hm .hm-who__b[aria-pressed=true]{background:var(--btn);color:var(--btn-ink);border-color:var(--btn)}
html:not(.js) body.hm .hm-who{display:none}

/* ประโยคแรกของแต่ละกลุ่ม + ส่วนที่เห็นเฉพาะบางกลุ่ม (data-for) · ค่าเริ่มต้นและไม่มี JS = พ่อแม่ */
body.hm [data-for]{display:none}
body.hm [data-for~=parent]{display:block}
html[data-who=fan] body.hm [data-for]{display:none}
html[data-who=fan] body.hm [data-for~=fan]{display:block}
html[data-who=teacher] body.hm [data-for]{display:none}
html[data-who=teacher] body.hm [data-for~=teacher]{display:block}
html[data-who=parent] body.hm [data-for]{display:none}
html[data-who=parent] body.hm [data-for~=parent]{display:block}
body.hm .hm-pane{margin:20px 0 0;font-size:clamp(19px,1.05rem + .6vw,24px);line-height:1.55;font-weight:500;color:var(--ink);max-width:38ch}
html[lang=en] body.hm .hm-pane{line-height:1.4}
body.hm .hm-t{margin-top:20px}
body.hm .hm-t .hero3__cta{margin-top:0}

/* ---- บล็อกสมัคร ---- */
body.hm .hm-buy .hero3__price{margin-top:24px}
body.hm .hm-buy .hero3__cta{margin-top:16px}
body.hm .hm-sub{margin-top:10px;font-size:16px}
body.hm .hm-ways{list-style:none;margin:20px 0 0;padding:0;border-top:1px solid var(--line);max-width:60ch}
body.hm .hm-ways li{padding:14px 0;border-bottom:1px solid var(--line)}
body.hm .hm-way__k{display:block;font-size:17px;line-height:1.5;font-weight:500}
body.hm .hm-way__k a{color:var(--accent)}
body.hm .hm-way__n{display:block;margin-top:2px;font-size:15px;line-height:1.6;color:var(--ink-soft)}
body.hm .hm-way__l{display:inline-flex;flex-wrap:wrap;gap:0 16px;margin-left:6px}
body.hm .hm-way__l a{font-weight:500}
body.hm .hm-way__l a::after{content:" ›"}
body.hm .hm-way__k > a::after{content:" ›"}
/* สโตร์ตามเครื่อง: สคริปต์ใน <head> ใส่ class os-ios / os-android · ไม่รู้เครื่องหรือเดสก์ท็อป = แสดงทั้งสองปุ่ม */
.os-ios body.hm [data-os=android],.os-android body.hm [data-os=ios]{display:none}
body.hm .hero3 .terms{margin-top:12px}

/* ---- แถวปกหมุน ---- */
body.hm .hm-shelf{padding-left:0;padding-right:0;padding-top:calc(var(--sp)/2);padding-bottom:calc(var(--sp)/2)}
body.hm .hm-shelf > .row__in{padding:0 var(--gutter);max-width:calc(var(--max) + 2 * var(--gutter))}
body.hm .hero2__in{max-width:var(--max);margin-left:auto;margin-right:auto}
body.hm .trailer{margin-left:auto;margin-right:auto}
body.hm .hm-river{margin-top:32px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
body.hm .hm-river__row{display:flex;gap:12px;width:max-content;animation:hm-drift 70s linear infinite}
body.hm .hm-river__row + .hm-river__row{margin-top:12px}
body.hm .hm-river__row--b{animation-direction:reverse}
body.hm .hm-river:hover .hm-river__row,body.hm .hm-river:focus-within .hm-river__row{animation-play-state:paused}
body.hm .hm-river img{display:block;flex:none;width:148px;height:83px;object-fit:cover;border-radius:12px;box-shadow:var(--shadow)}
@media(min-width:768px){body.hm .hm-river img{width:208px;height:117px}}
@keyframes hm-drift{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){
  body.hm .hm-river{-webkit-mask-image:none;mask-image:none;overflow-x:auto;padding:0 var(--gutter) 8px}
  body.hm .hm-river__row{animation:none;width:max-content}
  body.hm .hm-river__row .dup{display:none}
}
body.hm .hm-shelf .tags{margin-top:24px}

/* ---- ตัวอย่าง 4 เรื่อง (ปกแนวนอน 16:9 + ชื่อไทย) ---- */
body.hm .trailer{text-align:left}
body.hm .trailer .lead{margin-left:0;margin-right:0;max-width:40ch}
body.hm .hm-covers{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px}
@media(min-width:768px){body.hm .hm-covers{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 16px}}
body.hm .hm-covers li{width:auto}
body.hm .hm-covers a{display:block;color:var(--ink);font-size:15px;line-height:1.5}
body.hm .hm-covers img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-img,12px);box-shadow:var(--shadow);margin-bottom:8px}
body.hm .hm-covers span{display:block;text-align:left;font-size:15px;line-height:1.5}
body.hm .trailer__btns{justify-content:flex-start;margin-top:28px;gap:12px 20px}

/* ---- เชิญไป Learning + ภาพโต๊ะอาหาร ---- */
body.hm .hm-split{display:grid;gap:32px}
@media(min-width:860px){body.hm .hm-split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:56px}}
body.hm .hm-split img{display:block;width:100%;height:auto;border-radius:var(--r-frame,20px)}
body.hm .hm-split .pq{margin-top:28px;max-width:34ch}
body.hm .hm-split .pq p{font-size:19px;font-weight:400}
body.hm .hm-split .hm-go{margin-top:20px}

/* ---- ท้ายหน้า ---- */
body.hm .hm-close .hm-line{margin-top:12px;color:var(--ink)}
body.hm .hm-close .hero3__price{margin-top:12px}
body.hm .hm-close .btn{margin-top:4px}
body.hm .hm-close__links{margin-top:20px;font-size:16px;display:flex;flex-wrap:wrap;gap:6px 20px}
body.hm .hm-close__links a{font-weight:500}
body.hm .hm-close .brk{margin-bottom:40px}
body.hm .hm-t .btn{white-space:normal;text-align:center;padding-top:10px;padding-bottom:10px;height:auto}