/* Hallmark DNA stamp : R3 Rounded Card Collage (mobile-first, doc)
   macro: rounded-card-collage · nav: N19 letter-spaced word rail · footer: Ft16 small-card-row close
   theme: MID-DARK paper oklch(26% .06 270) · hue anchor 270 (violet) + secondary 205 (azure)
   font: display Figtree / body-thai Niramit 700-heading · site: pgslot-thailand.net (SOP5 #6)
   6 truc: pre-emit ok / contrast AA / mobile-first / macro-unique / hue-pair / font-pair */
:root{
  --paper: oklch(26% .06 270);
  --paper-2: oklch(31% .06 270);
  --ink: oklch(94% .02 270);
  --ink-dim: oklch(76% .03 270);
  --anchor: oklch(72% .19 270);
  --anchor-dim: oklch(58% .16 270);
  --secondary: oklch(74% .13 205);
  --card: oklch(33% .05 270);
  --card-2: oklch(38% .05 270);
  --line: oklch(46% .05 270 / .5);
  --radius-xl: 28px;
  --radius-lg: 22px;
  --radius-md: 16px;
  --font-display: "Figtree", "Niramit", sans-serif;
  --font-thai: "Niramit", "Figtree", sans-serif;
  --maxw: 720px;
}
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font-thai);line-height:1.7;font-size:16px;
  overflow-x:clip;
}
img{max-width:100%;display:block;object-fit:cover}
a{color:var(--secondary);text-decoration:none}
h1,h2,h3{font-family:var(--font-display);font-weight:800;color:var(--ink);line-height:1.25;margin:0 0 .5em}
h1{font-size:clamp(1.6rem,5vw,2.4rem)}
h2{font-size:1.4rem}
h3{font-size:1.05rem;font-weight:700}
p{margin:0 0 1em;color:var(--ink-dim)}
main{max-width:var(--maxw);margin:0 auto;padding:0 18px 40px}

/* ---- header word-rail (N19) ---- */
.site-head{
  background:var(--paper-2);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:20;
}
.word-rail{
  max-width:var(--maxw);margin:0 auto;display:flex;gap:22px;
  padding:16px 18px;overflow-x:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.word-rail::-webkit-scrollbar{display:none}
.word-rail a{
  font-family:var(--font-display);font-weight:700;font-size:.82rem;
  letter-spacing:.28em;text-transform:uppercase;color:var(--ink-dim);
  white-space:nowrap;flex:0 0 auto;transition:color .2s;
}
.word-rail a:hover{color:var(--anchor)}

/* ---- collage-tall ---- */
.collage-tall{
  position:relative;margin:22px 0;border-radius:var(--radius-xl);
  overflow:hidden;background:var(--card);
}
.collage-tall-img{width:100%;aspect-ratio:652/880;object-fit:cover;border-radius:var(--radius-xl)}
.collage-tall .cap{
  position:absolute;left:20px;right:20px;bottom:18px;margin:0;
  color:var(--ink);font-weight:600;font-size:.92rem;
  background:oklch(20% .04 270 / .55);backdrop-filter:blur(6px);
  padding:10px 14px;border-radius:var(--radius-md);
}

/* ---- media-pill ---- */
.media-pill{
  display:flex;flex-wrap:wrap;gap:10px;margin:22px 0;
  background:var(--card);border-radius:999px;padding:10px 14px;
}
.media-pill.faq-list{flex-direction:column;border-radius:var(--radius-lg);gap:0;padding:6px 0}
.pill-item{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.86rem;color:var(--ink-dim);font-weight:600;
  padding:8px 14px;border-radius:999px;background:var(--card-2);
  white-space:nowrap;
}
.pill-item a{white-space:nowrap}
.pill-dot{width:8px;height:8px;border-radius:50%;background:var(--anchor);flex:0 0 auto}
.qa-item{padding:16px 18px;border-bottom:1px solid var(--line)}
.qa-item:last-child{border-bottom:none}
.qa-item h3{color:var(--secondary);margin-bottom:.35em}

/* ---- collage-wide ---- */
.collage-wide{
  position:relative;margin:22px 0;border-radius:var(--radius-xl);
  overflow:hidden;background:var(--card);
}
.collage-wide-img{width:100%;aspect-ratio:16/8;object-fit:cover}
.collage-wide .cap{
  padding:14px 18px 2px;margin:0;font-size:.9rem;color:var(--ink-dim);
}

/* ---- collage-pair ---- */
.collage-pair{
  position:relative;display:grid;grid-template-columns:1fr 1fr;gap:14px;
  margin:44px 0 22px;
}
.pair-card{
  background:var(--card);border-radius:var(--radius-lg);overflow:hidden;padding-bottom:14px;
}
.pair-card:nth-child(2){transform:translateY(18px)}
.pair-img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--radius-lg) var(--radius-lg) 0 0}
.pair-card h3,.pair-card p{padding:0 14px;margin:10px 0 0}
.pair-card p{margin-top:4px;font-size:.86rem}
.floating-round-btn{
  position:absolute;left:50%;top:calc(50% + 9px);transform:translate(-50%,-50%);
  z-index:5;
}
.floating-round-btn button{
  width:52px;height:52px;border-radius:50%;border:3px solid var(--paper);
  background:var(--anchor);color:var(--paper);font-size:1.4rem;font-weight:800;
  cursor:pointer;box-shadow:0 8px 18px oklch(10% .05 270 / .5);
}

