/*
 * Corehex: ฉากเลื่อนตามการ scroll ของ 3 หมวด
 *  - โรงเรียน : กระดานดำ + กระดาษโน้ต + แอปบนมือถือ
 *  - ร้านค้า  : เครื่อง POS แนวล้ำสมัย
 *  - โกดัง    : iPad แนวล้ำสมัย
 * ใช้ --p (0→1) จาก assets/scrub.js ทุกค่ากำหนดช่วงด้วย clamp
 */
.corehex-page :is(.cs-school, .cs-retail, .cs-ware) {
  position: relative;
  height: 320svh;
  --seg: 0;
}
.corehex-page :is(.cs-school, .cs-retail, .cs-ware) :is(h2, p, span, b, small, strong, em, li, div) {
  font-family: "Anuphan", sans-serif;
}
.cs-school-stage,
.cs-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 600px;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(20px, 4vw, 72px);
  padding: 96px clamp(22px, 6vw, 96px) 40px;
  box-sizing: border-box;
}
.art-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -30px;
  margin: 0;
  text-align: center;
  font-size: 11px !important;
  letter-spacing: 0.04em;
  opacity: 0.6;
}

/* ================= โรงเรียน : กระดานดำ ================= */
.cs-school {
  background: #3a2a1c;
  background-image: repeating-linear-gradient(92deg, rgba(0,0,0,.07) 0 2px, transparent 2px 9px),
    linear-gradient(#4a3524, #36271a);
}
.cs-school-stage {
  isolation: isolate;
  color: #f2f1e8;
}
.board-frame {
  position: absolute;
  inset: 78px clamp(10px, 2.2vw, 40px) 22px;
  z-index: -1;
  border-radius: 10px;
  background:
    radial-gradient(120% 90% at 30% 20%, rgba(255,255,255,.07), transparent 55%),
    radial-gradient(90% 70% at 80% 90%, rgba(255,255,255,.05), transparent 60%),
    #24433a;
  border: 14px solid #a9763f;
  border-image: linear-gradient(135deg, #c18c52, #8c5a2b 45%, #b9834a) 1;
  box-shadow: inset 0 0 70px rgba(0,0,0,.55), 0 24px 60px rgba(0,0,0,.45);
}
.board-frame::after {
  /* ถาดรองชอล์ก */
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -14px;
  height: 10px;
  background: linear-gradient(#c9985c, #8c5a2b);
  border-radius: 0 0 6px 6px;
}
.cs-school-copy {
  padding: 6px clamp(10px, 2vw, 34px) 0 clamp(10px, 2vw, 34px);
  position: relative;
}
.corehex-page .cs-school .chalk-line,
.corehex-page .cs-school .chalk-line span,
.corehex-page .cs-school .chalk-tag,
.corehex-page .cs-school .chalk-tag span {
  font-family: "Mali", "Anuphan", cursive !important;
}
.chalk-tag {
  margin: 0 0 8px;
  font-size: 13px;
  letter-spacing: 0.3em;
  color: #f4d98a;
  opacity: clamp(0, calc(var(--p) * 12), 1);
}
.corehex-page .cs-school h2.chalk-title {
  margin: 0 0 22px;
  font-size: clamp(30px, 4.1vw, 58px);
  line-height: 1.18;
  font-weight: 700;
  color: #fbfbf4;
  text-shadow: 0 0 1px #fff, 0 0 8px rgba(255,255,255,.18);
}
/* ตัวหนังสือชอล์กค่อยๆ ถูกเขียนจากซ้ายไปขวา */
.chalk-line {
  display: inline-block;
  clip-path: inset(-6px calc(100% - var(--w, 0%)) -6px 0);
}
.chalk-title .chalk-line { --w: calc(clamp(0, (var(--p) - 0.03) / 0.17, 1) * 100%); }
.chalk-list {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: grid;
  gap: 14px;
}
.chalk-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: clamp(15px, 1.5vw, 20px);
  line-height: 1.5;
  color: #eceee2;
}
.chalk-list li i {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 3px;
  border: 2px solid #f4d98a;
  border-radius: 50%;
  position: relative;
  opacity: var(--tick, 0);
  transform: scale(calc(.6 + var(--tick, 0) * .4));
}
.chalk-list li i::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 1px;
  width: 6px;
  height: 12px;
  border: solid #f4d98a;
  border-width: 0 2px 2px 0;
  transform: rotate(40deg);
}
.chalk-list li:nth-child(1) { --tick: clamp(0, (var(--p) - 0.2) / 0.06, 1); --w: calc(clamp(0, (var(--p) - 0.2) / 0.16, 1) * 100%); }
.chalk-list li:nth-child(2) { --tick: clamp(0, (var(--p) - 0.36) / 0.06, 1); --w: calc(clamp(0, (var(--p) - 0.36) / 0.16, 1) * 100%); }
.chalk-list li:nth-child(3) { --tick: clamp(0, (var(--p) - 0.52) / 0.06, 1); --w: calc(clamp(0, (var(--p) - 0.52) / 0.16, 1) * 100%); }
.chalk-list .chalk-line { --w: inherit; }
.chalk-note {
  margin: 0;
  font-size: clamp(14px, 1.3vw, 18px);
  color: #f4d98a;
  transform: rotate(-1.2deg);
}
.chalk-note .chalk-line { --w: calc(clamp(0, (var(--p) - 0.68) / 0.18, 1) * 100%); }

.cs-school-art {
  position: relative;
  height: min(70svh, 620px);
  display: grid;
  place-items: center;
}
.cs-phone {
  position: relative;
  z-index: 2;
  width: clamp(190px, 17vw, 250px);
  aspect-ratio: 9 / 18.4;
  border-radius: 34px;
  padding: 9px;
  background: #0f1512;
  box-shadow: 0 0 0 2px #3a4a43, 0 30px 50px rgba(0,0,0,.5);
  transform: translateY(calc((1 - clamp(0, (var(--p) - 0.1) / 0.25, 1)) * 140px)) rotate(calc((1 - clamp(0, (var(--p) - 0.1) / 0.25, 1)) * 8deg));
  opacity: clamp(0, (var(--p) - 0.08) / 0.12, 1);
}
.cs-phone::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 50%;
  translate: -50% 0;
  width: 56px;
  height: 14px;
  border-radius: 8px;
  background: #0f1512;
  z-index: 2;
}
.cs-phone-screen {
  height: 100%;
  border-radius: 26px;
  overflow: hidden;
  background: #fbf6ea;
  color: #2a2118;
  padding: 36px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  box-sizing: border-box;
}
.cs-phone-screen small {
  font-size: 9px;
  letter-spacing: .18em;
  color: #9a6b3a;
}
.cs-phone-screen strong {
  font-size: 20px;
  line-height: 1.1;
  font-weight: 800;
}
.ph-card {
  position: relative;
  border-radius: 14px;
  padding: 12px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #2f6b5a, #1d4a3e);
  min-height: 64px;
}
.ph-card i {
  position: absolute;
  right: 12px;
  bottom: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,.4);
}
.ph-card i:nth-child(2) { right: 26px; }
.ph-card i:nth-child(3) { right: 40px; background: #fff; }
.ph-list { display: grid; gap: 6px; }
.ph-list span {
  display: block;
  height: 14px;
  border-radius: 7px;
  background: repeating-linear-gradient(90deg, #e6dcc6 0 40%, transparent 40% 44%, #eee5d1 44% 100%);
}
.ph-list span:nth-child(2) { width: 82%; }
.ph-list span:nth-child(3) { width: 64%; }
.ph-tiles {
  margin-top: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.ph-tiles img {
  width: 100%;
  aspect-ratio: 1.5;
  object-fit: contain;
  padding: 8px;
  box-sizing: border-box;
  border-radius: 12px;
  background: #f0e6cf;
}
.paper-note {
  position: absolute;
  z-index: 3;
  width: clamp(130px, 12vw, 170px);
  padding: 20px 14px 14px;
  font-size: 13px;
  line-height: 1.4;
  color: #3a2d20;
  background: repeating-linear-gradient(#fffdf4 0 22px, #d9e5ef 22px 23px);
  border-radius: 3px;
  box-shadow: 0 10px 22px rgba(0,0,0,.35);
  transform: translate(calc((1 - var(--in, 0)) * var(--fx, 60px)), calc((1 - var(--in, 0)) * -70px)) rotate(calc(var(--rot, 0deg) + (1 - var(--in, 0)) * 14deg));
  opacity: var(--in, 0);
}
.paper-note b { display: block; font-size: 11px; letter-spacing: .08em; color: #a0562c; margin-bottom: 2px; }
.paper-note .tape {
  position: absolute;
  top: -9px;
  left: 50%;
  translate: -50% 0;
  width: 54px;
  height: 18px;
  background: rgba(244, 217, 138, .75);
  transform: rotate(-3deg);
}
.paper-note.n1 { left: -2%; top: 8%; --rot: -6deg; --fx: -60px; --in: clamp(0, (var(--p) - 0.3) / 0.12, 1); }
.paper-note.n2 { right: -3%; top: 26%; --rot: 5deg; --in: clamp(0, (var(--p) - 0.42) / 0.12, 1); }
.paper-note.n3 { left: 0; bottom: 20%; --rot: 4deg; --fx: -50px; --in: clamp(0, (var(--p) - 0.54) / 0.12, 1); }
.store-row {
  position: absolute;
  left: 50%;
  bottom: 0;
  translate: -50% 0;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border-radius: 18px;
  background: rgba(15, 28, 22, .78);
  border: 1px solid rgba(255,255,255,.14);
  opacity: clamp(0, (var(--p) - 0.7) / 0.12, 1);
  transform: translate(-0px, calc((1 - clamp(0, (var(--p) - 0.7) / 0.12, 1)) * 24px));
  white-space: nowrap;
}
.app-icon-slot {
  width: 62px;
  height: 62px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  text-align: center;
  border: 2px dashed rgba(244, 217, 138, .75);
  color: #f4d98a;
  background: rgba(255,255,255,.04);
}
.app-icon-slot span { font-size: 8px !important; letter-spacing: .06em; line-height: 1.25; padding: 4px; }
.store-badges { display: grid; gap: 6px; }
.store-badge {
  display: flex;
  flex-direction: column;
  padding: 5px 14px 6px;
  border-radius: 9px;
  background: #000;
  border: 1px solid #8a8a8a;
  color: #fff;
  line-height: 1.1;
}
.store-badge small { font-size: 8px !important; letter-spacing: .08em; opacity: .85; }
.store-badge b { font-size: 15px; font-weight: 700; }

/* ================= ร้านค้า / โกดัง : futuristic ================= */
.fx {
  background: #050a14;
  color: #dff3ff;
  --cy: #35e0ff;
  --vi: #8a6bff;
  --lm: #b8ff5c;
}
.cs-retail { --cy: #35e0ff; --vi: #7b6cff; }
.cs-ware { --cy: #7dffb1; --vi: #35b6ff; }
.fx .cs-stage { isolation: isolate; }
.cs-stage.rev { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.fx-floor {
  position: absolute;
  inset: auto -20% -6% -20%;
  height: 62%;
  z-index: -2;
  background:
    linear-gradient(to bottom, #050a14 0%, transparent 40%),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--cy) 35%, transparent) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--cy) 35%, transparent) 0 1px, transparent 1px 64px);
  transform: perspective(520px) rotateX(62deg);
  transform-origin: 50% 100%;
  background-position: calc(var(--p) * -320px) calc(var(--p) * 640px);
  mask-image: linear-gradient(to top, #000 30%, transparent);
  -webkit-mask-image: linear-gradient(to top, #000 30%, transparent);
}
.fx-scan {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(40% 50% at 78% 30%, color-mix(in srgb, var(--vi) 28%, transparent), transparent 70%),
    radial-gradient(35% 45% at 12% 80%, color-mix(in srgb, var(--cy) 20%, transparent), transparent 70%);
}
.fx-scan::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  top: calc(var(--p) * 100%);
  background: linear-gradient(90deg, transparent, var(--cy), transparent);
  box-shadow: 0 0 22px 4px color-mix(in srgb, var(--cy) 55%, transparent);
  opacity: .55;
}
.cs-copy { position: relative; z-index: 2; }
.fx-tag {
  margin: 0 0 12px;
  font-size: 12px;
  letter-spacing: .38em;
  color: var(--cy);
  opacity: clamp(0, calc(var(--p) * 10), 1);
}
.fx-tag::before {
  content: "";
  display: inline-block;
  width: calc(clamp(0, var(--p) * 8, 1) * 44px);
  height: 1px;
  margin-right: 12px;
  vertical-align: middle;
  background: var(--cy);
}
.corehex-page .fx h2 {
  margin: 0 0 18px;
  font-size: clamp(32px, 4.4vw, 62px);
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -.01em;
  background: linear-gradient(90deg, #fff 0 calc(var(--p) * 190% - 20%), rgba(255,255,255,.18) calc(var(--p) * 190% + 5%));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.corehex-page .fx h2 span { font-family: inherit !important; color: transparent; }
.corehex-page .fx .fx-lead {
  max-width: 34em;
  margin: 0 0 20px;
  font-size: clamp(15px, 1.4vw, 19px);
  line-height: 1.7;
  color: #a9c6da;
  opacity: clamp(0, (var(--p) - .12) / .12, 1);
  transform: translateY(calc((1 - clamp(0, (var(--p) - .12) / .12, 1)) * 18px));
}
.fx-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fx-points li {
  position: relative;
  padding: 11px 16px 11px 40px;
  font-size: clamp(14px, 1.25vw, 17px);
  border: 1px solid color-mix(in srgb, var(--cy) 28%, transparent);
  border-radius: 10px;
  background: rgba(10, 24, 40, .6);
  width: fit-content;
  max-width: 100%;
  opacity: var(--o, 0);
  transform: translateX(calc((1 - var(--o, 0)) * -30px));
}
.fx-points li::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 50%;
  width: 9px;
  height: 9px;
  translate: 0 -50%;
  background: var(--cy);
  box-shadow: 0 0 12px var(--cy);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.fx-points li:nth-child(1) { --o: clamp(0, (var(--p) - .28) / .1, 1); }
.fx-points li:nth-child(2) { --o: clamp(0, (var(--p) - .4) / .1, 1); }
.fx-points li:nth-child(3) { --o: clamp(0, (var(--p) - .52) / .1, 1); }

.cs-device {
  position: relative;
  height: min(66svh, 560px);
  display: grid;
  place-items: center;
  perspective: 1400px;
  z-index: 1;
}
.callout {
  position: absolute;
  z-index: 5;
  padding: 6px 12px;
  font-size: 12px;
  letter-spacing: .1em;
  border-radius: 6px;
  color: #06121f;
  background: var(--cy);
  box-shadow: 0 0 22px color-mix(in srgb, var(--cy) 60%, transparent);
  opacity: var(--co, 0);
  transform: translateY(calc((1 - var(--co, 0)) * 14px));
}
.callout::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 14px;
  width: 1px;
  height: 22px;
  background: var(--cy);
}
.callout.c1 { left: 4%; top: 12%; --co: clamp(0, (var(--p) - .56) / .08, 1); }
.callout.c2 { right: 3%; top: 4%; --co: clamp(0, (var(--p) - .66) / .08, 1); }
.callout.c3 { right: 6%; bottom: 8%; --co: clamp(0, (var(--p) - .76) / .08, 1); }
.hud-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 10px;
  letter-spacing: .2em;
  color: var(--cy);
  border-bottom: 1px solid color-mix(in srgb, var(--cy) 25%, transparent);
}
.hud-bar i { width: 7px; height: 7px; border-radius: 50%; background: var(--cy); box-shadow: 0 0 10px var(--cy); }
.hud-bar span { font-family: "Anuphan", sans-serif !important; }

/* --- POS --- */
.pos {
  position: relative;
  width: min(100%, 540px);
  --r: clamp(0, (var(--p) - .02) / .3, 1);
  transform: rotateY(calc((1 - var(--r)) * -38deg + 6deg)) rotateX(calc((1 - var(--r)) * 18deg)) translateY(calc((1 - var(--r)) * 60px)) scale(calc(.86 + var(--r) * .14));
  opacity: clamp(0, var(--p) * 8, 1);
}
.pos-screen {
  border-radius: 18px;
  background: linear-gradient(160deg, #0a1930, #07101f);
  border: 1px solid color-mix(in srgb, var(--cy) 55%, transparent);
  box-shadow: 0 0 0 6px #111c2b, 0 0 0 7px rgba(255,255,255,.12), 0 0 60px color-mix(in srgb, var(--cy) 30%, transparent);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.pos-body { display: grid; grid-template-columns: 1.1fr 1fr; gap: 12px; padding: 12px; }
.pos-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-content: start; }
.pt {
  display: grid;
  place-items: center;
  height: 58px;
  border-radius: 10px;
  font-size: 12px;
  letter-spacing: .04em;
  background: rgba(53, 224, 255, .07);
  border: 1px solid color-mix(in srgb, var(--cy) 30%, transparent);
  opacity: clamp(0, (var(--p) - .2) / .1, 1);
}
.pt.on { background: var(--cy); color: #04121e; font-weight: 700; box-shadow: 0 0 18px color-mix(in srgb, var(--cy) 60%, transparent); }
.pos-list { display: grid; gap: 7px; align-content: start; }
.pos-list p {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 7px 9px;
  font-size: 11px;
  border-radius: 8px;
  background: rgba(255,255,255,.04);
}
.pos-list b { color: var(--cy); }
.pos-list em { font-style: normal; font-size: 10px; padding: 2px 7px; border-radius: 99px; background: rgba(255,255,255,.1); }
.pos-list em.ok { background: rgba(125, 255, 177, .2); color: #8dffb9; }
.pos-bars { display: flex; align-items: flex-end; gap: 6px; height: 66px; padding-top: 6px; }
.pos-bars i {
  flex: 1;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(var(--cy), color-mix(in srgb, var(--vi) 70%, transparent));
  height: calc(var(--h) * clamp(0, (var(--p) - .3) / .3, 1));
}
.pos-neck { width: 90px; height: 34px; margin: 0 auto; background: linear-gradient(#1b2a3c, #0d1622); clip-path: polygon(14% 0, 86% 0, 100% 100%, 0 100%); }
.pos-base { width: 70%; height: 16px; margin: 0 auto; border-radius: 50%; background: #121f2f; box-shadow: 0 16px 30px rgba(0,0,0,.6), 0 0 30px color-mix(in srgb, var(--cy) 22%, transparent); }
.pos-base i { display: none; }
.pos-cust { position: absolute; right: -16px; top: 18%; width: 54px; height: 100px; border-radius: 10px; background: #0b1420; border: 1px solid color-mix(in srgb, var(--cy) 45%, transparent); display: grid; gap: 6px; padding: 10px 8px; align-content: start; }
.pos-cust span { height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--cy) 55%, transparent); }
.pos-cust span + span { width: 60%; background: rgba(255,255,255,.2); }

/* --- iPad --- */
.ipad {
  position: relative;
  width: min(100%, 560px);
  aspect-ratio: 4 / 3;
  --r: clamp(0, (var(--p) - .02) / .3, 1);
  padding: 14px;
  border-radius: 28px;
  background: linear-gradient(145deg, #2a3442, #10161f);
  box-shadow: 0 0 0 1px rgba(255,255,255,.18), 0 40px 70px rgba(0,0,0,.6), 0 0 80px color-mix(in srgb, var(--cy) 22%, transparent);
  transform: rotateY(calc((1 - var(--r)) * 40deg - 7deg)) rotateX(calc((1 - var(--r)) * 20deg)) rotateZ(calc((1 - var(--r)) * -8deg)) translateY(calc((1 - var(--r)) * 60px));
  opacity: clamp(0, var(--p) * 8, 1);
  box-sizing: border-box;
}
.ipad-cam { position: absolute; left: 50%; top: 4px; width: 5px; height: 5px; border-radius: 50%; background: #05080c; translate: -50% 0; }
.ipad-screen { height: 100%; border-radius: 16px; overflow: hidden; background: #06101c; border: 1px solid color-mix(in srgb, var(--cy) 35%, transparent); box-sizing: border-box; }
.ipad-body { display: grid; grid-template-columns: 1.5fr 1fr; gap: 14px; padding: 14px; }
.rack { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; align-content: start; }
.rack i {
  aspect-ratio: 1.15;
  border-radius: 5px;
  background: #0e2236;
  border: 1px solid rgba(255,255,255,.07);
  --on: clamp(0, (var(--p) - .12 - var(--i) * .008) / .08, 1);
  opacity: calc(.25 + var(--on) * .75);
}
.rack i.f { background: color-mix(in srgb, var(--cy) calc(var(--on) * 70%), #0e2236); box-shadow: 0 0 calc(var(--on) * 10px) color-mix(in srgb, var(--cy) 50%, transparent); }
.rack i.p { background: linear-gradient(to top, color-mix(in srgb, var(--cy) calc(var(--on) * 70%), #0e2236) 50%, #0e2236 50%); }
.zones { display: grid; gap: 12px; align-content: start; font-size: 11px; }
.zones p { margin: 0; display: grid; gap: 5px; }
.zones p > i { display: block; height: 7px; border-radius: 4px; background: rgba(255,255,255,.09); position: relative; overflow: hidden; }
.zones p > i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--v) * clamp(0, (var(--p) - .3) / .3, 1)); background: linear-gradient(90deg, var(--cy), var(--vi)); }
.zones .legend { display: block; font-size: 10px; color: #8eb0c8; line-height: 1.8; }
.legend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin: 0 4px 0 6px; vertical-align: -1px; background: var(--cy); }
.legend i.p { background: linear-gradient(to top, var(--cy) 50%, #0e2236 50%); }
.legend i.e { background: #0e2236; border: 1px solid rgba(255,255,255,.25); }
.cs-ware .callout.c1 { left: auto; right: 4%; top: 8%; }
.cs-ware .callout.c2 { right: auto; left: 8%; top: auto; bottom: 10%; }
.cs-ware .callout.c2::after { top: auto; bottom: 100%; }

/* ---------- ปุ่ม Scroll down ให้อยู่กึ่งกลาง ลูกศรอยู่ใต้ข้อความ ---------- */
.corehex-page .scroll-cue {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: fit-content;
  margin: 48px auto 0;
  text-align: center;
}
.corehex-page .scroll-cue span { text-align: center; }

/* ---------- มือถือ / แท็บเล็ต ---------- */
@media (max-width: 900px) {
  .corehex-page :is(.cs-school, .cs-retail, .cs-ware) { height: 300svh; }
  .cs-school-stage,
  .cs-stage {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    padding: 84px 20px 22px;
    min-height: 0;
  }
  .cs-stage.rev .cs-copy { order: -1; }
  .board-frame { inset: 66px 6px 12px; border-width: 9px; }
  .cs-school-copy { padding: 8px 14px 0; }
  .chalk-list { gap: 6px; margin-bottom: 8px; }
  .chalk-list li { font-size: 13px; }
  .chalk-note { display: none; }
  .corehex-page .cs-school h2.chalk-title { font-size: 26px; margin-bottom: 10px; }
  .cs-school-art { height: 100%; min-height: 0; }
  .cs-phone { width: 128px; }
  .cs-phone-screen { padding: 26px 8px 8px; gap: 5px; }
  .cs-phone-screen strong { font-size: 13px; }
  .ph-card { min-height: 38px; font-size: 9px; padding: 7px; }
  .ph-list { display: none; }
  .ph-tiles img { padding: 4px; }
  .paper-note { width: 104px; font-size: 10px; padding: 14px 8px 8px; }
  .paper-note.n1 { left: 0; top: 2%; }
  .paper-note.n2 { right: 0; top: 14%; }
  .paper-note.n3 { left: 0; bottom: 22%; }
  .store-row { padding: 6px 8px; gap: 8px; bottom: 0; }
  .app-icon-slot { width: 42px; height: 42px; border-radius: 11px; }
  .app-icon-slot span { font-size: 6px !important; }
  .store-badge { padding: 3px 9px 4px; }
  .store-badge b { font-size: 12px; }
  .art-caption { display: none; }
  .corehex-page .fx h2 { font-size: 28px; margin-bottom: 8px; }
  .corehex-page .fx .fx-lead { font-size: 13px; margin-bottom: 10px; line-height: 1.55; }
  .fx-points { gap: 6px; }
  .fx-points li { font-size: 12px; padding: 7px 10px 7px 30px; }
  .fx-points li::before { left: 11px; }
  .fx-points li:nth-child(3) { display: none; }
  .cs-device { height: 100%; min-height: 0; align-items: start; }
  .pos, .ipad { width: min(100%, 360px); }
  .pt { height: 34px; font-size: 10px; }
  .pos-list p { font-size: 9px; padding: 4px 6px; }
  .callout { font-size: 10px; padding: 4px 8px; }
  .pos-cust { display: none; }
  .pos-body, .ipad-body { padding: 8px; gap: 8px; }
  .zones { font-size: 9px; gap: 7px; }
}
@media (max-width: 520px) {
  .callout.c3 { display: none; }
  .pos-bars { height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .corehex-page :is(.cs-school, .cs-retail, .cs-ware) { height: auto; }
  .cs-school-stage, .cs-stage { position: relative; height: auto; min-height: 100svh; }
}

/* ---- ปรับรอบ 2: เติมพื้นที่หน้าจออุปกรณ์ / กันซ้อน ---- */
.cs-school-art { padding-bottom: 96px; box-sizing: border-box; height: min(76svh, 660px); }
.cs-phone { width: clamp(180px, 15vw, 224px); }
.pos-screen, .ipad-screen { display: flex; flex-direction: column; }
.pos-body, .ipad-body { flex: 1; min-height: 0; }
.pos-grid { grid-auto-rows: 1fr; align-content: stretch; }
.pt { height: auto; }
.pos-list { grid-template-rows: auto auto auto 1fr; }
.pos-list p { padding: 12px 10px; }
.pos-bars { height: auto; min-height: 60px; }
.rack { grid-auto-rows: 1fr; align-content: stretch; }
.rack i { aspect-ratio: auto; }
.zones { align-content: space-between; padding: 4px 0; }
.zones p:not(.legend) > i { display: block; }
.zones .legend > i { display: inline-block; height: 9px; background: var(--cy); }
.zones .legend > i.p { background: linear-gradient(to top, var(--cy) 50%, #0e2236 50%); }
.zones .legend > i.e { background: #0e2236; }
.zones .legend > i::after { content: none; }
.callout.c1 { left: -2%; top: auto; bottom: 16%; }
.callout.c1::after { top: auto; bottom: 100%; }
@media (max-width: 900px) {
  .cs-school-art { padding-bottom: 64px; }
  .pos-list p { padding: 5px 6px; }
}

/* ---- ปรับรอบ 3 ---- */
.cs-ware .callout.c1 { bottom: auto; }
.cs-ware .callout.c2 { top: auto; }
@media (max-width: 900px) {
  .cs-stage.rev { grid-template-columns: 1fr; }
  .pos-list p { white-space: nowrap; }
  .pos-bars { display: none; }
  .pos-body { grid-template-columns: 1fr 1.2fr; }
  .pt { font-size: 9px; }
}
.corehex-page .core-product-hero .scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 30px;
  translate: -50% 0;
  margin: 0;
}
@media (max-width: 900px) { .corehex-page .core-product-hero .scroll-cue { bottom: 22px; } }
@media (max-width: 900px) { .zones .legend, .callout.c1 { display: none; } }

/* ---- หมายเหตุ: ภาพประกอบ ไม่ใช่ระบบจริง ---- */
.corehex-page .demo-note { margin: 18px 0 0; max-width: 34em; padding-left: 14px; border-left: 2px solid var(--cy, #f4d98a); font-size: 13px; line-height: 1.65; color: #8eb0c8; }
.corehex-page .demo-note span { font-family: "Anuphan", sans-serif; }
.corehex-page .demo-note.chalk { color: #d9d6c4; border-color: #f4d98a; }
.ph-tiles i { display: block; aspect-ratio: 1.5; border-radius: 12px; background: #f0e6cf; }
.ph-tiles i:nth-child(1) { background: #cfe5da; }
.ph-tiles i:nth-child(2) { background: #f3dcb8; }
.ph-tiles i:nth-child(3) { background: #e9d3d0; }
@media (max-width: 900px) { .corehex-page .demo-note { display: none; } }