/* =====================================================================
   รอบ 43: เว็บไซต์หลัก (โดเมนหลัก) — Home.razor + Register.razor
   ทุก selector อยู่ใต้ .site เพื่อไม่ให้รั่วไปที่หน้าอื่นของแอป
   แนวดีไซน์: แบรนด์ Phasutech — พื้นเทาฟ้าอ่อน ตัวหนังสือ/ส่วนเข้มสีกรมท่า ปุ่มหลักสีส้ม ขอบฟันปลาแบบใบเสร็จฉีก
   โหมดมืดตาม prefers-color-scheme (เฉพาะหน้า .site)
   ===================================================================== */

.site {
  --s-bg: #F4F6FA;
  --s-bg-2: #E8EDF4;
  --s-paper: #FFFFFF;
  --s-ink: #13243B;
  --s-ink-2: #4B5D75;
  --s-line: #DDE3EC;
  --s-line-2: #C3CEDC;
  --s-brand: #C2510F;
  --s-brand-2: #A3430B;
  --s-brand-text: #A8450C;
  --s-on-brand: #FFFFFF;
  --s-brand-soft: #FBE7D7;
  --s-gold: #E9A53A;
  --s-gold-soft: #FCEFD6;
  --s-gold-ink: #7A4B00;
  --s-dark: #1E3A5F;
  --s-dark-2: #18304F;
  --s-on-dark: #EEF2F8;
  --s-on-dark-2: #AFBDD0;
  --s-accent-on-dark: #F59A5E;
  --s-tg: #2A9FD8;
  --s-tg-soft: #E1F2FB;
  --s-ok: #1C7A44;
  --s-danger: #B3261E;
  --s-danger-soft: #FBE8E6;
  --s-focus: #C2510F;
  --s-r-sm: 10px;
  --s-r: 16px;
  --s-r-lg: 24px;
  --s-shadow: 0 1px 2px rgba(19, 36, 59, .05), 0 8px 24px -8px rgba(19, 36, 59, .14);
  --s-shadow-lg: 0 40px 70px -30px rgba(19, 36, 59, .45);
  --s-header-h: 112px;

  /* ส่งต่อให้คอมโพเนนต์ของแอปที่อยู่ในหน้า (LangSwitch, ฟอร์มสมัคร) */
  --chip: #E6EBF2;

  min-height: 100vh;
  background: var(--s-bg);
  color: var(--s-ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

@media (prefers-color-scheme: dark) {
  .site {
    --s-bg: #0E1621;
    --s-bg-2: #121C29;
    --s-paper: #172231;
    --s-ink: #E8EEF6;
    --s-ink-2: #A9B6C7;
    --s-line: #243246;
    --s-line-2: #33445C;
    --s-brand: #F28C4E;
    --s-brand-2: #F7A472;
    --s-brand-text: #F6A271;
    --s-on-brand: #1C1512;
    --s-brand-soft: rgba(242, 140, 78, .15);
    --s-gold: #E9A53A;
    --s-gold-soft: rgba(233, 165, 58, .14);
    --s-gold-ink: #F2C778;
    --s-dark: #142235;
    --s-dark-2: #1A2B42;
    --s-tg-soft: rgba(42, 159, 216, .16);
    --s-ok: #5DD08F;
    --s-danger: #FF8A80;
    --s-danger-soft: rgba(255, 138, 128, .12);
    --s-focus: #F6A271;
    --s-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 28px -10px rgba(0, 0, 0, .6);
    --s-shadow-lg: 0 40px 70px -30px rgba(0, 0, 0, .8);

    --bg: var(--s-bg);
    --surface: var(--s-paper);
    --ink: var(--s-ink);
    --muted: var(--s-ink-2);
    --line: var(--s-line);
    --chip: #1F2C3D;
    --brand: var(--s-brand);
    --brand-strong: var(--s-brand-2);
    --brand-ink: var(--s-on-brand);
    --brand-soft: var(--s-brand-soft);
    --brand-tint: rgba(242, 140, 78, .08);
    --danger: var(--s-danger);
    --danger-soft: var(--s-danger-soft);
    --ok: var(--s-ok);
    --ok-soft: rgba(93, 208, 143, .12);
    color-scheme: dark;
  }
  body:has(> .public > .site) { background: #0E1621; }
}

/* PublicLayout จัดกึ่งกลางแบบการ์ด — หน้าเว็บหลักต้องเต็มจอ */
.public:has(> .site) { display: block; place-items: normal; min-height: 0; padding: 0; }

@media (prefers-reduced-motion: no-preference) {
  html:has(.site-header) { scroll-behavior: smooth; }
}
html:has(.site-header) { scroll-padding-top: var(--s-scroll-pad, 120px); }
@media (min-width: 1024px) {
  html:has(.site-header) { --s-scroll-pad: 88px; }
}

.site *, .site *::before, .site *::after { box-sizing: border-box; }
.site a { color: var(--s-brand-text); text-underline-offset: 3px; }
.site :focus-visible { outline: 3px solid var(--s-focus); outline-offset: 3px; border-radius: 6px; }
.site svg path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.site svg { flex: none; }
:where(.site) :where(h1, h2, h3, p) { margin: 0; }
:where(.site) :where(ul, ol) { margin: 0; padding: 0; list-style: none; }

.site-wrap { width: min(1200px, 100% - 32px); margin-inline: auto; }
@media (min-width: 768px) { .site-wrap { width: min(1200px, 100% - 64px); } }
@media (min-width: 1600px) { .site-wrap { width: 1280px; } }

.site-skip {
  position: absolute; left: 16px; top: 8px; z-index: 100;
  padding: 10px 16px; border-radius: 999px; background: var(--s-ink); color: var(--s-bg) !important;
  font-weight: 700; text-decoration: none; transform: translateY(-200%);
}
.site-skip:focus { transform: none; }

/* ---------- ตัวอักษร ---------- */
.site-h1 {
  font-size: clamp(2.2rem, 1.3rem + 4.2vw, 4.25rem);
  line-height: 1.22; font-weight: 800; letter-spacing: -.012em;
  text-wrap: balance;
}
.site-h1 span { display: block; }
.site-h1 em {
  display: inline; font-style: normal; color: var(--s-brand);
  background: linear-gradient(transparent 72%, color-mix(in srgb, var(--s-gold) 45%, transparent) 72% 92%, transparent 92%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.site-h2 {
  font-size: clamp(1.7rem, 1.2rem + 2vw, 2.6rem);
  line-height: 1.28; font-weight: 800; letter-spacing: -.01em; text-wrap: balance;
}
.site-h3 { font-size: 1.25rem; line-height: 1.35; font-weight: 800; }
.site-lead { font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); color: var(--s-ink-2); max-width: 60ch; text-wrap: pretty; }
.site-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .9rem; font-weight: 700; color: var(--s-brand-text); line-height: 1.4;
}
.site-eyebrow::before {
  content: ""; width: 22px; height: 6px; flex: none; border-radius: 0;
  background: repeating-linear-gradient(90deg, currentColor 0 4px, transparent 4px 7px);
}

/* ---------- ปุ่ม ---------- */
.site-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 20px; border-radius: 999px;
  border: 1.5px solid transparent; font: inherit; font-weight: 700; line-height: 1.2;
  text-decoration: none; text-align: center; cursor: pointer; white-space: nowrap;
  transition: background-color .15s, border-color .15s, color .15s, transform .15s, box-shadow .15s;
}
.site a.site-btn-primary, .site .site-btn-primary { background: var(--s-brand); color: var(--s-on-brand); box-shadow: 0 10px 22px -12px rgba(194, 81, 15, .9); }
.site .site-btn-primary:hover { background: var(--s-brand-2); }
.site a.site-btn-ghost, .site .site-btn-ghost { background: transparent; color: var(--s-ink); border-color: var(--s-line-2); }
.site .site-btn-ghost:hover { border-color: var(--s-ink); }
.site .site-btn-dark { background: var(--s-ink); color: var(--s-bg); }
.site .site-btn-dark:hover { background: color-mix(in srgb, var(--s-ink) 85%, var(--s-brand)); }
.site a.site-btn-light { background: #FFFFFF; color: #1C1512; }
.site .site-btn-light:hover { background: #FFF4EA; }
.site-btn:active { transform: translateY(1px); }
.site-btn-sm { min-height: 40px; padding: 7px 16px; font-size: .92rem; }
.site-btn-lg { min-height: 54px; padding: 12px 28px; font-size: 1.05rem; }
.site-short { display: none; }
@media (max-width: 479px) {
  .site-long { display: none; }
  .site-short { display: inline; }
}

/* ---------- ส่วนหัว ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--s-bg) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--s-line);
}
.site-header-in {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "logo tools" "nav nav";
  align-items: center; column-gap: 12px; padding-top: 10px;
}
.site-logo { grid-area: logo; display: inline-flex; align-items: center; gap: 10px; min-width: 0; text-decoration: none; color: var(--s-ink) !important; }
.site-logo-mark { width: 34px; height: 34px; }
/* โลโก้ Phasutech: ตัว P ขาวบนกรมท่า จุดส้มตรงกลาง (ไฟล์เดียวกับ icon.svg) */
.site svg .site-logo-bg { fill: #1E3A5F; }
.site svg .site-logo-p { fill: #FFFFFF; }
.site svg .site-logo-ring { fill: none; stroke: #FFFFFF; }
.site svg .site-logo-dot { fill: #F28C38; }
@media (prefers-color-scheme: dark) { .site svg .site-logo-bg { fill: #2A4A75; } }
.site-logo-text { font-weight: 800; font-size: 1.12rem; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.site-nav {
  grid-area: nav; display: flex; justify-content: space-between; gap: 4px;
  margin-top: 6px; border-top: 1px dashed var(--s-line);
}
.site-nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px;
  color: var(--s-ink-2); font-size: .92rem; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.site-nav a:hover { color: var(--s-ink); }
.site-nav a.site-nav-login { color: var(--s-brand-text); }
@media (min-width: 600px) and (max-width: 1023px) {
  .site-nav { justify-content: flex-start; gap: 12px; }
  .site-nav a.site-nav-login { margin-left: auto; }
}
.site-tools { grid-area: tools; display: flex; align-items: center; gap: 8px; }
.site-tools-login { display: none; }
@media (max-width: 429px) { .site-header .site-logo-text { display: none; } }

@media (min-width: 1024px) {
  .site { --s-header-h: 72px; }
  .site-header-in { grid-template-columns: auto 1fr auto; grid-template-areas: "logo nav tools"; padding-block: 12px; column-gap: 24px; }
  .site-nav { justify-content: center; gap: 4px; margin: 0; border: 0; }
  .site-nav a { padding: 0 14px; border-radius: 999px; font-size: .95rem; }
  .site-nav a:hover { background: var(--s-bg-2); }
  .site-nav a.site-nav-login { display: none; }
  .site-tools { gap: 14px; }
  .site-tools-login { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; font-size: .95rem; text-decoration: none; color: var(--s-ink) !important; }
  .site-tools-login:hover { color: var(--s-brand-text) !important; }
}

/* ---------- Hero ---------- */
.site-hero { position: relative; padding: 40px 0 88px; isolation: isolate; }
.site-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--s-ink) 13%, transparent) 1px, transparent 0);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 75% 35%, #000 0, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 75% 35%, #000 0, transparent 75%);
}
.site-hero::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: 720px; height: 720px; right: -260px; top: -220px; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--s-brand) 22%, transparent), transparent);
}
.site-hero-in { display: grid; gap: 44px; align-items: center; }
.site-hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; min-width: 0; }
.site-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.site-trial {
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 12px;
  background: var(--s-gold-soft); color: var(--s-gold-ink); font-weight: 700; font-size: .93rem; line-height: 1.45;
}
.site-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.site-chips li {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--s-line); background: var(--s-paper); color: var(--s-ink-2);
  font-size: .86rem; font-weight: 600; line-height: 1.4;
}
.site-chips svg { color: var(--s-brand); }
.site-proof { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; color: var(--s-ink-2); font-size: .95rem; }
.site-proof-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--s-ok); box-shadow: 0 0 0 4px color-mix(in srgb, var(--s-ok) 20%, transparent); }

