/* Shared page headings + interaction — Theme Mos, 26 ต.ค. 2026
   ใช้ร่วมกันทุกหน้า · หัวข้อหลักมีโครง/ระยะเดียวกัน ส่วนเนื้อหายังคงความกว้างเดิม
   Interaction ใช้ transform/shadow จึงไม่ขยับเลย์เอาต์ และลด motion ตามการตั้งค่าอุปกรณ์ */
html {
  --mos-ui-ease: cubic-bezier(.22, .7, .25, 1);
  --mos-ui-time: 190ms;
  --mos-ui-gold: var(--pc-gold, #cdb57b);
  --mos-ui-ivory: var(--pc-ivory, #f2efe7);
  --mos-ui-muted: #a5a7a3;
  --mos-ui-font: var(--pc-sans, 'Inter', 'Noto Sans Thai', system-ui, sans-serif);
}
html .mos-page-heading { padding-top: 28px; margin-bottom: 28px; color: var(--mos-ui-ivory); font-family: var(--mos-ui-font); }
html .mos-heading-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; }
html .mos-heading-context { min-width: 0; flex: 1; }
html .mos-heading-kicker { display: inline-block; white-space: nowrap; }
html .mos-heading-colon { color: var(--mos-ui-gold); white-space: pre; }
html .mos-heading-title-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 8px; min-height: max(2.75rem, calc(var(--mos-type-page) * 1.4)); }
html .mos-page-eyebrow { color: var(--mos-ui-gold); font-size: 12px; font-weight: 500; line-height: 22px; letter-spacing: .12em; }
html .mos-heading-note { display: inline-flex; align-items: center; gap: 9px; color: var(--mos-ui-muted); font-size: 13px; line-height: 22px; }
html .mos-heading-note svg { width: 17px; height: 17px; flex: none; color: var(--mos-ui-gold); stroke-width: 1.6; }
html .mos-page-heading .mos-page-title { margin: 0; font: 500 32px/1.4 var(--mos-ui-font); letter-spacing: normal; }
html .mos-page-subtitle { display: inline; margin: 0; color: var(--mos-ui-muted); }
html .mos-heading-back { display: inline-flex; align-items: center; justify-content: center; gap: 7px; flex: none; min-width: 44px; min-height: 44px; padding-inline: 10px; border: 1px solid transparent; border-radius: 6px; color: var(--mos-ui-muted); font-size: 13px; text-decoration: none; }
html .mos-heading-back svg { width: 15px; height: 15px; }
html main > .mos-page-body { padding-top: 0; }

/* Reserve the final number's width; only the visual overlay changes during count-up. */
html body[data-page] .mos-counter { display: inline-grid; vertical-align: baseline; font: inherit; font-variant-numeric: tabular-nums; line-height: inherit; white-space: nowrap; }
html body[data-page] .mos-counter :is(.mos-counter-final, .mos-counter-live) { grid-area: 1 / 1; }
html body[data-page] .mos-counter-live { display: none; justify-self: end; }
html body[data-page] .mos-counter.is-counting .mos-counter-final { visibility: hidden; }
html body[data-page] .mos-counter.is-counting .mos-counter-live { display: block; }
html body[data-page] .mos-count-refreshing svg.lucide-refresh-cw { animation: mos-count-refresh 780ms linear infinite; }
@keyframes mos-count-refresh { to { transform: rotate(360deg); } }

