/* ===== page ===== */
/* ================= RESTAURANT SEGMENT PAGE (prefix .rs-) ================= */
/* page tokens: hero disc, stage glow/plate, timeline blocks (dark fills so white labels pass AA), small orange text */
:root{
  --rs-disc:radial-gradient(circle at 34% 28%,#289FFF 0%,#289FFF 34%,#008CFF 76%,#008CFF 100%);
  --rs-disc-shadow:0 60px 100px -46px rgba(0,140,255,.8);
  --rs-glow:rgba(0,140,255,.30);
  --rs-plate:radial-gradient(circle at 50% 42%,#FFFFFF 0%,#E4EEF8 55%,#E4EEF8 100%);   /* dark mode: see "screen card" below */
  --rs-blk:linear-gradient(135deg,#008CFF,#008CFF);
  --rs-orange-t:#FF6100;
  --rs-green-t:#008CFF;              /* +amounts on the white slip: 5.4:1 */
  --rs-dim:#000000;                  /* inactive chapter text: 5:1 on the ice ground (core --muted is ~3.4:1) */
  --rs-rim:inset 0 2px 0 rgba(255,255,255,.4);
}
.rs-cta{--rs-fade:clamp(40px,6vw,96px)}   /* stays inside the section's top padding, so the card itself never fades */
/* light mode: the core heading gradients fade to sky #289FFF (≈1.5:1 on the ice ground) — keep the lightest stop at #008CFF (≥3:1, large text) */
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]) .rs-hero h1 em{background-image:linear-gradient(90deg,#008CFF 0%,#008CFF 45%,#008CFF 70%,#008CFF 100%)}
  :root:not([data-theme="dark"]) .rs-ov .h-sec em,:root:not([data-theme="dark"]) .rs-try .h-sec em,:root:not([data-theme="dark"]) .rs-feat .h-sec em{background-image:linear-gradient(90deg,#008CFF,#008CFF,#008CFF)}
}
:root[data-theme="light"] .rs-hero h1 em{background-image:linear-gradient(90deg,#008CFF 0%,#008CFF 45%,#008CFF 70%,#008CFF 100%)}
:root[data-theme="light"] .rs-ov .h-sec em,:root[data-theme="light"] .rs-try .h-sec em,:root[data-theme="light"] .rs-feat .h-sec em{background-image:linear-gradient(90deg,#008CFF,#008CFF,#008CFF)}
/* calmer ambient motion: heading sheens play twice then rest; one bobbing chip in the hero; still CTA bubble */
.rs-hero h1 em,.rs-ov .h-sec em,.rs-try .h-sec em,.rs-feat .h-sec em{animation-iteration-count:2}
.rs-sprite{position:absolute;width:0;height:0;overflow:hidden}
/* CTA fills: the same deep orange / blue as the home page so white labels pass AA (kit request: make this core .btn.primary) */
.rs-hero .btn.primary,.rs-try .btn.primary,.rs-cta .btn.primary{background:linear-gradient(135deg,#FF6100,#FF6100);font-weight:700}
.rs-try .btn.blue{background:linear-gradient(135deg,#008CFF,#008CFF);font-weight:700}
/* secondary glass buttons on light grounds get a visible edge */
.rs-hero .btn:not(.primary),.rs-try .btn:not(.primary):not(.blue){border-color:var(--line);box-shadow:inset 0 1px 0 var(--spec),0 8px 22px -14px rgba(0,58,114,.35)}
/* Thai is never letter-spaced (tracking pulls vowels and tone marks off their consonants); Latin kicker labels keep a little */
#main .kick,#main .plabel,#main .kick b{letter-spacing:0}
#main .kick b[lang="en"]{letter-spacing:.02em}
/* Thai copy: avoid orphans and lonely short words at line ends */
.rs-hero .lead,.rs-ov .lead,.rs-list li,.rs-todo li,#faq .faq p,.rs-hint,.rs-trust{text-wrap-style:pretty}
.rs-feat .center .lead,.rs-step-sub{text-wrap-style:balance}
/* "ตัวอย่าง" tag on illustrative data (same look as the home page tag) */
.rs-eg{display:inline-block;font-style:normal;font-size:11px;font-weight:700;letter-spacing:.02em;line-height:1.5;padding:0 7px;border-radius:999px !important;background:var(--orange-l);color:var(--rs-orange-t);vertical-align:middle;white-space:nowrap}
.rs-eg.on-blue{background:#fff;color:#008CFF}

/* ---------- hero ---------- */
.rs-copy{min-width:0}
.rs-kick{margin-top:18px}
.rs-hero h1 em{display:block;white-space:nowrap}
@media (max-width:359px){.rs-hero h1 em{white-space:normal}}
.rs-hero .lead{max-width:50ch}
.rs-hero .rs-pts{margin-top:20px;max-width:600px}
.rs-hero .hero-ctas{margin-top:26px}
.rs-trust{display:inline-flex;align-items:center;gap:14px;margin-top:26px;padding:6px 18px 6px 6px;border-radius:22px !important;font-size:15px;line-height:1.45;color:var(--mid);text-decoration:none;transition:background .3s,transform .4s var(--spring)}
.rs-trust:hover{background:var(--glass-bg);transform:translateY(-2px)}
.rs-trust b{color:var(--ink);font-weight:600}
.rs-trust-s{display:none}
.rs-faces{display:flex;gap:6px;flex:none}
.rs-faces img{width:44px;height:44px;border-radius:12px !important;object-fit:contain;padding:4px;background:#fff;border:1px solid rgba(0,58,114,.08);box-shadow:0 6px 14px -8px rgba(0,58,114,.55)}

/* visual: person rises out of a brand disc. Mask = everything above the disc's centre line + the disc itself,
   so only the part below the centre follows the curve (sleeves above the equator are never trimmed) */
.rs-art{position:relative;width:min(100%,440px);margin-inline:auto;container-type:inline-size}
.rs-disc,.rs-halo{position:absolute;left:4%;right:4%;bottom:0;aspect-ratio:1;border-radius:50% !important}
.rs-disc{background:var(--rs-disc);box-shadow:var(--rs-disc-shadow),inset 0 -24px 60px rgba(0,30,70,.25),var(--rs-rim)}
.rs-art picture{display:block}
.rs-halo{left:-5%;right:-5%;bottom:-9%;border:1px solid var(--glass-edge);background:conic-gradient(from 200deg,transparent 0 30%,rgba(255,255,255,.55) 42%,transparent 55% 100%);-webkit-mask:radial-gradient(circle,transparent 69.5%,#000 70%);mask:radial-gradient(circle,transparent 69.5%,#000 70%);opacity:.8}
.rs-person{position:relative;z-index:1;width:100%;height:auto;
  -webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - 46cqw) no-repeat,radial-gradient(circle 46cqw at 50% calc(100% - 46cqw),#000 99%,transparent 100%) no-repeat;
  mask:linear-gradient(#000 0 0) top/100% calc(100% - 46cqw) no-repeat,radial-gradient(circle 46cqw at 50% calc(100% - 46cqw),#000 99%,transparent 100%) no-repeat;
  animation:rise 1.2s var(--ease) both}
/* opaque fill so the photo behind never tints the chip */
.rs-art .o-chip{white-space:nowrap;background:color-mix(in srgb,var(--card) 90%,transparent)}
.rs-art .o-chip i{min-width:34px;height:30px;padding:0 8px;border-radius:999px !important;display:grid;place-items:center;font-style:normal;font-size:12px;font-weight:700;color:#fff;background:#008CFF}
/* chips sit on the empty sides of the disc, never on her face, hands or the tablet */
.rs-art .o-chip.c1{left:-20%;top:46%}
.rs-art .o-chip.c2{right:-32%;top:24%;animation:none}
.rs-art .o-chip.c2 i{background:#FF6100}
.rs-mini{position:absolute;z-index:2;left:-24%;bottom:2%;width:220px;padding:12px 14px 14px;border-radius:20px !important;background:color-mix(in srgb,var(--card) 90%,transparent)}
.rs-mini small{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--mid);margin-bottom:8px}
.rs-mini-row{display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--mid);line-height:1.2}
.rs-mini-row + .rs-mini-row{margin-top:7px}
.rs-mini-row i{position:relative;height:10px;border-radius:6px !important;background:var(--ground-2)}
.rs-mini-row b{position:absolute;top:0;bottom:0;border-radius:6px !important;background:linear-gradient(90deg,var(--blue),#008CFF);transform-origin:left;animation:rs-grow 1.1s var(--ease) both}
.rs-mini-row b.or{background:linear-gradient(90deg,var(--orange-2),var(--orange-3))}
.rs-mini .m1{left:10%;width:24%;animation-delay:.5s}.rs-mini .m2{left:58%;width:26%;animation-delay:.65s}
.rs-mini .m3{left:34%;width:24%;animation-delay:.8s}
.rs-mini .m4{left:4%;width:52%;animation-delay:.95s}.rs-mini .m5{left:56%;width:32%;animation-delay:1.1s}
/* the cut-out is 416px wide: keep it at or above ~1.1x so it stays crisp */
@media (min-width:901px){.rs-art{width:min(100%,376px)}}
/* ≤900px: the person is the whole picture (every side is arm, hair or tablet), so the chips step out:
   the schedule card becomes a caption card under the disc and the floating chips are left to the wider layout */
@media (max-width:900px){
  .rs-art{width:min(86%,360px);margin-top:12px}
  .rs-art .o-chip{display:none}
  .rs-mini{position:relative;left:auto;right:auto;bottom:auto;margin:-28px auto 0;width:min(260px,82%)}
}
@media (min-width:700px) and (max-width:900px){
  .rs-hero .hero2{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
  .rs-art{width:100%;margin-top:0}
  .rs-halo{left:-1%;right:-1%;bottom:-5%}
}
@media (max-width:560px){
  .rs-art{width:78%}
  .rs-mini{width:min(240px,92%);padding:10px 12px}
  .rs-trust{font-size:14px}
  .rs-trust-l{display:none}
  .rs-trust-s{display:inline}
  /* stacked buttons: one even column instead of a ragged left-aligned stack */
  .rs-hero .hero-ctas .btn,.rs-sim-cta .btn{flex:1 1 100%}
}

/* ---------- customers: heading + one-line overview, then the restaurant logo marquee (proof) ---------- */
.rs-ov{padding-top:clamp(40px,5vw,72px);padding-bottom:clamp(32px,4vw,56px)}
.rs-ov .kick{white-space:nowrap}
.rs-ov-head{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:16px clamp(32px,5vw,72px);align-items:end}
.rs-ov-head .h-sec{max-width:14ch}
.rs-ov-head .lead{margin-top:0;max-width:46ch}
/* the marquee stays inside the content column (edge fades from core), so the side dock never sits on it */
.rs-mq-wrap{position:relative;margin-top:clamp(28px,3.5vw,44px)}
.rs-mq{margin-top:0}
.rs-mq .logo-tile{width:124px;height:76px;padding:8px}
.rs-mq .logo-tile img{max-height:60px;max-width:100%;height:auto}
/* keyboard focus inside or the toggle pauses the strip */
.rs-mq.paused .mq-track,.rs-mq-wrap:focus-within .mq-track{animation-play-state:paused}
.rs-mq-btn{display:grid;place-items:center;width:44px;height:44px;margin:10px 0 0 auto;border-radius:50% !important;border:1px solid var(--line);background:var(--card);color:var(--mid);box-shadow:var(--glass-shadow);transition:transform .35s var(--spring)}
.rs-mq-btn:active{transform:scale(.9)}
/* icon: two bars = pause, triangle = play */
.rs-mq-btn::before{content:"";width:12px;height:14px;background:linear-gradient(90deg,currentColor 35%,transparent 35% 65%,currentColor 65%)}
.rs-mq-btn[aria-pressed="true"]::before{width:13px;margin-left:3px;background:currentColor;clip-path:polygon(0 0,100% 50%,0 100%)}
@media (prefers-reduced-motion:reduce){
  /* no motion: show every logo once, wrapped and centred, instead of a frozen strip */
  .rs-mq{-webkit-mask-image:none;mask-image:none}
  .rs-mq .mq-track{flex-wrap:wrap;justify-content:center;width:auto;animation:none}
  .rs-mq .mq-track > [aria-hidden="true"]{display:none}
  .rs-mq-btn{display:none}
}
@media (max-width:1020px){.rs-ov-head{grid-template-columns:1fr;align-items:start}}


.rs-try{padding-top:clamp(40px,5vw,72px);padding-bottom:clamp(48px,6vw,80px);background:linear-gradient(180deg,transparent 0,var(--blue-xl) 14%,var(--blue-xl) 70%,transparent 100%)}
.rs-try .sec-head{display:block}
.rs-try-lead{max-width:60ch}
.rs-try .plabel,.rs-try .note{color:var(--mid)}
.rs-ph{font-size:17px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.rs-sim{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:18px;margin-top:36px;align-items:start}
.rs-ctl{display:grid;gap:24px;min-width:0}
.rs-ctl-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.rs-reset{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:6px 16px 6px 12px;border-radius:999px !important;border:1px solid var(--line);background:var(--card);font-size:14px;font-weight:600;color:var(--blue-2);transition:transform .35s var(--spring),border-color .3s}
.rs-reset::before{content:"";width:16px;height:16px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12a8 8 0 1 0 2.3-5.6'/%3E%3Cpath d='M4 4v4h4'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12a8 8 0 1 0 2.3-5.6'/%3E%3Cpath d='M4 4v4h4'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .5s var(--ease)}
.rs-reset:hover{border-color:var(--blue-sky)}
.rs-reset:hover::before{transform:rotate(-200deg)}
.rs-field{min-width:0}
.rs-flab{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:16px;font-weight:500}
.rs-val{flex:none;font-weight:700;color:var(--blue-2);font-variant-numeric:tabular-nums}
.rs-ctl .stepper button{width:44px;height:44px}
.rs-ctl .stepper button:disabled{opacity:.35;cursor:not-allowed}
/* stepper value: same look as core .stepper output, but plain text (an <output> is a live region and was read twice) */
.rs-br-num{min-width:60px;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}
.rs-hint{margin-top:8px;font-size:13px;line-height:1.5;color:var(--mid)}
.rs-hint.warn{color:var(--rs-orange-t)}
.rs-hint:empty{display:none}
.rs-seg{display:flex;width:100%;margin-top:10px}
.rs-seg button{flex:1 1 auto;min-height:44px;padding-inline:10px;font-size:14px}
.rs-evts{border:0;margin:0;padding:0;min-width:0}
.rs-evts legend{padding:0}
.rs-evt-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px}
.rs-evt-grid label{position:relative;display:flex;align-items:center;gap:10px;min-height:50px;padding:10px 14px;border-radius:18px !important;font-size:14px;font-weight:500;line-height:1.35;cursor:pointer;transition:transform .35s var(--spring),box-shadow .3s}
.rs-evt-grid label:hover{transform:translateY(-2px)}
/* the real checkbox covers the whole chip (big tap target); .rs-tick is its visual */
.rs-evt-grid input{position:absolute;inset:0;z-index:2;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.rs-tick{flex:none;width:22px;height:22px;border-radius:7px !important;border:1.5px solid var(--muted);background:var(--card);display:grid;place-items:center;transition:background .3s,border-color .3s,transform .35s var(--spring)}
.rs-tick::after{content:"";width:10px;height:5px;border-left:2.2px solid #fff;border-bottom:2.2px solid #fff;transform:translateY(-1px) rotate(-45deg) scale(0);transition:transform .35s var(--spring)}
.rs-evt-grid label:has(input:checked){box-shadow:inset 0 1px 0 var(--spec),0 0 0 2px var(--blue),var(--glass-shadow)}
.rs-evt-grid label:has(input:checked) .rs-tick{background:#008CFF;border-color:#008CFF;transform:scale(1.06)}
.rs-evt-grid label:has(input:checked) .rs-tick::after{transform:translateY(-1px) rotate(-45deg) scale(1)}
.rs-evt-grid label:has(input:focus-visible){outline:3px solid var(--orange);outline-offset:2px}
/* live result bar: only where the results sit below the controls */
.rs-live{display:none}

.rs-out{min-width:0;display:grid;gap:14px;scroll-margin-top:96px}
.rs-out:focus{outline:none}
/* headline result: jobs the system takes over (green check), headcount as a meta line */
.rs-sum{display:flex;align-items:center;gap:14px;padding:16px 22px;border-radius:var(--r) !important}
.rs-ok{flex:none;width:44px;height:44px;border-radius:50% !important;background:var(--green-l) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%230F7A41' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/22px no-repeat}
.rs-sum-main{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;min-width:0;font-weight:600;color:var(--ink)}
.rs-sum-main b{font-size:clamp(30px,3vw,40px);line-height:1;letter-spacing:-.03em}
.rs-sum-l{font-size:15px;font-weight:500;color:var(--mid)}
.rs-sum-meta{margin-left:auto;flex:none;font-size:15px;color:var(--mid)}
.rs-sum-meta b{font-weight:700;color:var(--ink)}
/* branch strip above the timeline: + / − visibly adds or removes a branch; branch 2 lights up when it covers a sudden leave */
.rs-brs{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.rs-brs li{display:flex;align-items:baseline;gap:6px;padding:5px 12px;border-radius:999px !important;border:1px solid var(--line);background:var(--card);font-size:13px;line-height:1.4;color:var(--mid)}
.rs-brs b{font-weight:700;color:var(--ink)}
.rs-brs li.cur{border-color:transparent;box-shadow:0 0 0 2px var(--blue)}
.rs-brs li.move{border-color:transparent;background:var(--orange-l);box-shadow:0 0 0 2px var(--rs-orange-t);animation:rs-pulse 1.4s var(--ease) 3}
.rs-brs em{font-style:normal;font-weight:600;color:var(--rs-orange-t)}
.rs-brs li.more{font-weight:600}
.rs-brs li.new{animation:pop .45s var(--spring) both}
@keyframes rs-pulse{50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--orange) 25%,transparent)}}
.rs-res{display:grid;gap:14px}
.rs-day{--lbl:140px;padding:clamp(18px,2.4vw,26px)}
.rs-day-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.rs-day-head .pill{flex:none}
.rs-day-h{margin-top:4px;font-size:clamp(18px,1.9vw,22px)}
/* hour labels sit centred on their grid lines (0 / 25 / 50 / 75 / 100% of the track); the first and last align to the track ends */
.rs-scale{position:relative;height:18px;margin:18px 0 6px;font-size:12px;line-height:18px;color:var(--mid);font-variant-numeric:tabular-nums}
.rs-scale span{position:absolute;top:0;left:calc(var(--lbl) + (100% - var(--lbl)) * var(--p,0));transform:translateX(-50%)}
.rs-scale span:nth-child(1){transform:none}
.rs-scale span:nth-child(2){--p:.25}.rs-scale span:nth-child(3){--p:.5}.rs-scale span:nth-child(4){--p:.75}
.rs-scale span:nth-child(5){--p:1;transform:translateX(-100%)}
.rs-rows{display:grid;gap:10px}
.rs-row{display:grid;grid-template-columns:var(--lbl) minmax(0,1fr);align-items:center;animation:pop .5s var(--spring) both;animation-delay:calc(var(--i,0) * 60ms)}
.rs-row > span{padding-right:12px;font-size:13px;font-weight:600;line-height:1.3}
.rs-row small{display:block;font-size:12px;font-weight:500;color:var(--mid)}
.rs-track{position:relative;height:40px;border-radius:12px !important;background:var(--ground-2) linear-gradient(90deg,var(--line) 1px,transparent 1px) 0 0/12.5% 100%}
.rs-blk{position:absolute;top:5px;bottom:5px;left:var(--l);width:var(--w);border-radius:9px !important;color:#fff;font-size:11px;font-style:normal;font-weight:700;display:flex;align-items:center;justify-content:center;padding-inline:4px;overflow:hidden;white-space:nowrap;box-shadow:0 8px 16px -10px rgba(0,95,184,.9);transform-origin:left;animation:rs-grow .7s var(--ease) both}
/* fills (also used by the legend swatches): dark enough for 11px white labels in both themes */
.rs-blk,.rs-sw{background:var(--rs-blk)}
.rs-blk.or,.rs-sw.or{background:linear-gradient(135deg,#FF6100,#FF6100)}
.rs-blk.or{box-shadow:0 8px 16px -10px rgba(194,65,12,.9)}
.rs-blk.ot,.rs-sw.ot{background:repeating-linear-gradient(135deg,#FF6100 0 5px,#FF6100 5px 10px)}
.rs-blk.in,.rs-sw.in{background:linear-gradient(135deg,#008CFF,#008CFF)}
.rs-blk.in{box-shadow:0 8px 16px -10px rgba(11,110,58,.9)}
.rs-blk.lv,.rs-sw.lv{background:var(--red-l);border:1.5px dashed var(--red)}
.rs-blk.lv{color:var(--red);box-shadow:none}
.rs-legend{margin-top:16px;font-size:13px}
.rs-two{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:14px;align-items:start}
.rs-todo-wrap{padding:clamp(18px,2.4vw,26px)}
.rs-todo{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px;counter-reset:t}
.rs-todo.still li{animation:none}
.rs-todo li{counter-increment:t;display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;font-size:14px;line-height:1.5;color:var(--mid);animation:pop .45s var(--spring) both;animation-delay:calc(var(--i,0) * 40ms)}
.rs-todo li::before{content:counter(t);width:28px;height:28px;border-radius:50% !important;display:grid;place-items:center;background:var(--blue-l);color:var(--blue-2);font-size:13px;font-weight:700}
.rs-todo li.hot::before{background:var(--orange-l);color:var(--rs-orange-t)}
.rs-todo b{color:var(--ink);font-weight:600}
.rs-key{display:flex;align-items:center;gap:8px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-size:13px;color:var(--mid)}
.rs-key i{flex:none;width:14px;height:14px;border-radius:50% !important;background:var(--orange-l);box-shadow:inset 0 0 0 2px var(--rs-orange-t)}
/* deeper blue header so white text passes AA in both themes (core .slip-top fades to #008CFF) */
.rs-slip .slip-top{background:linear-gradient(135deg,#008CFF,#008CFF)}
.rs-slip .slip-top small{opacity:1}
.rs-slip .slip-top b{display:block;margin-top:2px}
.rs-slip .row span:first-child small{display:block;font-size:12px;font-weight:500;color:var(--mid)}
.rs-slip .row.plus span:last-child{color:var(--rs-green-t)}
.rs-slip-empty{padding:18px 24px 24px;font-size:14px;color:var(--mid)}
.rs-slip-empty .btn{margin-top:14px}
.rs-empty{display:grid;justify-items:center;gap:10px;padding:44px 24px;text-align:center}
.rs-empty svg{width:60px;height:60px;padding:15px;border-radius:20px !important;background:var(--orange-l);stroke:var(--orange);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.rs-empty h3{font-size:20px}
.rs-empty p{max-width:40ch;color:var(--mid)}
.rs-empty .btn{margin-top:6px}
/* next step right after the results */
.rs-sim-cta{margin-top:4px}
@media (max-width:1020px){
  .rs-sim{grid-template-columns:1fr}
  /* solid bar: nothing behind it ghosts through */
  .rs-live{position:sticky;bottom:12px;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:6px 6px 6px 18px;border-radius:26px !important;font-size:14px;font-weight:600;line-height:1.35;color:var(--ink);text-decoration:none;background:var(--card);box-shadow:0 0 0 1px var(--line),0 18px 40px -18px rgba(0,58,114,.55)}
  .rs-live-t,.rs-live-s{min-width:0}
  .rs-live-s{display:none}
  .rs-live-go{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 16px;border-radius:999px !important;background:#008CFF;color:#fff;font-size:14px}
  .rs-live-go::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg)}
}
/* tablets: the two sliders side by side so the controls panel is about half as tall */
@media (min-width:621px) and (max-width:1020px){
  .rs-ctl{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px}
  .rs-ctl > *{grid-column:1/-1}
  .rs-ctl > .rs-f2{grid-column:auto}
}
@media (max-width:700px){.rs-two{grid-template-columns:1fr}}
@media (max-width:560px){
  .rs-day{--lbl:0px}
  .rs-row{grid-template-columns:1fr;gap:4px}
  .rs-row > span{display:flex;gap:8px;align-items:baseline}
  .rs-row small{display:inline}
  .rs-blk.ot .rs-bt{display:none}       /* 1-hour OT block is ~18px wide here: stripes + legend identify it */
  .rs-sum{gap:12px;padding:14px 16px}
  .rs-ok{width:38px;height:38px;background-size:19px}
  .rs-sum-l,.rs-sum-meta{font-size:13px}
  .rs-sum-meta{text-align:right}
  .rs-seg button{padding-inline:6px;font-size:13px}
  .rs-evt-grid{grid-template-columns:1fr;gap:6px}
  .rs-evt-grid label{min-height:48px;padding:8px 14px;border-radius:16px !important}
  .rs-live{font-size:13px;padding-left:14px}
  .rs-live-t{display:none}
  .rs-live-s{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}

/* ---------- features: sticky scroll story (desktop) / swipe cards (tablets) / compact list (phones) ---------- */
.rs-feat{padding-top:clamp(40px,5vw,72px);padding-bottom:clamp(24px,3vw,40px)}
.rs-feat .h-sec{max-width:22ch}
.rs-story{position:relative;margin-top:clamp(36px,5vw,64px)}
.rs-no{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:700;letter-spacing:.12em;color:var(--blue-2);font-variant-numeric:tabular-nums}
.rs-no::after{content:"";width:36px;height:2px;border-radius:2px !important;background:linear-gradient(90deg,var(--blue),var(--orange))}
.rs-step h3{margin-top:10px;font-size:clamp(22px,2.4vw,30px);line-height:1.25}
.rs-step-sub{margin-top:8px;font-size:17px;font-weight:600;letter-spacing:0;line-height:1.45;color:var(--blue-2)}
.rs-list{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px}
.rs-list li{position:relative;padding-left:28px;font-size:16px;line-height:1.6;color:var(--mid)}
.rs-list li::before{content:"";position:absolute;left:4px;top:10px;width:8px;height:8px;border-radius:50% !important;background:var(--blue);box-shadow:0 0 0 4px var(--blue-l)}
.rs-fig{margin:0}
.rs-nav{display:none}
.rs-more{display:none}
/* phones and the desktop story: heading, sub-heading and the first bullet; the rest opens with "ดูรายละเอียด" (all text stays in the DOM) */
@media (max-width:620px),(min-width:1024px) and (min-height:640px){
  .rs-step:not(.open) .rs-list li:nth-child(n+2){display:none}
  .rs-more{justify-self:start;align-self:flex-start;display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:6px;padding:0 4px;border:0;background:none;font-size:15px;font-weight:600;color:var(--blue-2)}
  .rs-more::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .3s var(--ease)}
  .rs-more[aria-expanded="true"]::after{transform:translateY(2px) rotate(-135deg)}
}
@media (min-width:1024px) and (min-height:640px){
  .rs-story{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(48px,6vw,96px)}
  .rs-steps{padding-block:4vh}
  .rs-step{min-height:52vh;display:flex;flex-direction:column;justify-content:center;transform:translateY(10px) scale(.98);transform-origin:left center;transition:transform .8s var(--ease)}
  .rs-step:last-child{min-height:44vh}
  .rs-step.on{transform:none}
  /* inactive steps: number and headings dim (large text stays ≥3:1), body copy turns grey (--rs-dim ≥4.5:1) so the lit chapter stands out */
  .rs-no,.rs-step h3,.rs-step-sub{transition:opacity .6s var(--ease)}
  .rs-list li{transition:color .6s var(--ease)}
  .rs-step:not(.on) .rs-no,.rs-step:not(.on) h3,.rs-step:not(.on) .rs-step-sub{opacity:.6}
  .rs-step:not(.on) .rs-list li{color:var(--rs-dim)}
  .rs-step:not(.on) .rs-list li::before{background:var(--rs-dim);box-shadow:none}
  /* each step keeps its own image description in reading order; the sticky stage (aria-hidden) shows the pictures */
  .rs-fig{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  .rs-stage{align-self:start;justify-self:center;width:100%;max-width:480px;position:sticky;top:max(104px,calc(50vh - 260px));display:flex;justify-content:center}   /* as wide as the frame, so the rail hugs it */
  .rs-frame{position:relative;width:100%;max-width:480px;aspect-ratio:1;border-radius:44px !important}
  .rs-frame::before{content:"";position:absolute;inset:14px;border-radius:32px !important;background:var(--rs-plate)}
  .rs-glow{position:absolute;inset:16%;border-radius:50% !important;background:radial-gradient(circle,var(--rs-glow),transparent 70%)}
  .rs-frame img{position:absolute;left:4%;top:7%;width:92%;height:86%;object-fit:contain;opacity:0;transform:translateY(28px) scale(.94);filter:drop-shadow(0 30px 40px rgba(0,58,114,.22));transition:opacity .55s var(--ease),transform .9s var(--ease)}
  .rs-frame img.on{opacity:1;transform:none}
  /* the tall evaluation-app screen shows its top part (phone + first result card) so it fills the square like the others */
  .rs-frame img.rs-tall{object-fit:cover;object-position:50% 0}
  /* fact chip anchored bottom-left, where the screens are empty */
  .rs-facts{position:absolute;left:-28px;bottom:-12px;z-index:2}
  .rs-frame .rs-fact{background:color-mix(in srgb,var(--card) 90%,transparent)}
  .rs-fact{position:absolute;left:0;bottom:0;padding:14px 20px;border-radius:22px !important;white-space:nowrap;opacity:0;transform:translateY(18px) scale(.9);transition:opacity .45s var(--ease),transform .6s var(--spring)}
  .rs-fact.on{opacity:1;transform:none;transition-delay:.15s}
  .rs-fact b{display:block;font-size:22px;letter-spacing:-.02em;color:var(--blue-2);line-height:1.2}
  .rs-fact span{font-size:13px;color:var(--mid)}
  .rs-rail{position:absolute;right:-14px;top:14%;bottom:14%;width:3px;border-radius:3px !important;background:var(--line);overflow:hidden}
  .rs-rail i{display:block;height:100%;transform-origin:top;transform:scaleY(0);background:linear-gradient(var(--blue),var(--orange))}
  @media (prefers-reduced-motion:reduce){.rs-step{transform:none}.rs-step:not(.on) .rs-no,.rs-step:not(.on) h3,.rs-step:not(.on) .rs-step-sub{opacity:1}.rs-step:not(.on) .rs-list li{color:var(--mid)}}
}
@media not all and (min-width:1024px) and (min-height:640px){
  .rs-stage{display:none}
  .rs-steps{display:flex;align-items:stretch;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;margin-inline:calc(-1 * clamp(16px,4vw,40px));padding:8px clamp(16px,4vw,40px) 22px;scroll-padding-inline:clamp(16px,4vw,40px)}
  .rs-steps::-webkit-scrollbar{display:none}
  .rs-steps:focus-visible{outline-offset:-3px}
  .rs-step{flex:none;width:min(84%,460px);scroll-snap-align:start;padding:18px 20px 22px;border-radius:var(--r-l) !important;background:var(--glass-bg);border:1px solid var(--line);box-shadow:var(--glass-shadow)}
  .rs-fig{display:flex;align-items:center;justify-content:center;height:clamp(170px,44vw,220px);margin-bottom:16px;padding:12px;border-radius:24px !important;background:var(--rs-plate)}
  .rs-fig img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}
  .rs-step h3{font-size:20px}
  .rs-step-sub{font-size:16px}
  .rs-list li{font-size:15px}
  .rs-nav{display:flex;justify-content:center;align-items:center;gap:18px;margin-top:0}
}
/* phones: one compact card per feature — the step number in a brand disc beside the heading (the 96px screen
   thumbnails were unreadable at that size), first bullet, the rest behind "ดูรายละเอียด" */
@media (max-width:620px){
  .rs-steps{display:grid;gap:12px;overflow:visible;scroll-snap-type:none;margin-inline:0;padding:0}
  .rs-step{width:auto;display:grid;grid-template-columns:44px minmax(0,1fr);grid-template-areas:"no h" "sub sub" "list list" "more more";column-gap:14px;align-items:start;padding:16px 16px 14px;border-radius:26px !important;box-shadow:none}
  .rs-fig{display:none}
  .rs-no{grid-area:no;justify-content:center;width:44px;height:44px;border-radius:50% !important;letter-spacing:0;font-size:15px;color:#fff;background:linear-gradient(135deg,#008CFF,#008CFF)}
  .rs-no::after{display:none}
  .rs-step h3{grid-area:h;align-self:center;margin-top:0;font-size:18px;line-height:1.3}
  .rs-step-sub{grid-area:sub;margin-top:12px;font-size:15px}
  .rs-list{grid-area:list;margin-top:12px}
  .rs-more{grid-area:more}
  .rs-nav{display:none}
}
.rs-arrow{width:48px;height:48px;border-radius:50% !important;border:1px solid var(--line);background:var(--card);display:grid;place-items:center;box-shadow:var(--glass-shadow);transition:transform .35s var(--spring),opacity .3s}
.rs-arrow:active{transform:scale(.9)}
.rs-arrow:disabled{opacity:.35;cursor:default}
.rs-arrow svg{width:20px;height:20px;stroke:var(--ink);stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.rs-count{min-width:56px;text-align:center;font-weight:600;color:var(--mid);font-variant-numeric:tabular-nums}
.rs-count b{color:var(--ink)}

/* ---------- FAQ + other segments ---------- */
/* the fade starts transparent so the ambient light flows in (no hard line at the section top) */
#faq.tint{background:linear-gradient(180deg,transparent 0,var(--blue-xl) 18%,transparent 92%)}
#faq .faq-wrap .h-sec{font-size:clamp(32px,3.6vw,46px)}
#faq .faq-wrap .lead{font-size:17px;max-width:32ch}
#faq .faq-links{margin-top:18px}
#faq .faq details{background:color-mix(in srgb,var(--card) 92%,transparent)}
@media (min-width:1024px){#faq .faq-wrap > div:first-child{position:sticky;top:120px;align-self:start}}
.rs-segs-sec{display:block;padding-block:clamp(8px,2vw,24px) clamp(48px,6vw,80px)}
.rs-segs-h{font-size:clamp(20px,2vw,24px);font-weight:700}
/* desktop: 7 equal tiles in one row (icon above label); opaque cards so the ambient light never makes one look selected */
.rs-segs ul{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px}
.rs-segs li{display:flex}
.rs-segs a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:10px;min-height:56px;padding:16px 10px;border-radius:24px !important;background:var(--card);border:1px solid var(--line);box-shadow:var(--glass-shadow);font-size:15px;font-weight:600;line-height:1.35;text-align:center;text-decoration:none;transition:transform .4s var(--spring),color .3s,border-color .3s}
.rs-segs a:hover{transform:translateY(-3px);color:var(--blue-2);border-color:var(--blue-sky)}
/* the live icons are dark line art: a white plate keeps them visible in dark mode too */
.rs-segs img{flex:none;width:44px;height:44px;padding:7px;border-radius:50% !important;background:#fff;box-shadow:0 0 0 1px rgba(0,58,114,.08)}
/* ≤900px: one swipeable row (snaps per tile) instead of uneven wrapped rows */
@media (max-width:900px){
  .rs-segs ul{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(148px,40%);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;margin-inline:calc(-1 * clamp(16px,4vw,40px));padding:4px clamp(16px,4vw,40px) 18px;scroll-padding-inline:clamp(16px,4vw,40px)}
  .rs-segs ul::-webkit-scrollbar{display:none}
  .rs-segs li{scroll-snap-align:start}
  /* soft edges show the row continues sideways */
  .rs-segs ul{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%)}
  .rs-segs a{font-size:14px}
}

/* ---------- CTA ---------- */
/* ends in the footer's starting colour so the band flows into the footer without a step */
.rs-cta{padding-bottom:clamp(24px,3vw,40px);background:linear-gradient(180deg,transparent 55%,var(--night-2)),radial-gradient(120% 80% at 50% 0%,var(--night-2),var(--night))}
.rs-cta .o-cta .rs-cta-h{margin-top:16px;font-size:clamp(36px,5.4vw,68px);letter-spacing:-.045em;line-height:1.06}
.rs-cta .kick b{white-space:nowrap}
.rs-cta .o-cta img{animation:none}
@media (min-width:621px) and (max-width:900px){
  .rs-cta .o-cta{grid-template-columns:minmax(0,1fr) 200px}
  .rs-cta .o-cta img{width:200px}
}
@media (max-width:620px){.rs-cta .o-cta img{display:none}}   /* decoration only: phones end on the buttons */

/* ---------- TEMP DOCK STOPGAP — delete with the matching page.js block when core ships the compact dock ≤1299px
   and observes [data-dock-away] (kit request). Not for other pages. ----------
   Between 621 and 1299px the vertical dock sat on the content column. Here it becomes the same bottom pill
   phones use, hidden near the top and while scrolling down (page.js sets .rs-top/.rs-down);
   up to 1299px it also steps aside while the simulator is on screen (.rs-away-sim). */
@media (min-width:621px) and (max-width:1299px){
  .dock{flex-direction:row;align-items:center;right:50%;transform:translateX(50%);gap:6px;padding:6px}
  .dock a{width:48px;height:48px}
  .dock a.try-free{width:auto;padding:0 18px;border-radius:999px !important;font-size:14px;white-space:nowrap}
  .dock a.try-free br,.dock a span.tip{display:none}
  .dock.rs-top:not(:focus-within),.dock.rs-down:not(:focus-within),.dock.away:not(:focus-within),.dock.kb,html.sheet-open .dock{transform:translate(50%,calc(100% + 24px))}
}
/* the simulator step-aside applies only where the dock is the bottom pill (≤1299px); wider screens keep the side dock */
@media (max-width:1299px){.dock.rs-away-sim:not(:focus-within){transform:translate(50%,calc(100% + 24px));opacity:0;visibility:hidden;pointer-events:none;transition:transform .4s var(--ease),opacity .3s,visibility 0s .4s}}
.dock.rs-top:not(:focus-within),.dock.rs-down:not(:focus-within){opacity:0;visibility:hidden;pointer-events:none;transition:transform .4s var(--ease),opacity .3s,visibility 0s .4s}

@keyframes rs-grow{from{transform:scaleX(0)}}
/* ===== Shared CTA bar (every page): slim bar floats above the bottom of the screen while scrolling,
   then docks as a full-width band just above the footer. Markup: kit/COMPONENTS.md §15 ===== */
.hm-cb-wrap{position:sticky;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:60;margin:48px 0 40px;padding-inline:16px;pointer-events:none;transition:transform .5s var(--spring),opacity .35s}
.hm-cb-wrap.is-hidden{transform:translateY(calc(100% + 40px));opacity:0}
.hm-cb{pointer-events:auto;max-width:min(1080px,calc(100vw - 200px));margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px 12px 12px 28px;border-radius:999px !important;
  background:linear-gradient(135deg,#0072F3,#00A2FF)!important;border:0;box-shadow:0 20px 44px -18px rgba(0,114,243,.7);color:#fff;transition:box-shadow .4s,max-width .5s var(--ease)}
.hm-cb-wrap.is-docked .hm-cb{box-shadow:0 10px 28px -20px rgba(0,114,243,.6);max-width:min(1200px,calc(100vw - 32px))}
.hm-cb-txt{display:flex;flex-direction:column;min-width:0}
.hm-cb-txt h2{font-size:clamp(17px,1.7vw,22px);line-height:1.3;font-weight:600;color:#fff;margin:0}
.hm-cb-txt h2 b{font-weight:700}
.hm-cb-txt > span{font-size:13px;color:#fff;opacity:.9}
.hm-cb-act{display:flex;gap:8px;flex:none}
.hm-cb .btn{min-height:46px;padding:0 22px}
.hm-cb .btn.primary{background:#fff!important;border-color:#fff!important;color:#008CFF!important}
.hm-cb .hm-cb-sales{background:transparent!important;border:1.5px solid rgba(255,255,255,.8)!important;color:#fff!important;box-shadow:none!important}
.hm-cb-end{height:1px}
@media (max-width:1100px){.hm-cb{max-width:calc(100vw - 112px)}}
@media (max-width:760px){
  .hm-cb-wrap{bottom:calc(80px + env(safe-area-inset-bottom,0px));padding-inline:10px}
  .hm-cb{max-width:none;padding:8px 8px 8px 18px;gap:10px}
  .hm-cb-txt > span,.hm-cb-sales,.hm-cb-pre{display:none}
  .hm-cb-txt h2{font-size:15px}
  .hm-cb .btn{min-height:44px;padding:0 16px;font-size:14px}
}

.hm-cb-wrap.is-docked{padding-inline:0;margin-bottom:0}
.hm-cb{transition:max-width .6s var(--ease),border-radius .6s var(--ease),padding .6s var(--ease),box-shadow .4s}
.hm-cb-wrap.is-docked .hm-cb{max-width:100%!important;border-radius:0 !important;padding:30px max(24px,calc((100vw - 1200px)/2));box-shadow:none}
.hm-cb-wrap.is-docked .hm-cb-txt h2{font-size:clamp(20px,2.2vw,28px)}
/* leave room for the docked AI panel on wide screens */
/* the floating AI window covers the bottom-right corner: the bar slides left of it while it is open */
@media (min-width:1024px){html.ai-open .hm-cb-wrap:not(.is-docked){padding-right:430px}html.ai-open .hm-cb-wrap:not(.is-docked) .hm-cb{max-width:none}}
@media (max-width:760px){.hm-cb-x .hm-cb-a{display:none}.hm-cb-x .hm-cb-pre{display:inline}}
/* tablet: the floating dock sits on the right edge, so the bar keeps clear of it */
@media (min-width:621px) and (max-width:1100px){.hm-cb-wrap:not(.is-docked){padding-right:100px}.hm-cb-wrap:not(.is-docked) .hm-cb{max-width:none}}
/* ===== HumanSoft CI layer (HumanSoft-CI.pdf, dev summary 14/10/2026 — pending Marketing sign-off) =====
   Loaded after page CSS on every page. Colours: Deep Blue #008CFF (headings, borders, buttons), Light Blue #289FFF,
   Vivid Orange #FF6100 / Light Orange #FF8100 (accent only), Pale Blue #E4EEF8 (cards), White, Black,
   gradient #0072F3 → #00A2FF at −45°. Text colours limited to black / white / blue / orange. No green/red.
   Content pages stay light (no full dark pages) → dark mode is switched off. Font: Anuphan only.
   Hard-coded hex colours in page CSS/JS are snapped to this palette at build time (kit/build.py ci_map). */
:root,:root[data-theme="dark"],:root:not([data-theme="light"]){
  color-scheme:light;
  --blue:#008CFF; --blue-2:#008CFF; --blue-sky:#289FFF; --blue-l:#E4EEF8; --blue-xl:#E4EEF8;
  --orange:#FF6100; --orange-2:#FF6100; --orange-3:#FF8100; --orange-l:#FFF1E8;
  --ink:#000000; --mid:#000000; --muted:#000000; --line:#E4EEF8;
  --ground:#FFFFFF; --ground-2:#E4EEF8; --card:#FFFFFF;
  --green:#008CFF; --green-l:#E4EEF8; --red:#FF6100; --red-l:#FFF1E8;
  --glass-bg:rgba(255,255,255,.88); --glass-bg-2:rgba(255,255,255,.74); --glass-edge:rgba(255,255,255,.9); --glass-rim:rgba(0,114,243,.10);
  --glass-shadow:0 18px 50px -22px rgba(0,114,243,.35); --spec:rgba(255,255,255,.9);
  --blob-a:rgba(0,140,255,.24); --blob-b:rgba(255,97,0,.12); --blob-c:rgba(40,159,255,.30);
  --night:#0072F3; --night-2:#00A2FF; --on-night:#FFFFFF; --on-night-2:#FFFFFF;
  --ci-grad:linear-gradient(135deg,#0072F3 0%,#00A2FF 100%);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){color-scheme:light}}

/* secondary text: black (CI) with hierarchy from size/weight instead of grey */
.lead,.note,.crumb,small,.plabel{color:#000}

/* blue bands use the CI gradient (−45°: dark top-left → light bottom-right) with white text */
.night{background:var(--ci-grad)!important;color:#fff}
.night .lead,.night p,.night small,.night .plabel,.night li{color:#fff}
.night .h-sec em,.night h2 em,.night h1 em{background:none!important;-webkit-text-fill-color:#fff!important;color:#fff!important}
.night .kick{color:#fff}
.glow{display:none}

/* buttons: Deep Blue is the button colour; orange is accent only */
.btn.primary,.btn.blue{background:#008CFF!important;border-color:#008CFF!important;color:#fff!important;box-shadow:0 14px 34px -14px rgba(0,140,255,.7)!important}
.btn.primary:hover,.btn.blue:hover{background:#0072F3!important;border-color:#0072F3!important}
.night .btn.primary,.night .btn.blue{background:#fff!important;border-color:#fff!important;color:#008CFF!important}
.dock a.try-free{background:#FF6100!important}

/* headline accents: blue only (orange stays for numbers / warnings) */
.h-sec em,.hero .display .ln:nth-child(2) > span{background-image:linear-gradient(90deg,#0072F3,#00A2FF,#0072F3)!important}
h1 em{background:none!important;-webkit-text-fill-color:#008CFF!important;color:#008CFF!important}
.night h1 em{-webkit-text-fill-color:#fff!important;color:#fff!important}
.kick b{background:#FF6100;color:#fff}
.kick{color:#008CFF}

/* free-trial calls to action (ทดลองใช้ฟรี 30 วัน / เริ่มใช้งานฟรี / ทดลองใช้งานฟรี) are orange — Marketing decision 25/10/2026 */
a.btn[href*="/registration"]:not(#_){background:#FF6100!important;border-color:#FF6100!important;color:#fff!important;box-shadow:0 14px 34px -14px rgba(255,97,0,.75)!important}
a.btn[href*="/registration"]:not(#_):hover{background:#FF8100!important;border-color:#FF8100!important}
.msheet a[href*="/registration"]:not(.btn){color:#FF6100}
/* ===== HumanSoft AI assistant: floating chat widget (bottom-right) with LINE / phone as secondary contact options =====
   Launcher .ai-fab = one "ถาม AI" button · panel floats over the page (never pushes content) · LINE / โทร 1537 sit inside it.
   The old shell dock (#dock) is kept in the DOM for page scripts that read it, but hidden: its LINE/contact moved here. */
#dock{display:none!important}

.ai-fab{position:fixed;z-index:72;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;align-items:center;gap:10px;transition:opacity .3s,transform .45s var(--spring)}
html.ai-open .ai-fab{opacity:0;pointer-events:none;transform:translateY(16px) scale(.9)}
/* main launcher: the emphasised one */
.ai-tab{position:relative;width:72px;height:72px;border:0;border-radius:24px !important;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  background:linear-gradient(135deg,#0072F3,#00A2FF);color:#fff;font:700 12.5px/1.1 var(--f);cursor:pointer;box-shadow:0 18px 36px -14px rgba(0,114,243,.75);isolation:isolate;transition:transform .45s var(--spring)}
.ai-tab svg{width:26px;height:26px}
.ai-tab:hover{transform:translateY(-3px) scale(1.04)}
.ai-tab .ai-dot{position:absolute;top:-3px;right:-3px;width:14px;height:14px;border-radius:50% !important;background:#FF6100;box-shadow:0 0 0 3px #fff}

.ai-panel{position:fixed;z-index:73;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));width:390px;max-width:calc(100vw - 32px);height:min(640px,calc(100vh - 110px));
  display:flex;flex-direction:column;border-radius:26px !important;overflow:hidden;background:#fff;border:1px solid #E4EEF8;box-shadow:0 34px 80px -30px rgba(0,58,140,.5);
  transform-origin:100% 100%;transform:translateY(16px) scale(.92);opacity:0;visibility:hidden;transition:transform .45s var(--spring),opacity .25s,visibility 0s .45s}
html.ai-open .ai-panel{transform:none;opacity:1;visibility:visible;transition:transform .45s var(--spring),opacity .25s,visibility 0s}
.ai-head{display:flex;align-items:center;gap:12px;padding:14px 14px 14px 18px;background:linear-gradient(135deg,#0072F3,#00A2FF);color:#fff}
.ai-ava{width:40px;height:40px;border-radius:14px !important;background:rgba(255,255,255,.18);display:grid;place-items:center;flex:none}
.ai-ava svg{width:24px;height:24px}
.ai-head b{display:block;font-size:16px}
.ai-head small{font-size:12px;color:#fff;opacity:.9}
.ai-head .ai-x{margin-left:auto;width:38px;height:38px;border-radius:50% !important;border:0;background:rgba(255,255,255,.18);color:#fff;display:grid;place-items:center;cursor:pointer}
.ai-head .ai-x:hover{background:rgba(255,255,255,.3)}
.ai-log{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;background:#E4EEF8;overscroll-behavior:contain}
.ai-msg{max-width:88%;padding:11px 14px;border-radius:18px !important;font-size:15px;line-height:1.6;color:#000;white-space:pre-line;animation:aiIn .35s var(--ease)}
.ai-msg.bot{align-self:flex-start;background:#fff;border:1px solid #E4EEF8;border-bottom-left-radius:6px !important}
.ai-msg.me{align-self:flex-end;background:#008CFF;color:#fff;border-bottom-right-radius:6px !important}
.ai-msg a{color:#008CFF;font-weight:600}
.ai-msg .ai-src{display:block;margin-top:8px;font-size:12px;color:#000;opacity:.7}
@keyframes aiIn{from{transform:translateY(8px);opacity:0}}
.ai-typing{display:inline-flex;gap:4px;padding:14px}
.ai-typing i{width:7px;height:7px;border-radius:50% !important;background:#289FFF;animation:aiDot 1s infinite}
.ai-typing i:nth-child(2){animation-delay:.15s}.ai-typing i:nth-child(3){animation-delay:.3s}
@keyframes aiDot{40%{transform:translateY(-5px);background:#008CFF}}
.ai-chips{display:flex;flex-wrap:wrap;gap:6px;align-self:flex-start;max-width:100%}
.ai-chips button{border:1px solid #289FFF;background:#fff;color:#008CFF;border-radius:999px !important;padding:7px 12px;font:500 13px/1.3 var(--f);cursor:pointer;text-align:left}
.ai-chips button:hover{background:#E4EEF8}
.ai-form{display:flex;gap:8px;padding:12px 12px 8px;border-top:1px solid #E4EEF8;background:#fff}
.ai-form input{flex:1;min-width:0;border:1px solid #E4EEF8;border-radius:999px !important;padding:11px 16px;font:15px var(--f);color:#000;background:#E4EEF8}
.ai-form input:focus{outline:2px solid #008CFF;outline-offset:1px}
.ai-form button{width:46px;height:46px;flex:none;border:0;border-radius:50% !important;background:#008CFF;color:#fff;display:grid;place-items:center;cursor:pointer}
.ai-form button[disabled]{opacity:.45}
/* secondary: talk to a person */
.ai-contact{display:flex;align-items:center;gap:8px;padding:4px 12px 10px;background:#fff;font-size:12.5px}
.ai-contact > span{margin-right:auto;color:#000}
.ai-contact a{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 12px;border-radius:999px !important;font-weight:600;text-decoration:none;font-size:12.5px}
.ai-contact .ai-c-line{background:#008CFF;color:#fff}.ai-contact .ai-c-line img{width:16px;height:16px}
.ai-contact .ai-c-call{border:1px solid #E4EEF8;color:#008CFF}.ai-contact .ai-c-call svg{width:14px;height:14px;stroke:#008CFF;fill:none;stroke-width:2.2}
.ai-note{margin:0;padding:0 14px 10px;font-size:11px;color:#000;opacity:.65;background:#fff}

/* phones: launcher = AI only (LINE / call live inside the sheet); panel becomes a bottom sheet */
@media (max-width:620px){
  .ai-fab{right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px))}
  .ai-tab{width:62px;height:62px;border-radius:22px !important;font-size:11.5px}
  .ai-tab svg{width:22px;height:22px}
  .ai-panel{left:8px;right:8px;bottom:8px;width:auto;max-width:none;height:min(80vh,640px);transform:translateY(calc(100% + 24px))}
}
@media (prefers-reduced-motion:reduce){.ai-panel,.ai-fab,.ai-msg{transition:none!important;animation:none!important}}

/* ===== "ถาม AI" launcher: alive enough to invite a tap (respects reduced motion) ===== */
.ai-tab::before{content:"";position:absolute;inset:-4px;border-radius:28px !important;z-index:-1;background:conic-gradient(from var(--ai-a,0deg),#FF6100,#00A2FF,#008CFF,#FF8100,#FF6100);animation:aiSpin 3s linear infinite;filter:blur(1px)}
.ai-tab::after{content:"";position:absolute;inset:0;border-radius:inherit !important;z-index:-1;background:linear-gradient(135deg,#0072F3,#00A2FF);box-shadow:0 0 0 0 rgba(0,140,255,.55);animation:aiRing 2.4s ease-out infinite}
.ai-tab svg{animation:aiWiggle 4.8s ease-in-out infinite;transform-origin:50% 60%}
.ai-tab .ai-dot{animation:aiDotPulse 1.6s ease-in-out infinite}
@property --ai-a{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes aiSpin{to{--ai-a:360deg}}
@keyframes aiRing{0%{box-shadow:0 0 0 0 rgba(0,140,255,.55)}80%,100%{box-shadow:0 0 0 16px rgba(0,140,255,0)}}
@keyframes aiWiggle{0%,82%,100%{transform:rotate(0)}86%{transform:rotate(-14deg) scale(1.15)}90%{transform:rotate(12deg) scale(1.15)}94%{transform:rotate(-6deg)}}
@keyframes aiDotPulse{50%{transform:scale(1.35)}}
.ai-bubble{position:fixed;z-index:72;right:104px;bottom:calc(30px + env(safe-area-inset-bottom,0px));max-width:240px;padding:12px 16px;border-radius:18px 18px 4px 18px !important;background:#fff;border:1px solid #E4EEF8;box-shadow:0 18px 40px -18px rgba(0,114,243,.55);font:500 14px/1.45 var(--f);color:#000;cursor:pointer;
  opacity:0;transform:translateX(16px) scale(.9);transform-origin:100% 100%;pointer-events:none;transition:opacity .35s,transform .5s var(--spring)}
.ai-bubble b{color:#008CFF}
.ai-bubble.show{opacity:1;transform:none;pointer-events:auto}
html.ai-open .ai-bubble{display:none}
@media (max-width:620px){.ai-bubble{right:12px;bottom:calc(160px + env(safe-area-inset-bottom,0px))}}
@media (prefers-reduced-motion:reduce){.ai-tab::before,.ai-tab::after,.ai-tab svg,.ai-tab .ai-dot{animation:none!important}}

/* ===== docked mode: the expand button in the header pins the assistant beside the page (≥1100px) ===== */
.ai-dockbtn{margin-left:auto}
.ai-dockbtn + .ai-x{margin-left:6px!important}
html.ai-dock .ai-dock-arr{transform:rotate(180deg);transform-origin:9px 12px}
@media (max-width:1099px){.ai-dockbtn{display:none}.ai-dockbtn + .ai-x{margin-left:auto!important}}
@media (min-width:1100px){
  html.ai-dock .ai-panel{top:calc(env(safe-area-inset-top,0px) + 86px);bottom:16px;height:auto;width:380px;transform-origin:100% 50%;transform:translateX(calc(100% + 32px))}
  html.ai-dock.ai-open .ai-panel{transform:none}
  html.ai-dock.ai-open body{padding-right:404px;transition:padding .45s var(--ease)}
  html.ai-dock.ai-open .hm-cb-wrap:not(.is-docked){padding-right:16px}
}
/* in-chat sign-up ("สนใจสมัครใช้งาน"): orange call-to-action chip, step counter, answer summary, consent */
.ai-chips button.ai-lead{background:linear-gradient(135deg,#FF6100,#FF6100);border-color:#FF6100;color:#fff;font-weight:700;box-shadow:0 8px 18px -10px rgba(255,97,0,.8)}
.ai-chips button.ai-lead:hover{background:#FF6100}
.ai-chips button.ai-x2{border-color:#E4EEF8;color:#008CFF;font-size:12px;padding:5px 10px}
.ai-chips button.ai-x2:hover{background:#E4EEF8}
.ai-msg .ai-step{display:block;margin-top:6px;font-size:11.5px;color:#008CFF}
.ai-pdpa{display:flex;gap:6px;align-items:flex-start;font-size:12px;line-height:1.45;color:#008CFF}
.ai-pdpa input{margin:2px 0 0;accent-color:#008CFF;flex:none}
.ai-pdpa a{color:#008CFF}
.ai-ok{display:inline-grid;place-items:center;width:22px;height:22px;margin-right:4px;border-radius:50% !important;background:#008CFF;color:#fff;font-size:13px;vertical-align:-4px}
.ai-dim{color:#000000;font-weight:400}
.ai-pdpa.ai-need{outline:2px solid #FF6100;outline-offset:4px;border-radius:6px !important}
.ai-chips button:disabled{opacity:.5;cursor:default}
/* "ลงทะเบียนสำเร็จ" card (same content as the registration success page, without the password) */
.ai-msg.bot.ai-msg-reg{max-width:100%;width:100%;white-space:normal;padding:16px 14px}
.ai-reg{display:grid;gap:8px;justify-items:center;text-align:center;font-size:14px}
.ai-reg-h{font-size:18px;color:#008CFF}
.ai-reg-ic{width:64px;height:64px;border-radius:50% !important;background:#E4EEF8;display:grid;place-items:center;font-size:34px;line-height:1}
.ai-hs{color:#008CFF}.ai-hs i{font-style:normal;color:#FF6100}
.ai-reg-d{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 8px;width:100%;margin:2px 0 0;padding:10px 12px;border:1px solid #E4EEF8;border-radius:12px !important;text-align:left;font-size:13px}
.ai-reg-d dt{color:#008CFF}.ai-reg-d dd{margin:0;font-weight:600;word-break:break-word}
.ai-reg-url{width:100%;padding:8px 10px;border:1px solid #E4EEF8;border-radius:10px !important;font-size:13px;word-break:break-all}
.ai-reg-url a{color:#008CFF;font-weight:600}
.ai-reg small{font-size:11.5px;line-height:1.5;color:#000000}.ai-reg small em{font-style:normal;color:#FF6100}
.ai-reg-go,.ai-reg-ct{display:block;width:100%;padding:10px 12px;border-radius:999px !important;font:700 14px/1.3 var(--f);text-align:center;text-decoration:none;cursor:pointer}
.ai-msg .ai-reg-go{background:#008CFF;color:#fff;border:0;box-shadow:0 10px 20px -12px rgba(0,140,255,.9)}.ai-msg .ai-reg-go:hover{background:#0072F3}   /* CI blue (kit/build maps off-palette colours) */
.ai-reg-ct{background:#fff;color:#008CFF;border:1.5px solid #289FFF}.ai-reg-ct:hover{background:#E4EEF8}.ai-reg-ct:disabled{opacity:.55;cursor:default}
.ai-ct{display:flex;gap:6px;margin-top:8px}
.ai-msg .ai-ct a{flex:1;padding:8px 10px;border-radius:999px !important;text-align:center;font-weight:700;font-size:13px;text-decoration:none}
.ai-msg .ai-ct-tel{border:1.5px solid #289FFF;color:#008CFF}.ai-msg .ai-ct-line{background:#008CFF;color:#fff}

/* ===== override ฝั่งเรา: ผู้ช่วย AI เป็น drawer (desktop) / เต็มหน้า (mobile) ===== */
.ai-tab::after{border-radius:24px!important}
/* วงแสงรอบปุ่ม "ถาม AI": เพิ่มฟ้าสว่าง #2ED1FF คั่นระหว่างส้ม #FF6100 กับฟ้าสด #00A2FF และระหว่างฟ้า #008CFF กับส้มอ่อน #FF8100 (ของ MKT ไม่มีสีนี้) */
.ai-tab::before{background:conic-gradient(from var(--ai-a,0deg),#FF6100,#2ED1FF,#00A2FF,#008CFF,#2ED1FF,#FF8100,#FF6100)!important}
/* มือถือ/แท็บเล็ตเล็ก (≤760px): แถบ "ลองใช้จริง ฟรี 30 วัน" (#start .hm-cb-wrap) วางแถวเดียวกับปุ่ม "ถาม AI" (ชิดซ้ายของปุ่ม) ไม่ลอยอยู่เหนือปุ่ม (มติ ผู้ใช้ 4 พ.ย. 2026)
   ของ MKT ตั้ง bottom:80px เพื่อเว้นที่ให้ dock (LINE/โทร) แต่ทุกหน้าของ MKT ซ่อน dock ไว้เอง (#dock{display:none!important}) → ไม่มีอะไรให้เว้น
   ขนาดปุ่ม AI: ≤620px = 72px (เดิม 62px · ขยายให้ใหญ่สุดในแถว 5 พ.ย. 2026) ชิดขวา 12px ล่าง 12px · 621–760px = 72px ชิดขวา 16px ล่าง 18px
   ใช้ html นำหน้าเพื่อชนะกฎของ MKT (.hm-cb-wrap:not(.is-docked){padding-right:…}) ที่มี specificity สูงกว่า */
@media (max-width:760px){
  html .hm-cb-wrap{bottom:calc(18px + env(safe-area-inset-bottom,0px))}
  html .hm-cb-wrap:not(.is-docked){padding-right:calc(16px + 72px + 10px)}
}
@media (max-width:620px){
  html .hm-cb-wrap{bottom:calc(12px + env(safe-area-inset-bottom,0px))}
  html .hm-cb-wrap:not(.is-docked){padding-right:calc(12px + 62px + 8px)}
}
/* มือถือ (≤620px): แถบลอย "ลองใช้จริง ฟรี 30 วัน" (ข้อความตกเป็น 2 บรรทัด เบียดปุ่ม) แตกเป็น 3 ปุ่มให้เลือก = dock เดิมของ MKT (#dock: LINE แชทกับเรา · ติดต่อเรา · ทดลองใช้ฟรี)
   วางแถวเดียวกับปุ่ม "ถาม AI" ซึ่งใหญ่สุด 72px (มติ ผู้ใช้ 5 พ.ย. 2026) · กฎของ dock + ปุ่ม AI อยู่ใน src/app/globals.css (ไฟล์นี้ถูก generate ซ้ำ)
   ที่นี่แค่ซ่อนแถบตอนลอย (ปุ่มทดลองใช้ฟรีอยู่ใน dock แล้ว) · ตอนลงไปเป็นแถบเต็มจอเหนือ footer (.is-docked) แสดงตามเดิม */
@media (max-width:620px){
  html .hm-cb-wrap:not(.is-docked){opacity:0;visibility:hidden;pointer-events:none}
}
/* bubble ข้อความของปุ่ม "ถาม AI" (.ai-bubble): แถบทดลองใช้ฟรีลงมาอยู่ข้างปุ่มแล้ว → bubble ลงมาติดเหนือปุ่ม (ห่าง 10px) · MKT ตั้ง bottom:160px เพื่อเว้นที่ให้แถบที่เคยอยู่เหนือปุ่ม
   621–760px: ของ MKT วาง bubble ทางซ้ายของปุ่ม (right:104px) ซึ่งตอนนี้ทับแถบทดลองใช้ฟรี → วางเหนือปุ่มแทน · ขนาดปุ่ม AI: 72px ชิดขวา 16px ล่าง 18px (≤620px: 72px · 12px · 12px) */
@media (max-width:760px){
  html .ai-bubble{right:16px;bottom:calc(18px + 72px + 10px + env(safe-area-inset-bottom,0px))}
}
@media (max-width:620px){
  html .ai-bubble{right:12px;bottom:calc(12px + 72px + 10px + env(safe-area-inset-bottom,0px))}
}
/* restaurant บนจอ ≤900px: การ์ดตารางอยู่ในกรอบเดียวกับรูป ทำให้วงกลมสีฟ้า (ชิดล่างของกรอบ) ถูกดันลงต่ำกว่าฐานรูป รูปจึงไม่พอดีวง (มติ ผู้ใช้ 4 พ.ย. 2026)
   → ให้การ์ดห้อยอยู่ใต้กรอบ (ไม่นับความสูง) ฐานรูป = ฐานวง · เหลือที่ด้านล่างเท่าความสูงการ์ดที่ยื่นออกมา */
@media (max-width:900px){
  .rs-art{margin-bottom:96px}
  .rs-mini{position:absolute;left:50%;right:auto;bottom:auto;top:100%;transform:translateX(-50%);margin:-28px 0 0;width:min(260px,82%)}
}
@media (max-width:560px){
  .rs-mini{width:min(240px,92%)}
}
/* จอ 901–1239px: ป้าย c2 ยื่นออกนอกกรอบจนโดนขอบจอตัด → ซ่อน (เหมือนหน้า segment อื่น) */
@media (min-width:901px) and (max-width:1239px){
  .rs-art .o-chip.c2{display:none}
}
/* ลดภาระเครื่อง (ไม่ลดเอฟเฟกต์): section ที่อยู่นอกจอไม่ต้องเรนเดอร์/เล่นแอนิเมชัน
   1) RedesignRuntime ใส่ data-rd-off ให้ section ที่ห่างจอเกิน ~1 หน้าจอ → หยุดแอนิเมชัน CSS ข้างใน (กลับมาเล่นต่อจากจุดเดิมเมื่อเลื่อนใกล้)
   2) content-visibility:auto ข้ามการ layout/paint ของ section ที่ยังไม่ถึง · ไม่ใส่ที่ hero / scene / rail (เลื่อนแบบปักค้าง) / cb-wrap (sticky) */
#rd-root [data-rd-off],#rd-root [data-rd-off] *,#rd-root [data-rd-off] *::before,#rd-root [data-rd-off] *::after{animation-play-state:paused!important}
/* 3) backdrop-filter (blur) เป็นของแพงสุดของ GPU — หน้านี้มี ~127 ชิ้น · ปิดเฉพาะใน section ที่ห่างจอเกิน 1 หน้าจอ (มองไม่เห็นอยู่แล้ว) เลื่อนเข้าใกล้ก็กลับมาก่อนถึงจอ */
#rd-root [data-rd-off],#rd-root [data-rd-off] *{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
/* แถบคุกกี้ (component กลาง · globals.css เป็นแถบเหลี่ยมเต็มความกว้าง) ในหน้านี้ให้โค้งตามดีไซน์ MKT: การ์ดลอย radius 24 · ปุ่มเม็ดยา · กระจกฝ้า
   CSS นี้โหลดเฉพาะหน้าที่เปิดดีไซน์ใหม่ (<link> ถูกถอดเมื่อออกจากหน้า) หน้าอื่นไม่เปลี่ยน */
.cookie-consent-banner{box-sizing:border-box;padding:10px max(16px,env(safe-area-inset-right,0px)) 10px max(16px,env(safe-area-inset-left,0px));
  background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);
  border:solid #E4EEF8;border-width:1px 0;box-shadow:0 18px 50px -24px rgba(0,58,140,.35);font-family:var(--f)}
.cookie-consent-btns button{border-radius:999px !important;min-height:44px;font-family:var(--f)}
/* แถบเลื่อนของแถวการ์ดฟีเจอร์ (.hm-rail-track): globals.css ของเว็บเรากำหนด ::-webkit-scrollbar สีเทา + ปุ่มลูกศรทั้งเว็บ (ชนะ scrollbar-width:thin ของ MKT)
   → ออกแบบใหม่ตามธีม: ราง = ฟ้าจาง · ตัวเลื่อน = ไล่สีฟ้าแบรนด์ทรงเม็ดยา · ชี้แล้วฟ้าเข้มขึ้นนิดหน่อย · ไม่มีปุ่มลูกศร
   (::-webkit-scrollbar ใช้ได้เมื่อ scrollbar-width/color เป็น auto เท่านั้น → ตั้ง auto ให้ Chrome/Edge · Firefox ใช้ scrollbar-color ด้านล่าง) */
#rd-root .hm-rail-track,#rd-root .hm-tx-rail{scrollbar-width:auto!important;scrollbar-color:auto!important}
#rd-root .hm-rail-track::-webkit-scrollbar{height:12px!important;width:12px!important;display:block!important}
#rd-root .hm-rail-track::-webkit-scrollbar-button{display:none!important;width:0!important;height:0!important}
#rd-root .hm-rail-track::-webkit-scrollbar-track{background:rgba(0,140,255,.10)!important;border-radius:999px!important;margin:0 24px}
#rd-root .hm-rail-track::-webkit-scrollbar-thumb{background:linear-gradient(90deg,#008CFF,#00A2FF)!important;border:3px solid transparent!important;background-clip:padding-box!important;border-radius:999px!important}
#rd-root .hm-rail-track::-webkit-scrollbar-thumb:hover{background:linear-gradient(90deg,#0072F3,#008CFF)!important;background-clip:padding-box!important}
@supports (-moz-appearance:none){#rd-root .hm-rail-track{scrollbar-width:thin!important;scrollbar-color:#008CFF rgba(0,140,255,.10)!important}}
/* ไอคอนในปุ่มกลางวง (.ta-fp ลายนิ้วมือ · .ta-bio · .of-pad): Tailwind preflight ของเว็บเรากำหนด svg{display:block} (ในชุดต้นฉบับ svg เป็น inline จึงถูกจัดกึ่งกลางด้วย text-align:center ของปุ่ม)
   พอเป็น block ไอคอนชิดซ้ายของปุ่ม → จัดกึ่งกลางแนวนอนเอง */
#rd-root :is(.ta-fp,.ta-bio button,.of-pad)>.ta-ic{margin-inline:auto}
/* class .ring ของ MKT (โดนัท "252 คน") ชนกับ utility .ring ของ Tailwind ในเว็บเรา (box-shadow 0 0 0 1px = เส้นขอบดำ) — ในชุดต้นฉบับไม่มี Tailwind จึงไม่มีเส้น */
#rd-root .ring{--tw-ring-shadow:0 0 #0000;--tw-ring-offset-shadow:0 0 #0000;box-shadow:none}
/* ส่วน "ทุกช่องทาง": ข้อความ "เมนู องค์กร › ข้อมูลพนักงาน" ใต้คำอธิบายนอกจอจำลอง — เอาออกตามที่ขอ (breadcrumb ในจอจำลอง .fx-crumb ยังอยู่) */
.fx-path{display:none!important}
/* section .t-plain (หน้าฟีเจอร์: หัวข้อ + ย่อหน้า + รายการข้อ) ซ่อนไว้ก่อนตามที่ขอ — ยังอยู่ใน HTML · ลบบรรทัดนี้เพื่อเอากลับ */
#rd-root .t-plain{display:none!important}

/* ไม่มีปุ่มสลับ "ย่อเป็นหน้าต่างลอย" — ใช้โหมดปักแผง/drawer แบบเดียว (สคริปต์ตั้ง dock เป็นค่าเริ่มต้นเอง) */
.ai-head .ai-dockbtn{display:none!important}
.ai-head .ai-dockbtn + .ai-x,.ai-head .ai-x{margin-left:auto!important}
/* drawer เลื่อนเข้า-ออกเรียบ ๆ ไม่เด้ง (ของ MKT ใช้ --spring) */
.ai-panel{transition:transform .3s ease,opacity .2s ease,visibility 0s .3s}
html.ai-open .ai-panel{transition:transform .3s ease,opacity .2s ease,visibility 0s}
@media (min-width:1100px){
  /* โหมดปักแผง (จำค่าไว้ใน localStorage) เดิมลอยเป็นการ์ดมุมโค้งใต้ header — ทำให้เป็น drawer เต็มสูงเหมือนโหมดปกติ (กว้าง 404px = ช่องที่เว็บเว้นให้) */
  /* ผู้ช่วยปักข้างจอ (เนื้อหาถูกดันซ้าย 404px) → แถบคุกกี้คาดเต็มพื้นที่ที่เหลือ ไม่ลอดใต้ drawer */
  html.ai-dock.ai-open .cookie-consent-banner{right:404px}
  html.ai-dock .ai-panel{top:0;bottom:0;right:0;height:100vh;height:100dvh;width:404px;border-radius:0 !important;border-width:0 0 0 1px;box-shadow:-24px 0 60px -30px rgba(0,58,140,.45)}
}
@media (max-width:620px){
  .ai-panel{inset:0;left:0;right:0;top:0;bottom:0;width:100%;max-width:none;height:100vh;height:100dvh;border-radius:0 !important;border-width:0;box-shadow:none;transform:translateY(100%)}
  .ai-head{padding-top:calc(14px + env(safe-area-inset-top,0px))}
  .ai-note{padding-bottom:calc(10px + env(safe-area-inset-bottom,0px))}
}
/* drawer ของจอใหญ่ — media สุดท้ายของไฟล์ ห้ามมี media ต่อจากนี้ */
@media (min-width:621px){
  .ai-panel{top:0;bottom:0;right:0;height:100vh;height:100dvh;width:420px;max-width:100vw;border-radius:0 !important;border-width:0 0 0 1px;
    transform-origin:100% 50%;transform:translateX(100%);box-shadow:-24px 0 60px -30px rgba(0,58,140,.45)}
  .ai-head{padding-top:calc(14px + env(safe-area-inset-top,0px))}
}