@media (min-width: 640px) {
  .site-hero-cta .site-btn { min-width: 0; }
}
@media (max-width: 479px) {
  .site-hero-cta { width: 100%; }
  .site-hero-cta .site-btn { flex: 1 1 100%; }
}
@media (min-width: 1024px) {
  .site-hero { padding: 72px 0 128px; }
  .site-hero-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 56px; }
}
@media (min-width: 1600px) {
  .site-hero { padding: 96px 0 150px; }
}

/* ---------- ภาพตัวอย่างหน้าจอ (หน่วย em: 1em = 1/45 ของความกว้าง) ---------- */
.site-mock { margin: 0; container-type: inline-size; width: 100%; max-width: 680px; justify-self: center; }
.site .mk { position: relative; font-size: 2.0833cqi; width: 48em; height: 34em; line-height: 1.35; color: #1C1512; }
.site .mk * { line-height: inherit; }
.site .mk svg path { stroke-width: 2.4; }
.site .mk-mono { font-variant-numeric: tabular-nums; }

.site .mk-tablet {
  position: absolute; left: 0; top: 0; width: 38em; height: 26.5em; padding: .65em;
  border-radius: 1.7em; background: #231B17;
  box-shadow: var(--s-shadow-lg), inset 0 0 0 .12em #3A2F29;
}
.site .mk-screen { height: 100%; border-radius: 1.1em; overflow: hidden; background: #FFF8F2; display: flex; flex-direction: column; }
.site .mk-bar { display: flex; align-items: center; gap: .6em; height: 2.4em; padding: 0 .9em; background: #fff; border-bottom: .06em solid #EADCD0; flex: none; }
.site .mk-bar-logo { width: 1.1em; height: 1.1em; border-radius: .3em; background: #C2510F; }
.site .mk-bar-shop { font-size: .72em; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.site .mk-bar-dots { margin-left: auto; display: flex; gap: .35em; }
.site .mk-bar-dots i { width: 1.2em; height: 1.2em; border-radius: 50%; background: #F7EEE6; }
.site .mk-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 13.2em; gap: .75em; padding: .75em; }
.site .mk-catalog { display: flex; flex-direction: column; gap: .6em; min-width: 0; }
.site .mk-search { display: flex; align-items: center; gap: .45em; height: 2em; padding: 0 .75em; border-radius: 1em; background: #fff; border: .06em solid #EADCD0; color: #8A7B70; }
.site .mk-search svg { width: .9em; height: .9em; }
.site .mk-search span { font-size: .6em; white-space: nowrap; overflow: hidden; }
.site .mk-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55em; }
.site .mk-tile { display: flex; flex-direction: column; gap: .2em; padding: .42em; border-radius: .75em; background: #fff; border: .06em solid #EFE3D8; min-width: 0; }
.site .mk-sw { height: 3.6em; border-radius: .5em; margin-bottom: .2em; position: relative; overflow: hidden; }
.site .mk-sw::after { content: ""; position: absolute; width: 1.6em; height: 1.6em; border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%, -50%); background: rgba(255, 255, 255, .55); }
.site .mk-t1 .mk-sw { background: linear-gradient(135deg, #8A4B2A, #4A2614); }
.site .mk-t2 .mk-sw { background: linear-gradient(135deg, #8FBF6A, #4D7F3B); }
.site .mk-t3 .mk-sw { background: linear-gradient(135deg, #9CD3EE, #3E8DBE); }
.site .mk-t4 .mk-sw { background: linear-gradient(135deg, #F2C886, #C98A3B); }
.site .mk-t5 .mk-sw { background: linear-gradient(135deg, #F6C64B, #D8901B); }
.site .mk-t6 .mk-sw { background: linear-gradient(135deg, #F4E3CF, #D9B48E); }
.site .mk-t1 { box-shadow: 0 0 0 .14em #C2510F; border-color: transparent; }
.site .mk-tn { font-size: .6em; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.site .mk-tp { font-size: .58em; font-weight: 700; color: #C2510F; font-variant-numeric: tabular-nums; }
.site .mk-cart { display: flex; flex-direction: column; gap: .32em; padding: .7em; border-radius: .85em; background: #fff; border: .06em solid #EADCD0; min-width: 0; }
.site .mk-cart-head { display: flex; justify-content: space-between; font-size: .68em; font-weight: 800; padding-bottom: .3em; border-bottom: .09em dashed #EADCD0; margin-bottom: .2em; }
.site .mk-cart-head .mk-mono { color: #8A7B70; }
.site .mk-line { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .5em; font-size: .6em; align-items: baseline; }
.site .mk-line span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.site .mk-q { color: #8A7B70; }
.site .mk-cur { display: flex; gap: .3em; margin-top: .3em; }
.site .mk-cur span { flex: 1; text-align: center; font-size: .6em; font-weight: 800; padding: .25em 0; border-radius: .5em; background: #F7EEE6; color: #6B5F57; }
.site .mk-cur span.on { background: #1C1512; color: #fff; }
.site .mk-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: auto; font-size: .8em; font-weight: 800; padding-top: .35em; border-top: .08em dashed #EADCD0; }
.site .mk-total .mk-mono { color: #C2510F; }
.site .mk-pay { text-align: center; padding: .55em; border-radius: .7em; background: #C2510F; color: #fff; font-weight: 800; font-size: .72em; }

.site .mk-receipt { position: absolute; left: 3.2em; top: 19.5em; width: 12.5em; transform: rotate(-4deg); filter: drop-shadow(0 1.2em 1.2em rgba(60, 30, 10, .28)); z-index: 2; }
.site .mk-paper {
  --z: .7em;
  background: #FFFEFB; padding: 1em .95em 1.3em; color: #2A221D;
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / var(--z) 51% repeat-x,
                conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / var(--z) 51% repeat-x;
  mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / var(--z) 51% repeat-x,
        conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / var(--z) 51% repeat-x;
}
.site .mk-r-shop { text-align: center; font-size: .58em; font-weight: 800; padding-bottom: .5em; border-bottom: .12em dashed #CDBFB2; margin-bottom: .45em; }
.site .mk-r-row { display: flex; justify-content: space-between; gap: .6em; font-size: .54em; font-variant-numeric: tabular-nums; padding: .12em 0; }
.site .mk-r-row span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.site .mk-r-total { font-size: .66em; font-weight: 800; border-top: .12em dashed #CDBFB2; margin-top: .4em; padding-top: .45em; }
.site .mk-r-code {
  height: 1.9em; margin: .7em .3em .35em;
  background: repeating-linear-gradient(90deg, #2A221D 0 .1em, transparent .1em .22em, #2A221D .22em .27em, transparent .27em .4em, #2A221D .4em .58em, transparent .58em .68em, #2A221D .68em .74em, transparent .74em .9em);
}
.site .mk-r-thanks { text-align: center; font-size: .5em; color: #6B5F57; }

.site .mk-phone {
  position: absolute; right: 0; bottom: 0; width: 13.6em; height: 25.5em; padding: .5em; z-index: 3;
  border-radius: 2.3em; background: #1A1411;
  box-shadow: var(--s-shadow-lg), inset 0 0 0 .12em #3A2F29;
}
.site .mk-phone-in { position: relative; height: 100%; border-radius: 1.85em; overflow: hidden; background: #DCE7EE; display: flex; flex-direction: column; }
.site .mk-phone-in::before { content: ""; position: absolute; left: 50%; top: .55em; width: 4em; height: 1.1em; border-radius: 1em; background: #1A1411; transform: translateX(-50%); z-index: 2; }
.site .mk-tg-head { display: flex; align-items: center; gap: .5em; padding: 2.2em .8em .6em; background: #fff; flex: none; font-size: 1em; }
.site .mk-tg-head > span:last-child { font-size: .66em; font-weight: 800; }
.site .mk-tg-ava { display: grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: 50%; background: #2A9FD8; color: #fff; }
.site .mk-tg-ava svg { width: .95em; height: .95em; }
.site .mk-tg-ava svg path { stroke-width: 2.6; }
.site .mk-tg-chat {
  flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: .55em; padding: .7em;
  background-image: radial-gradient(circle at 1em 1em, rgba(255, 255, 255, .5) .18em, transparent .2em);
  background-size: 2.2em 2.2em;
}
.site .mk-bubble { display: flex; flex-direction: column; gap: .15em; padding: .6em .7em .45em; border-radius: .9em .9em .9em .25em; background: #fff; box-shadow: 0 .1em .2em rgba(0, 0, 0, .08); max-width: 100%; }
.site .mk-bubble strong { font-size: .62em; font-weight: 800; margin-bottom: .2em; }
.site .mk-b-row { display: flex; justify-content: space-between; gap: .6em; font-size: .56em; }
.site .mk-b-row b { font-variant-numeric: tabular-nums; }
.site .mk-up { color: #1C7A44; }
.site .mk-time { align-self: flex-end; font-size: .46em; color: #8A9AA6; }
.site .mk-bubble-warn { border-left: .25em solid #E9A53A; }
.site .mk-bubble-warn > span:first-child { font-size: .56em; font-weight: 600; }

@media (prefers-color-scheme: dark) {
  .site .mk-tablet, .site .mk-phone { box-shadow: var(--s-shadow-lg), inset 0 0 0 .12em #4A3E37, 0 0 0 1px rgba(255, 255, 255, .06); }
}

/* มือถือ: ภาพเล็กเกินอ่าน → ขยายโทรศัพท์และใบเสร็จให้เด่นขึ้น */
@media (max-width: 639px) {
  .site .mk { font-size: 2.5cqi; width: 40em; height: 33em; }
  .site .mk-tablet { width: 34em; height: 24em; }
  .site .mk-body { grid-template-columns: minmax(0, 1fr) 12em; }
  .site .mk-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site .mk-t5, .site .mk-t6 { display: none; }
  .site .mk-receipt { left: 1.6em; top: 17.5em; width: 12em; }
  .site .mk-phone { width: 14.2em; height: 24.5em; }
}

/* ---------- เข้าร้านของฉัน ---------- */
.site-login { position: relative; z-index: 2; margin-top: -48px; }
.site-login-card {
  display: grid; gap: 20px; padding: 24px 20px;
  background: var(--s-paper); border: 1px solid var(--s-line); border-radius: var(--s-r-lg); box-shadow: var(--s-shadow);
  position: relative;
}
.site-login-card::before {
  content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 4px; border-radius: 0 0 4px 4px;
  background: repeating-linear-gradient(90deg, var(--s-brand) 0 18px, transparent 18px 26px);
}
.site-login-text { display: flex; flex-direction: column; gap: 6px; }
.site-login-text p { color: var(--s-ink-2); }
.site-login-form { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.site-label { font-weight: 700; font-size: .92rem; }
.site-login-row { display: flex; flex-direction: column; gap: 10px; }
.site-shop-input {
  display: flex; align-items: stretch; min-width: 0; flex: 1;
  border: 1.5px solid var(--s-line-2); border-radius: 14px; background: var(--s-bg); overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
.site-shop-input:focus-within { border-color: var(--s-brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--s-brand) 22%, transparent); }
.site-shop-input.is-error { border-color: var(--s-danger); }
.site-shop-input input {
  flex: 1 1 auto; min-width: 5ch; width: 100%; border: 0; outline: 0; background: transparent; color: var(--s-ink);
  font: inherit; font-size: 1.05rem; font-weight: 600; padding: 12px 14px; min-height: 50px;
}
.site-shop-input input::placeholder { color: color-mix(in srgb, var(--s-ink-2) 70%, transparent); font-weight: 500; }
.site .site-shop-input input:focus-visible { outline: 0; }
.site-suffix {
  display: flex; align-items: center; flex: none; padding: 0 14px; max-width: 60%;
  background: var(--s-bg-2); border-left: 1px solid var(--s-line); color: var(--s-ink-2); font-weight: 600; font-size: .95rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.site-login-row .site-btn { min-height: 52px; }
.site-error { padding: 10px 14px; border-radius: 12px; background: var(--s-danger-soft); color: var(--s-danger); font-weight: 600; font-size: .93rem; }
.site-login-alt { color: var(--s-ink-2); font-size: .93rem; }
.site-login-alt a { font-weight: 700; }
@media (min-width: 560px) {
  .site-login-row { flex-direction: row; }
}
@media (min-width: 960px) {
  .site-login { margin-top: -64px; }
  .site-login-card { grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr); gap: 40px; align-items: center; padding: 32px 36px; }
}

/* ---------- ส่วนทั่วไป ---------- */
.site-section { padding: 72px 0; }
.site-head { display: flex; flex-direction: column; gap: 14px; margin-bottom: 36px; max-width: 760px; }
@media (min-width: 1024px) {
  .site-section { padding: 112px 0; }
  .site-head { margin-bottom: 52px; }
}

/* ---------- ฟีเจอร์ ---------- */
.site-fgrid { display: grid; gap: 16px; }
.site-fcard {
  display: flex; flex-direction: column; padding: 24px; min-width: 0;
  background: var(--s-paper); border: 1px solid var(--s-line); border-radius: var(--s-r-lg);
  transition: border-color .15s, transform .15s;
}
.site-fcard:hover { border-color: var(--s-line-2); }
.site-ficon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--s-brand-soft); color: var(--s-brand-text); }
.site-fcard-title { font-size: 1.18rem; font-weight: 800; line-height: 1.35; margin: 18px 0 10px; }
.site-fcard-list { display: flex; flex-direction: column; gap: 8px; }
.site-fcard-list li { position: relative; padding-left: 20px; color: var(--s-ink-2); font-size: .97rem; line-height: 1.55; }
.site-fcard-list li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 8px; height: 8px; border-radius: 2px; background: var(--s-brand); transform: rotate(45deg); opacity: .85; }

.site-fcard-pos { background: var(--s-dark); border-color: var(--s-dark); color: var(--s-on-dark); position: relative; overflow: hidden; }
.site-fcard-pos::after {
  content: ""; position: absolute; right: -40px; bottom: -40px; width: 220px; height: 220px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(242, 140, 78, .28), transparent);
}
.site-fcard-pos .site-ficon { background: var(--s-brand); color: var(--s-on-brand); }
.site-fcard-pos .site-fcard-title { font-size: 1.4rem; }
.site-fcard-pos .site-fcard-list li { color: var(--s-on-dark-2); }
.site-fcard-pos .site-fcard-list li::before { background: var(--s-accent-on-dark); }
.site-fcard-telegram .site-ficon { background: var(--s-tg-soft); color: var(--s-tg); }
.site-fcard-telegram .site-fcard-list li::before { background: var(--s-tg); }
.site-fcard-security .site-ficon { background: color-mix(in srgb, var(--s-ok) 14%, transparent); color: var(--s-ok); }
.site-fcard-security .site-fcard-list li::before { background: var(--s-ok); }

@media (prefers-color-scheme: dark) {
  .site-fcard-pos { background: var(--s-dark-2); border-color: var(--s-line); }
}
@media (min-width: 700px) {
  .site-fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-fcard-pos { grid-column: 1 / -1; }
  .site-fcard-pos .site-fcard-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 32px; }
}
@media (min-width: 1024px) {
  .site-fgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .site-fcard { padding: 28px; }
  .site-fcard-pos { grid-column: span 2; }
}

/* ---------- 3 ขั้นตอน (แถบเข้ม ขอบฟันปลาแบบใบเสร็จ) ---------- */
.site-how { position: relative; background: var(--s-dark); color: var(--s-on-dark); margin-block: 12px; }
.site-how::before, .site-how::after {
  content: ""; position: absolute; left: 0; right: 0; height: 12px; background: var(--s-dark); pointer-events: none;
}
.site-how::before {
  top: -11px;
  -webkit-mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) 50% / 24px 100% repeat-x;
  mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) 50% / 24px 100% repeat-x;
}
.site-how::after {
  bottom: -11px;
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 24px 100% repeat-x;
  mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 24px 100% repeat-x;
}
.site-how .site-h2 { color: var(--s-on-dark); }
.site-steps { display: grid; gap: 28px; counter-reset: none; }
.site-step { display: flex; flex-direction: column; gap: 8px; padding-top: 20px; border-top: 2px dashed rgba(255, 255, 255, .16); }
.site-step-n {
  font-size: 3.4rem; font-weight: 800; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
  color: transparent; -webkit-text-stroke: 1.5px var(--s-accent-on-dark);
}
.site-step-title { font-size: 1.3rem; font-weight: 800; margin-top: 8px; }
.site-step p { color: var(--s-on-dark-2); max-width: 36ch; }
.site-how-cta { margin-top: 40px; }
@media (min-width: 1024px) {
  .site-how .site-wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "head cta" "steps steps"; align-items: end; column-gap: 32px; }
  .site-how .site-head { grid-area: head; }
  .site-how .site-steps { grid-area: steps; }
  .site-how-cta { grid-area: cta; margin: 0 0 52px; }
}
@media (min-width: 768px) {
  .site-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
}

/* ---------- ราคา ---------- */
.site-pricing { display: flex; flex-direction: column; align-items: stretch; position: relative; }
.site-bill-r { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.site-bill {
  align-self: center; display: inline-flex; gap: 4px; padding: 5px; margin-bottom: 36px;
  border-radius: 999px; background: var(--s-paper); border: 1px solid var(--s-line); box-shadow: var(--s-shadow);
}
.site-bill label {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px;
  font-weight: 700; color: var(--s-ink-2); cursor: pointer; white-space: nowrap; transition: background-color .15s, color .15s;
}
.site #site-bill-m:checked ~ .site-bill label[for="site-bill-m"],
.site #site-bill-y:checked ~ .site-bill label[for="site-bill-y"] { background: var(--s-ink); color: var(--s-bg); }
.site #site-bill-m:focus-visible ~ .site-bill label[for="site-bill-m"],
.site #site-bill-y:focus-visible ~ .site-bill label[for="site-bill-y"] { outline: 3px solid var(--s-focus); outline-offset: 2px; }
.site-save {
  display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px;
  background: var(--s-gold-soft); color: var(--s-gold-ink); font-size: .78rem; font-weight: 800; line-height: 1.5; white-space: nowrap;
}
.site #site-bill-y:checked ~ .site-bill label[for="site-bill-y"] .site-save { background: var(--s-gold); color: #1C1512; }

/* ราคาแสดงตามรอบที่เลือก (ค่าเริ่มต้นรายเดือน) */
.site-pricing .site-py { display: none; }
.site #site-bill-y:checked ~ * .site-py { display: flex; }
.site #site-bill-y:checked ~ * .site-pm { display: none; }

.site-plans { display: grid; gap: 20px; align-items: stretch; }
.site-plan {
  position: relative; display: flex; flex-direction: column; gap: 18px; padding: 30px 24px 24px; min-width: 0; container-type: inline-size;
  background: var(--s-paper); border: 1px solid var(--s-line); border-radius: var(--s-r-lg);
}
.site-plan.is-featured { border: 2px solid var(--s-brand); box-shadow: var(--s-shadow); }
.site-plan-badge {
  position: absolute; top: -14px; left: 22px; max-width: calc(100% - 44px);
  padding: 4px 14px; border-radius: 999px; background: var(--s-brand); color: var(--s-on-brand);
  font-size: .82rem; font-weight: 800; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.site-plan-name { font-size: 1.35rem; font-weight: 800; line-height: 1.3; }
.site-plan-desc { color: var(--s-ink-2); font-size: .95rem; margin-top: -10px; }
.site-plan-price { display: flex; flex-direction: column; gap: 6px; }
.site-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 6px; }
.site-amt { font-size: min(2.35rem, 12.5cqi); white-space: nowrap; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.site-per { color: var(--s-ink-2); font-weight: 600; }
.site-plan-sub { align-items: center; flex-wrap: wrap; gap: 6px 10px; color: var(--s-ink-2); font-size: .9rem; }
.site-plan-limits { display: flex; flex-direction: column; gap: 8px; padding: 14px 0; border-block: 1.5px dashed var(--s-line); }
.site-plan-limits li { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: .97rem; }
.site-plan-limits svg { color: var(--s-brand-text); }
.site-checks { display: flex; flex-direction: column; gap: 9px; }
.site-checks li { position: relative; padding-left: 28px; font-size: .96rem; line-height: 1.5; }
.site-checks li::before {
  content: ""; position: absolute; left: 0; top: .12em; width: 19px; height: 19px; border-radius: 50%;
  background: color-mix(in srgb, var(--s-ok) 14%, transparent);
}
.site-checks li::after {
  content: ""; position: absolute; left: 5px; top: calc(.12em + 5px); width: 9px; height: 5px;
  border-left: 2px solid var(--s-ok); border-bottom: 2px solid var(--s-ok); transform: rotate(-45deg);
}
.site-checks li:first-child { font-weight: 700; }
.site-plan-cta { margin-top: auto; width: 100%; }

@media (min-width: 760px) {
  .site-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-plans-1 { grid-template-columns: minmax(0, 440px); justify-content: center; }
}
@media (min-width: 1100px) {
  .site-plans-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .site-plans-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .site-plans-2 { grid-template-columns: repeat(2, minmax(0, 420px)); justify-content: center; }
  .site-plan { padding: 34px 28px 28px; }
  .site-plan.is-featured { transform: translateY(-10px); }
}

.site-addons {
  margin-top: 40px; padding: 24px 20px; display: grid; gap: 18px;
  background: var(--s-bg-2); border-radius: var(--s-r-lg);
}
.site-addons-head p { color: var(--s-ink-2); margin-top: 4px; }
.site-addon-list { display: grid; gap: 0 32px; }
.site-addon-list li {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 12px 0; border-bottom: 1.5px dashed var(--s-line-2);
}
.site-addon-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--s-paper); color: var(--s-brand-text); }
.site-addon-name { font-weight: 700; }
.site-addon-price { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; justify-self: end; }
@media (max-width: 479px) {
  .site-addon-list li { grid-template-columns: 40px minmax(0, 1fr); row-gap: 2px; }
  .site-addon-icon { grid-row: span 2; }
  .site-addon-price { justify-self: start; color: var(--s-brand-text); }
}
@media (min-width: 760px) {
  .site-addons { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); padding: 32px; gap: 32px; align-items: start; }
  .site-addon-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.site-quote {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px;
  padding: 28px 24px; background: var(--s-paper); border: 2px dashed var(--s-line-2); border-radius: var(--s-r-lg);
}
.site-quote p { color: var(--s-ink-2); margin-top: 6px; max-width: 52ch; }
.site-quote-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- คำถามที่พบบ่อย ---------- */
.site-faq { background: var(--s-paper); border-block: 1px solid var(--s-line); }
.site-faq-in { display: grid; gap: 8px; }
.site-faq-list { border-top: 1px solid var(--s-line); }
.site-qa { border-bottom: 1px solid var(--s-line); }
.site-qa summary {
  position: relative; display: block; list-style: none; cursor: pointer;
  padding: 20px 48px 20px 0; font-size: 1.07rem; font-weight: 700; line-height: 1.45;
}
.site-qa summary::-webkit-details-marker { display: none; }
.site-qa summary::before, .site-qa summary::after {
  content: ""; position: absolute; right: 10px; top: 50%; width: 16px; height: 2px; border-radius: 2px;
  background: var(--s-brand); transition: transform .2s;
}
.site-qa summary::after { transform: rotate(90deg); }
.site-qa[open] summary::after { transform: rotate(0deg); }
.site-qa summary:hover { color: var(--s-brand-text); }
.site-qa p { padding: 0 40px 22px 0; color: var(--s-ink-2); max-width: 68ch; }
@media (min-width: 1024px) {
  .site-faq-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: 64px; align-items: start; }
  .site-faq .site-head { position: sticky; top: 112px; }
}

/* ---------- ติดต่อ + ปิดท้าย ---------- */
.site-contact-list { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.site-contact-card {
  display: flex; align-items: center; gap: 14px; height: 100%; padding: 16px 18px;
  background: var(--s-paper); border: 1px solid var(--s-line); border-radius: var(--s-r);
  color: var(--s-ink) !important; text-decoration: none; transition: border-color .15s, transform .15s;
}
.site-contact-card:hover { border-color: var(--s-brand); }
.site-contact-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--s-brand-soft); color: var(--s-brand-text); flex: none; }
.site-contact-card.is-whatsapp .site-contact-icon { background: color-mix(in srgb, #25D366 16%, transparent); color: #128C4B; }
.site-contact-card.is-facebook .site-contact-icon { background: color-mix(in srgb, #1877F2 14%, transparent); color: #1866D0; }
.site-contact-card.is-email .site-contact-icon { background: var(--s-bg-2); color: var(--s-ink); }
@media (prefers-color-scheme: dark) {
  .site-contact-card.is-whatsapp .site-contact-icon { color: #5FE08F; }
  .site-contact-card.is-facebook .site-contact-icon { color: #7FB0FF; }
}
.site-contact-text { display: flex; flex-direction: column; min-width: 0; }
.site-contact-kind { font-size: .85rem; color: var(--s-ink-2); font-weight: 600; }
.site-contact-value { font-weight: 800; overflow-wrap: anywhere; line-height: 1.4; }
.site-contact-note { margin-top: 18px; color: var(--s-ink-2); white-space: pre-line; max-width: 70ch; }

.site-cta {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px;
  margin-top: 56px; padding: 36px 24px; border-radius: var(--s-r-lg);
  background: var(--s-brand); color: var(--s-on-brand);
}
.site-cta::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .22) 1px, transparent 0);
  background-size: 18px 18px;
  -webkit-mask-image: linear-gradient(100deg, transparent 35%, #000);
  mask-image: linear-gradient(100deg, transparent 35%, #000);
}
.site-cta .site-h2 { color: inherit; }
.site-cta p { margin-top: 8px; font-size: 1.05rem; opacity: .92; max-width: 52ch; }
@media (max-width: 479px) {
  .site-cta .site-btn { width: 100%; }
}
@media (min-width: 1024px) {
  .site-cta { padding: 52px 56px; }
}

/* ---------- ส่วนท้าย ---------- */
.site-footer { background: var(--s-dark); color: var(--s-on-dark-2); padding: 56px 0 28px; }
.site-footer-in { display: grid; gap: 32px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.site-footer-brand { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 8px; }
.site-footer-brand .site-logo-text { color: var(--s-on-dark); font-size: 1.3rem; }
.site-footer-brand p { max-width: 40ch; }
.site-footer-col { display: flex; flex-direction: column; gap: 4px; }
.site-footer-col h2 { font-size: .85rem; font-weight: 800; color: var(--s-on-dark); margin-bottom: 6px; letter-spacing: .02em; }
.site-footer a { color: var(--s-on-dark-2); text-decoration: none; }
.site-footer-col a { display: inline-flex; align-items: center; min-height: 36px; }
.site-footer a:hover { color: var(--s-on-dark); text-decoration: underline; }
.site-footer-bottom {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
  padding-top: 22px; border-top: 1px dashed rgba(255, 255, 255, .14); font-size: .88rem;
}
.site-footer :focus-visible { outline-color: var(--s-accent-on-dark); }
@media (min-width: 768px) {
  .site-footer-in { grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); }
  .site-footer-brand { grid-column: auto; }
}

/* =====================================================================
   รอบ 93: แท็บประเภทกิจการ (?for=) · ภาพตัวอย่างร้านอาหาร/โรงเรียน/มหาวิทยาลัย · วิดีโอตัวอย่าง
   ===================================================================== */
/* หัวเรื่องใหญ่: บรรทัดแรกแยกเป็นวลีตามช่องว่าง (Home.razor Words) — ภาษาไทยไม่ตัดกลางวลี เช่น "ค่า|เรียน" */
.site .site-h1 .site-nw { display: inline-block; margin-right: .26em; max-width: 100%; }
.site .site-h1 .site-nw:last-child { margin-right: 0; }
.site-seg { margin-bottom: 28px; }
.site-seg-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.site-seg-tab {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-height: 48px; height: 100%; padding: 8px 14px; min-width: 0;
  border-radius: 14px; border: 1.5px solid var(--s-line); background: var(--s-paper);
  color: var(--s-ink-2) !important; font-weight: 700; font-size: .95rem; line-height: 1.3; text-decoration: none;
  transition: background-color .15s, border-color .15s, color .15s;
}
.site-seg-tab:hover { border-color: var(--s-line-2); color: var(--s-ink) !important; }
.site-seg-tab svg { color: var(--s-brand); }
.site-seg-tab.is-on { background: var(--s-ink); border-color: var(--s-ink); color: var(--s-bg) !important; }
.site-seg-tab.is-on svg { color: var(--s-accent-on-dark); }
.site-seg-soon {
  display: inline-flex; align-items: center; padding: 1px 9px; border-radius: 999px;
  background: var(--s-gold-soft); color: var(--s-gold-ink); font-size: .74rem; font-weight: 800; line-height: 1.6; white-space: nowrap;
}
.site-seg-tab.is-on .site-seg-soon { background: var(--s-gold); color: #1C1512; }
@media (min-width: 640px) {
  .site-seg-list { display: flex; flex-wrap: wrap; }
  .site-seg-tab { border-radius: 999px; padding: 8px 18px; flex-wrap: nowrap; white-space: nowrap; }
}
.site-soon-note {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 16px; border-radius: 14px;
  background: var(--s-gold-soft); color: var(--s-gold-ink); font-weight: 600; max-width: 60ch;
}
.site-soon-note .site-seg-soon { background: var(--s-gold); color: #1C1512; }
.site-quote .site-h3 .site-seg-soon { font-size: .9rem; padding: 3px 12px; }
@media (min-width: 1024px) {
  .site-fgrid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- วิดีโอตัวอย่าง (preload none + poster · คอม/มือถือคนละคลิป) ---- */
.site-video { padding-top: 0; }
.site-video-in { display: grid; gap: 28px; align-items: center; }
.site-video .site-head { margin-bottom: 0; }
.site-vid video {
  display: block; width: 100%; height: auto; border-radius: var(--s-r-lg);
  background: var(--s-dark); border: 1px solid var(--s-line); box-shadow: var(--s-shadow-lg);
}
.site .site-vid .site-vid-m { display: none; }
@media (max-width: 760px) {
  .site .site-vid .site-vid-d { display: none; }
  .site .site-vid .site-vid-m { display: block; max-width: 320px; margin-inline: auto; }
}
@media (min-width: 1024px) {
  .site-video-in { grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: 56px; }
}

/* ---- ภาพตัวอย่าง: ร้านอาหาร (ผังโต๊ะ/บิลโต๊ะ/ใบครัว) ---- */
.site .mk-zone { display: flex; gap: .4em; }
.site .mk-zone span { font-size: .6em; font-weight: 800; padding: .35em .9em; border-radius: 1em; background: #fff; border: .06em solid #EADCD0; color: #6B5F57; white-space: nowrap; }
.site .mk-zone span.on { background: #1C1512; color: #fff; border-color: #1C1512; }
.site .mk-tables { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55em; }
.site .mk-tbl { display: flex; flex-direction: column; gap: .15em; min-height: 6.6em; padding: .55em .6em; border-radius: .75em; background: #fff; border: .12em solid #EFE3D8; min-width: 0; }
.site .mk-tbl b { font-size: .85em; font-weight: 800; }
.site .mk-tbl-st { font-size: .56em; font-weight: 700; color: #8A7B70; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.site .mk-tbl .mk-mono { margin-top: auto; font-size: .6em; font-weight: 800; color: #C2510F; }
.site .mk-tbl.is-free .mk-tbl-st { color: #1C7A44; }
.site .mk-tbl.is-busy { background: #FFF1E6; border-color: #F4C7A3; }
.site .mk-tbl.is-busy .mk-tbl-st { color: #A3430B; }
.site .mk-tbl.on { box-shadow: 0 0 0 .14em #C2510F; border-color: transparent; }
.site .mk-tbl.is-bill { background: #FCEFD6; border-color: #E9A53A; }
.site .mk-tbl.is-bill .mk-tbl-st { color: #7A4B00; }
.site .mk-tbl.is-resv { border-style: dashed; border-color: #9CB3CE; }
.site .mk-tbl.is-resv .mk-tbl-st { color: #1E3A5F; }
.site .mk-tbl.is-qr { background: #E1F2FB; border-color: #9CD3EE; }
.site .mk-tbl.is-qr .mk-tbl-st { color: #1E6E99; }
.site .mk-opt { font-size: .52em; font-weight: 700; color: #A3430B; padding-left: .9em; margin-top: -.3em; }
.site .mk-r-big { font-size: .66em; font-weight: 800; }
.site .mk-r-opt { color: #6B5F57; padding-left: 1em; }

/* ---- ภาพตัวอย่าง: โรงเรียน (ใบเช็กชื่อ/รับเงิน) + มหาวิทยาลัย (กลุ่มเรียน) ---- */
.site .mk-list { display: flex; flex-direction: column; gap: .4em; }
.site .mk-li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .5em; padding: .45em .6em; border-radius: .7em; background: #fff; border: .06em solid #EFE3D8; }
.site .mk-ava { width: 1.5em; height: 1.5em; border-radius: 50%; background: linear-gradient(135deg, #F2C886, #C98A3B); }
.site .mk-li-name { font-size: .6em; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.site .mk-chip { font-size: .54em; font-weight: 800; padding: .25em .8em; border-radius: 1em; white-space: nowrap; }
.site .mk-chip.is-present { background: #DDF3E6; color: #1C7A44; }
.site .mk-chip.is-late { background: #FCEFD6; color: #7A4B00; }
.site .mk-chip.is-absent { background: #FBE8E6; color: #B3261E; }
.site .mk-chip.is-leave { background: #E1F2FB; color: #1E6E99; }
.site .mk-who { font-size: .58em; font-weight: 700; color: #6B5F57; margin-bottom: .2em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.site .mk-line-disc .mk-mono { color: #1C7A44; }
.site .mk-code { font-size: .56em; font-weight: 800; font-variant-numeric: tabular-nums; color: #1E3A5F; background: #E8EDF4; padding: .2em .5em; border-radius: .4em; }
.site .mk-uni .mk-receipt { left: auto; right: 1.2em; top: 15em; transform: rotate(3deg); }

@media (max-width: 639px) {
  .site .mk-tables { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site .mk-tbl:nth-child(n+5) { display: none; }
  .site .mk-uni .mk-receipt { right: .6em; top: 15em; }
}

/* ---------- LangSwitch ในหน้าเว็บ ---------- */
.site .lang-switch.site-lang { background: var(--chip); }
.site .lang-switch.site-lang a { min-height: 36px; padding: 0 11px; color: var(--s-ink-2); }
.site .lang-switch.site-lang a.on { background: var(--s-paper); color: var(--s-ink); }

/* =====================================================================
   หน้าสมัคร (Register.razor) — ใช้หัว/พื้นหลังเดียวกับเว็บหลัก ฟอร์มเดิมของแอป
   ===================================================================== */
.site-auth { display: flex; flex-direction: column; }
.site-auth-top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-block: 14px; border-bottom: 1px solid var(--s-line);
}
.site-auth-main {
  flex: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; justify-items: center;
  padding: 28px 0 48px; position: relative; isolation: isolate;
}
.site-auth-main::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--s-ink) 12%, transparent) 1px, transparent 0);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 60% 50% at 20% 20%, #000 0, transparent 75%);
  mask-image: radial-gradient(ellipse 60% 50% at 20% 20%, #000 0, transparent 75%);
}
.site-auth-aside { display: none; }
.site-auth .auth {
  width: 100%; max-width: 560px; padding: 24px 20px; gap: 16px;
  border-radius: var(--s-r-lg); border-color: var(--s-line); box-shadow: var(--s-shadow);
  position: relative;
}
.site-auth .auth::before {
  content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 4px; border-radius: 0 0 4px 4px;
  background: repeating-linear-gradient(90deg, var(--s-brand) 0 18px, transparent 18px 26px);
}
.site-auth .auth h1 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2rem); font-weight: 800; }
.site-auth .auth fieldset { border-radius: var(--s-r); min-width: 0; }
.site-auth .auth legend { font-weight: 800; }
.site-auth .auth .btn.primary { min-height: 52px; border-radius: 999px; font-weight: 800; font-size: 1.05rem; }
.site-auth .auth .btn { border-radius: 999px; }
.site-auth .plan-reg-trial { background: var(--s-gold-soft); color: var(--s-gold-ink); }
.site-auth-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; color: var(--s-ink-2); font-size: .93rem; padding-bottom: 32px; }
.site-auth-foot a { font-weight: 700; }
@media (min-width: 600px) {
  .site-auth .auth { padding: 32px; }
}
@media (min-width: 1024px) {
  .site-auth-main { grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: 64px; padding: 64px 0 72px; justify-items: stretch; }
  .site-auth-aside { display: flex; flex-direction: column; gap: 22px; position: sticky; top: 48px; padding-top: 24px; }
  .site-auth-aside .site-chips { flex-direction: column; align-items: flex-start; }
  .site-auth-aside .site-chips li { font-size: .95rem; padding: 8px 14px; }
}