/* ---- trust + cta ---- */
.trust-row{display:flex;flex-wrap:wrap;gap:14px;margin:18px 0}
.trust-row a{font-size:.82rem;color:var(--ink-dim);text-decoration:underline;white-space:nowrap}
.cta-wrap{text-align:center;margin:26px 0 6px}
.cta-aff{
  display:inline-block;padding:14px 34px;border-radius:999px;
  background:linear-gradient(120deg,var(--anchor),var(--secondary));
  color:oklch(14% .02 270);font-weight:800;font-size:.95rem;white-space:nowrap;
  box-shadow:0 10px 24px oklch(20% .1 270 / .4);
}

/* ---- footer small-card-row (Ft16, closes page, no columns) ---- */
.site-foot{background:var(--paper-2);border-top:1px solid var(--line);margin-top:30px;padding:26px 0 20px}
.small-card-row{
  max-width:var(--maxw);margin:0 auto;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:0 18px;
}
.mini-card{
  background:var(--card);border-radius:var(--radius-lg);overflow:hidden;
  display:flex;flex-direction:column;color:var(--ink);
}
.mini-card-media{position:relative;display:block}
.mini-card-img{width:100%;aspect-ratio:1/1;object-fit:cover}
.round-btn{
  position:absolute;right:8px;top:8px;width:28px;height:28px;border-radius:50%;
  background:var(--anchor);color:var(--paper);display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:.8rem;
}
.mini-card-body{padding:10px 12px 14px;display:flex;flex-direction:column;gap:4px}
.mini-card-body strong{font-size:.82rem;color:var(--ink)}
.mini-card-body span{font-size:.74rem;color:var(--ink-dim)}
.legal-row{
  max-width:var(--maxw);margin:16px auto 0;display:flex;flex-wrap:wrap;gap:16px;
  padding:14px 18px 0;border-top:1px solid var(--line);
}
.legal-row a{font-size:.78rem;color:var(--ink-dim);white-space:nowrap}

@media (max-width:560px){
  .small-card-row{grid-template-columns:1fr;gap:10px}
  .mini-card{flex-direction:row;align-items:center}
  .mini-card-media{flex:0 0 84px;width:84px}
  .mini-card-img{aspect-ratio:1/1}
  .round-btn{width:22px;height:22px;font-size:.68rem}
  .mini-card-body{padding:8px 12px}
  .mini-card-body strong{font-size:.86rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mini-card-body span{display:none}
  .collage-pair{grid-template-columns:1fr 1fr}
}

@keyframes pulse-dot{0%{opacity:.5}50%{opacity:1}100%{opacity:.5}}
.pill-dot{animation:pulse-dot 2.4s ease-in-out infinite}
@media (prefers-reduced-motion: reduce){
  .pill-dot{animation:none}
  *{scroll-behavior:auto !important}
}

/* CTA aff header (SOP5, agy 3.8-high) */
.site-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.site-header-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 16px;
  font-family: var(--font-thai);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  color: var(--paper);
  background-color: var(--anchor);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  flex-shrink: 0;
  transition: background-color 150ms ease, transform 120ms ease;
}
.site-header-cta:hover {
  background-color: var(--secondary);
  color: var(--paper);
}
.site-header-cta:focus-visible {
  outline: 2px solid var(--secondary);
  outline-offset: 2px;
}
.site-header-cta:active {
  transform: scale(0.97);
}
@media (max-width: 430px) {
  .site-header-cta {
    min-height: 44px;
    padding: 0 12px;
    font-size: 13px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .site-header-cta {
    transition: none;
    transform: none;
  }
}

/* CTA gap mep phai (do duoc gap=0 o 390px: nut cham sat le, thieu khoang tho).
   Rang buoc co hoc, khong doi thiet ke. */
@media (max-width: 430px) {
  .site-head { padding-right: 14px; box-sizing: border-box; }
}