/* Gold announcement loop: enters from above, holds for reading, exits below the nav divider. */
html body[data-page] .mos-announcement { position: relative; height: 40px; border-bottom: 1px solid #514732; background: linear-gradient(90deg, #0d0e10, #191812 50%, #0d0e10); }
html body[data-page] .mos-announcement-viewport { height: 100%; overflow: hidden; display: flex; align-items: center; justify-content: center; padding-inline: 48px; }
html body[data-page] .mos-announcement-track { display: flex; align-items: center; justify-content: center; gap: 28px; width: max-content; max-width: 100%; margin: 0; padding: 0; list-style: none; animation: mos-announcement-drop 9s var(--mos-ui-ease) infinite; }
html body[data-page] .mos-announcement-item { display: inline-flex; align-items: center; justify-content: center; gap: 10px; color: var(--pc-gold-light, #e8d6a6); font-family: var(--mos-type-family); font-size: var(--mos-type-caption); font-weight: 500; line-height: 22px; letter-spacing: .045em; white-space: nowrap; text-shadow: 0 0 18px #cdb57b1a; }
html body[data-page] .mos-announcement-diamond { color: var(--pc-gold, #cdb57b); }
html body[data-page] .mos-announcement-toggle { position: absolute; inset-block: 0; right: 8px; display: grid; place-items: center; width: 40px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--pc-gold, #cdb57b); cursor: pointer; }
html body[data-page] .mos-announcement-toggle svg { width: 16px; height: 16px; }
html body[data-page] .mos-announcement-play { display: none; }
html body[data-page] .mos-announcement.is-paused .mos-announcement-pause { display: none; }
html body[data-page] .mos-announcement.is-paused .mos-announcement-play { display: block; }
html body[data-page] .mos-announcement.is-paused :is(.mos-announcement-track, .mos-announcement-item) { animation: none; transform: none; opacity: 1; }
html body[data-page] .mos-announcement-toggle:focus-visible { outline-offset: -4px; }
@keyframes mos-announcement-drop {
  0% { opacity: 0; transform: translateY(-170%); }
  9%, 78% { opacity: 1; transform: translateY(0); }
  92%, 100% { opacity: 0; transform: translateY(170%); }
}
@keyframes mos-announcement-message {
  0% { opacity: 0; transform: translateY(-170%); }
  4%, 27% { opacity: 1; transform: translateY(0); }
  33%, 100% { opacity: 0; transform: translateY(170%); }
}

/* Pointer / keyboard feedback. Classes are added by proto.js to actual controls only. */
html body[data-page] :is(.mos-action, .mos-tile, .mos-control, .mos-nav-link, .mos-tab) {
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--mos-ui-time) var(--mos-ui-ease), box-shadow var(--mos-ui-time) var(--mos-ui-ease),
    border-color var(--mos-ui-time) ease, background-color var(--mos-ui-time) ease,
    color var(--mos-ui-time) ease, filter var(--mos-ui-time) ease;
}
html body[data-page] :is(.mos-action, .mos-control, .mos-tile):not(:disabled):not([aria-disabled="true"]) { cursor: pointer; }
html body[data-page] .mos-action { align-items: center; justify-content: center; gap: .5rem; letter-spacing: normal; text-align: center; }
html body[data-page] :is(.mos-action, .mos-tile, .mos-control, .mos-nav-link, .mos-tab, .mos-heading-back):focus-visible {
  outline: 2px solid var(--mos-ui-gold); outline-offset: 4px;
  box-shadow: 0 0 0 4px rgb(205 181 123 / .1);
}
html body[data-page] :is(.mos-action, .mos-tile, .mos-control, .mos-nav-link, .mos-tab):is(:disabled, [aria-disabled="true"]) {
  transform: none; cursor: not-allowed;
}
html body[data-page] .mos-action:is(.bg-foil, .bg-gold-grad, .pv-action) { position: relative; isolation: isolate; overflow: hidden; }
html body[data-page] .mos-action:is(.bg-foil, .bg-gold-grad, .pv-action)::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 20%, rgb(255 255 255 / .22) 48%, transparent 75%);
  transform: translateX(-130%); transition: transform 520ms var(--mos-ui-ease);
}
html body[data-page] .mos-tile :is(.chip, .pv-service-icon, svg),
html body[data-page] .mos-control svg {
  transition: transform 240ms var(--mos-ui-ease), color 190ms ease, border-color 190ms ease, box-shadow 190ms ease;
}
@media (hover: hover) and (pointer: fine) {
  html body[data-page] .mos-action:not(:disabled):not([aria-disabled="true"]):hover {
    transform: translateY(-1px); filter: brightness(1.06);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .24), 0 6px 20px rgb(205 181 123 / .13);
  }
  html body[data-page] .mos-action:is(.bg-foil, .bg-gold-grad, .pv-action):not(:disabled):hover::after { transform: translateX(130%); }
  html body[data-page] .mos-action.pv-action-silver:hover { box-shadow: inset 0 1px 0 #ffffff60, 0 6px 20px #c5c8cc20; }
  html body[data-page] .mos-tile:not(:disabled):not([aria-disabled="true"]):hover {
    transform: translateY(-3px); border-color: var(--mos-ui-gold);
    box-shadow: inset 0 1px 0 rgb(232 214 166 / .08), 0 12px 28px rgb(0 0 0 / .28), 0 0 0 1px rgb(205 181 123 / .08);
  }
  html body[data-page] .mos-tile.pv-service:hover { background: #181b1c; }
  html body[data-page] .mos-tile:hover .pv-service-icon { color: var(--mos-ui-gold); border-color: #8b774d; background: #25241e; transform: translateY(-1px); }
  html body[data-page] .mos-tile:hover .chip { transform: translateY(-2px) rotate(-3deg); }
  html body[data-page] .mos-tile:hover > svg:last-child { transform: translateX(3px); color: var(--mos-ui-gold); }
  html body[data-page] .mos-nav-link:not([aria-current="page"]):hover {
    color: var(--pc-gold-light, #e8d6a6); background-color: rgb(205 181 123 / .075);
    box-shadow: inset 0 -1px 0 rgb(205 181 123 / .4); transform: translateY(-1px);
  }
  html body[data-page] .mos-control:not(:disabled):hover { color: var(--pc-gold-light, #e8d6a6); border-color: #8b774d; background-color: rgb(205 181 123 / .055); }
  html body[data-page] .mos-control:hover svg.lucide-refresh-cw { transform: rotate(35deg); }
  html body[data-page] .mos-tab:not([aria-selected="true"]):hover { color: var(--pc-gold-light, #e8d6a6); background-color: rgb(205 181 123 / .075); }
  html .mos-heading-back:hover { color: var(--pc-gold-light, #e8d6a6); }
  html footer a:hover { color: var(--pc-gold-light, #e8d6a6); text-decoration: underline; text-underline-offset: 5px; text-decoration-color: #6e5d39; }
}
html body[data-page] :is(.mos-action, .mos-tile, .mos-control, .mos-nav-link, .mos-tab):not(:disabled):not([aria-disabled="true"]):is(:active, .mos-is-pressed) {
  transform: translateY(1px) scale(.985); filter: brightness(.96);
  box-shadow: inset 0 2px 5px rgb(0 0 0 / .18); transition-duration: 80ms;
}
html body[data-page] .mos-field {
  transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}
html body[data-page] .mos-field:focus-visible {
  border-color: var(--mos-ui-gold); outline: none;
  box-shadow: 0 0 0 3px rgb(205 181 123 / .14); background-color: #121617;
}
html[data-pp-mode="css"] main { animation: mos-page-enter 240ms var(--mos-ui-ease) both; }
@keyframes mos-page-enter {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (min-width: 768px) {
  /* กันแนวกลางหน้าขยับ เมื่อเปลี่ยนระหว่างหน้าสั้นกับหน้าที่มี scrollbar */
  html { scrollbar-gutter: stable; }
  html main .text-xs { font-size: 13px; }
  html main .text-sm { font-size: 15px; }
}
@media (max-width: 767px) {
  html .mos-page-heading { padding-top: 24px; margin-bottom: 24px; }
  html .mos-heading-meta { gap: 12px; }
  html .mos-page-eyebrow { font-size: 11px; line-height: 20px; }
  html .mos-page-heading .mos-page-title { margin: 0; font-size: 26px; line-height: 1.4; }
  html .mos-heading-note { display: none; }
  html .mos-heading-back { font-size: 12px; line-height: 20px; }
}
@media (max-width: 1023px) {
  html .mos-heading-note { display: none; }
  html body[data-page] .mos-announcement-track { position: relative; display: block; width: 100%; height: 22px; animation: none; }
  html body[data-page] .mos-announcement-item { position: absolute; inset: 0; opacity: 0; animation: mos-announcement-message 18s var(--mos-ui-ease) infinite; }
  html body[data-page] .mos-announcement-item:nth-child(2) { animation-delay: 6s; }
  html body[data-page] .mos-announcement-item:nth-child(3) { animation-delay: 12s; }
  html body[data-page] .mos-announcement.is-paused .mos-announcement-item { opacity: 0; visibility: hidden; }
  html body[data-page] .mos-announcement.is-paused .mos-announcement-item.is-current { opacity: 1; visibility: visible; }
}
@media (max-width: 479px) {
  html .mos-heading-back { width: 44px; padding: 0; }
  html .mos-heading-back > span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html body[data-page] .mos-counter.is-counting .mos-counter-final { visibility: visible; }
  html body[data-page] .mos-counter.is-counting .mos-counter-live { display: none; }
  html body[data-page] .mos-count-refreshing svg { animation: none; }
  html[data-pp-mode="css"] main { animation: none; }
  html body[data-page] :is(.mos-action, .mos-tile, .mos-control, .mos-nav-link, .mos-tab, .mos-field),
  html body[data-page] .mos-tile :is(.chip, .pv-service-icon, svg),
  html body[data-page] .mos-control svg,
  html body[data-page] .mos-action::after { transition: none; }
  html body[data-page] :is(.mos-action, .mos-tile, .mos-control, .mos-nav-link, .mos-tab):is(:hover, :active, .mos-is-pressed),
  html body[data-page] .mos-tile:hover :is(.chip, .pv-service-icon, svg),
  html body[data-page] .mos-control:hover svg { transform: none; }
  html body[data-page] .mos-action::after { display: none; }
  html body[data-page] .mos-announcement { height: auto; min-height: 40px; }
  html body[data-page] .mos-announcement-viewport { min-height: 40px; padding: 7px 16px; }
  html body[data-page] .mos-announcement-track { position: static; display: flex; flex-wrap: wrap; gap: 4px 24px; width: auto; height: auto; animation: none; opacity: 1; transform: none; }
  html body[data-page] .mos-announcement-item { position: static; animation: none; opacity: 1; transform: none; }
  html body[data-page] .mos-announcement.is-paused .mos-announcement-item { position: static; opacity: 1; visibility: visible; }
  html body[data-page] .mos-announcement-toggle { display: none; }
}