:root {
  --color-paper: oklch(33% 0.050 38);
  --color-paper-surface: oklch(36% 0.048 38);
  --color-paper-card: oklch(29% 0.045 38);
  --color-paper-light: oklch(40% 0.042 38);
  --color-paper-dark: oklch(24% 0.040 38);
  --color-paper-edge: oklch(44% 0.045 38);
  --color-rule: oklch(46% 0.035 38);
  --color-rule-subtle: oklch(38% 0.028 38);
  --color-ink: oklch(93% 0.015 38);
  --color-ink-muted: oklch(78% 0.022 38);
  --color-ink-faint: oklch(64% 0.020 38);
  --color-accent: oklch(65% 0.110 38);
  --color-accent-hover: oklch(70% 0.115 38);
  --color-accent-active: oklch(60% 0.105 38);
  --color-accent-ink: oklch(18% 0.020 38);
  --color-secondary: oklch(58% 0.090 18);
  --color-secondary-surface: oklch(28% 0.040 18);
  --color-focus: oklch(75% 0.100 38);
  --color-tape: oklch(72% 0.045 60);
  --color-tape-border: oklch(65% 0.040 60);
  --color-tape-ink: oklch(22% 0.020 60);

  --font-display: "Crimson Pro", ui-serif, Georgia, serif;
  --font-thai: "Taviraj", "Noto Serif Thai", ui-serif, serif;

  --space-3xs: 2px;
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;

  --radius-paper: 2px;
  --radius-chip: 999px;

  --max-width: 1180px;

  --dur-short: 180ms;
  --dur-normal: 220ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}


:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 1px;
}


.r88-layout-container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--space-lg);
}


/* Torn paper dividers and edges */
.r88-torn-bottom {
  clip-path: polygon(
    0% 0%, 100% 0%,
    100% calc(100% - 10px),
    95% 100%, 90% calc(100% - 8px),
    85% calc(100% - 3px), 80% calc(100% - 9px),
    75% calc(100% - 2px), 70% calc(100% - 11px),
    65% calc(100% - 4px), 60% calc(100% - 10px),
    55% calc(100% - 2px), 50% calc(100% - 8px),
    45% calc(100% - 3px), 40% calc(100% - 12px),
    35% calc(100% - 4px), 30% calc(100% - 9px),
    25% calc(100% - 2px), 20% calc(100% - 10px),
    15% calc(100% - 4px), 10% calc(100% - 8px),
    5% calc(100% - 2px), 0% calc(100% - 10px)
  );
}


.r88-torn-both {
  clip-path: polygon(
    0% 10px, 5% 2px, 10% 8px, 15% 4px, 20% 10px,
    25% 2px, 30% 9px, 35% 4px, 40% 12px, 45% 3px,
    50% 8px, 55% 2px, 60% 10px, 65% 4px, 70% 11px,
    75% 2px, 80% 9px, 85% 3px, 90% 8px, 95% 2px,
    100% 10px,
    100% calc(100% - 10px),
    95% 100%, 90% calc(100% - 8px),
    85% calc(100% - 3px), 80% calc(100% - 9px),
    75% calc(100% - 2px), 70% calc(100% - 11px),
    65% calc(100% - 4px), 60% calc(100% - 10px),
    55% calc(100% - 2px), 50% calc(100% - 8px),
    45% calc(100% - 3px), 40% calc(100% - 12px),
    35% calc(100% - 4px), 30% calc(100% - 9px),
    25% calc(100% - 2px), 20% calc(100% - 10px),
    15% calc(100% - 4px), 10% calc(100% - 8px),
    5% calc(100% - 2px), 0% calc(100% - 10px)
  );
}


.r88-tape-strip {
  position: absolute;
  top: calc(var(--space-sm) * -1);
  left: 50%;
  transform: translateX(-50%) rotate(-1.5deg);
  width: 80px;
  height: 20px;
  background-color: var(--color-tape);
  border: 1px dashed var(--color-tape-border);
  opacity: 0.85;
  z-index: 2;
  box-shadow: 0 1px 2px var(--color-paper-dark);
}


.r88-mast-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-md);
}


.r88-mast-brand {
  display: flex;
  flex-direction: column;
}


.r88-brand-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  color: var(--color-accent);
  letter-spacing: 0.05em;
  line-height: 1;
}


.r88-brand-sub {
  font-size: 13px;
  color: var(--color-ink-muted);
  line-height: 1.2;
}


.r88-mast-menu {
  display: flex;
}


.r88-mast-list {
  display: flex;
  align-items: center;
  list-style: none;
  gap: var(--space-lg);
  flex-wrap: wrap;
}


.r88-mast-link {
  font-size: 15px;
  color: var(--color-ink-muted);
  padding-block: var(--space-2xs);
  border-bottom: 1px solid transparent;
  transition: color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out);
  white-space: nowrap;
}


.r88-mast-link:hover {
  color: var(--color-ink);
  border-color: var(--color-accent);
}


.r88-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xs) var(--space-lg);
  font-family: var(--font-thai);
  font-size: 15px;
  font-weight: 700;
  border-radius: var(--radius-paper);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--dur-short) var(--ease-out), opacity var(--dur-short) var(--ease-out);
}


.r88-btn:active {
  transform: scale(0.98);
}


.r88-btn-accent {
  background-color: var(--color-accent);
  color: var(--color-accent-ink);
  border-color: var(--color-accent-hover);
}


.r88-btn-accent:hover {
  background-color: var(--color-accent-hover);
}


/* 2. Crumb */
.r88-crumb-wrapper {
  background-color: var(--color-paper-surface);
  border-bottom: 1px solid var(--color-rule-subtle);
  padding-block: var(--space-sm);
}


.r88-crumb-list {
  display: flex;
  align-items: center;
  list-style: none;
  gap: var(--space-xs);
  flex-wrap: wrap;
  font-size: 14px;
  color: var(--color-ink-faint);
}


.r88-crumb-link {
  color: var(--color-ink-muted);
  transition: color var(--dur-short) var(--ease-out);
}


.r88-crumb-link:hover {
  color: var(--color-accent);
}


.r88-crumb-separator {
  color: var(--color-rule);
  user-select: none;
}


.r88-crumb-current {
  color: var(--color-ink);
  font-weight: 700;
}


/* 3. Hero Slim */
.r88-hero-slim-section {
  background-color: var(--color-paper-card);
  border-bottom: 1px solid var(--color-rule);
  padding-block: var(--space-3xl) var(--space-4xl);
  position: relative;
}


.r88-hero-slim-content {
  max-width: 800px;
}


.r88-hero-slim-title {
  font-size: clamp(28px, 4vw, 38px);
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-ink);
  margin-block-end: var(--space-sm);
  overflow-wrap: anywhere;
}


.r88-hero-slim-lede {
  font-size: 18px;
  color: var(--color-ink-muted);
  line-height: 1.6;
}


/* 4 & 5. Content Grid: Article Body + Aside Note */
.r88-content-section {
  padding-block: var(--space-3xl);
}


.r88-content-grid-container {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2xl);
  align-items: start;
}


@media (min-width: 1024px) {
  .r88-content-grid-container {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  }}


.r88-article-main {
  background-color: var(--color-paper-surface);
  border: 1px solid var(--color-rule-subtle);
  border-radius: var(--radius-paper);
  padding: var(--space-2xl);
  box-shadow: 0 2px 6px var(--color-paper-dark);
}


.r88-prose h2 {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-accent);
  margin-block-start: var(--space-xl);
  margin-block-end: var(--space-md);
  border-bottom: 1px solid var(--color-rule-subtle);
  padding-block-end: var(--space-2xs);
  overflow-wrap: anywhere;
}


.r88-prose h2:first-child {
  margin-block-start: 0;
}


.r88-prose p {
  margin-block-end: var(--space-lg);
  color: var(--color-ink);
}


.r88-prose ul {
  margin-block-end: var(--space-lg);
  padding-inline-start: var(--space-xl);
}


.r88-prose li {
  margin-block-end: var(--space-xs);
  color: var(--color-ink);
}


.r88-aside-note-wrapper {
  position: relative;
}


.r88-aside-paper-card {
  position: relative;
  background-color: var(--color-paper-card);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-paper);
  padding: var(--space-xl) var(--space-lg);
  box-shadow: 0 4px 8px var(--color-paper-dark);
}


.r88-aside-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-secondary);
  margin-block-end: var(--space-xs);
  border-bottom: 1px dashed var(--color-rule-subtle);
  padding-block-end: var(--space-2xs);
}


.r88-aside-desc {
  font-size: 15px;
  color: var(--color-ink-muted);
  line-height: 1.6;
  margin-block-end: var(--space-md);
}


.r88-aside-list {
  list-style: none;
  font-size: 14px;
}


.r88-aside-list li {
  position: relative;
  padding-inline-start: var(--space-md);
  margin-block-end: var(--space-xs);
  color: var(--color-ink);
  line-height: 1.5;
}


.r88-aside-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--color-accent);
  font-weight: bold;
}


/* 6. Media Strip */
.r88-media-strip-section {
  padding-block: var(--space-2xl);
  background-color: var(--color-paper-dark);
  border-block: 1px solid var(--color-rule-subtle);
}


.r88-media-strip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-xl);
}


.r88-img-square-wrapper {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background-color: var(--color-paper-dark);
  border: 1px solid var(--color-rule-subtle);
}


.r88-media-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.r88-polaroid-caption {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-ink);
  text-align: center;
  margin-block-start: var(--space-md);
  line-height: 1.4;
}


/* 7. Mini FAQ */
.r88-faq-section {
  padding-block: var(--space-3xl);
}


.r88-faq-card {
  background-color: var(--color-paper-surface);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-paper);
  padding: var(--space-2xl);
  box-shadow: 0 4px 12px var(--color-paper-dark);
}


.r88-faq-heading {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-accent);
  margin-block-end: var(--space-xl);
  text-align: center;
}


.r88-faq-accordion {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}


.r88-faq-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  cursor: pointer;
  user-select: none;
  font-weight: 700;
  color: var(--color-ink);
  background-color: var(--color-paper-card);
  transition: background-color var(--dur-short) var(--ease-out);
}


.r88-faq-trigger:hover {
  background-color: var(--color-paper-surface);
}


.r88-faq-panel {
  display: none;
  padding: var(--space-md) var(--space-lg);
  border-top: 1px dashed var(--color-rule-subtle);
  background-color: var(--color-paper-dark);
  font-size: 15px;
  line-height: 1.75;
  color: var(--color-ink-muted);
}


/* 8. CTA Band */
.r88-cta-band-section {
  background-color: var(--color-paper-dark);
  border-block: 1px solid var(--color-rule);
  padding-block: var(--space-3xl);
  margin-block: var(--space-2xl);
  text-align: center;
}


.r88-cta-band-card {
  max-width: 680px;
  margin-inline: auto;
}


.r88-icon-label-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--color-ink-muted);
}


.r88-ft-icon {
  flex-shrink: 0;
  stroke: var(--color-accent);
}


.r88-ft-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-ink);
  white-space: nowrap;
}


.r88-footer-link {
  font-size: 14px;
  color: var(--color-ink-muted);
  transition: color var(--dur-short) var(--ease-out);
  white-space: nowrap;
}


.r88-footer-link:hover {
  color: var(--color-ink);
}


.r88-footer-copyright {
  border-top: 1px solid var(--color-rule-subtle);
  padding-block-start: var(--space-lg);
  text-align: center;
}


.r88-copyright-text {
  font-size: 13px;
  color: var(--color-ink-faint);
}


@media (max-width: 768px) {

  .r88-mast-container {
    flex-direction: column;
    align-items: flex-start;
  }

  .r88-mast-list {
    gap: var(--space-sm);
  }

  .r88-article-main {
    padding: var(--space-lg);
  }

  .r88-faq-card {
    padding: var(--space-lg);
  }}

  
/* lap rap: thanh dieu huong con + tien ich chung */
.r88-subnav{border-bottom:1px solid var(--c-rule,rgba(128,128,128,.35));}
.r88-subnav .r88-subnav-in{max-width:1180px;margin-inline:auto;padding:10px 24px;display:flex;
 flex-wrap:wrap;gap:8px 20px;align-items:center;font-size:15px;}
.r88-subnav .r88-subnav-lab{opacity:.72;}
.r88-subnav a{text-decoration:underline;text-underline-offset:3px;}
.r88-crumb-plain{max-width:1180px;margin-inline:auto;padding:10px 24px;font-size:14px;opacity:.78;}
.r88-prose a{text-decoration:underline;text-underline-offset:3px;}
.r88-prose h2{margin-top:1.6em;margin-bottom:.5em;}
.r88-prose p{margin-bottom:1em;}
.r88-prose ul{margin:0 0 1.2em 1.15em;}
.r88-prose li{margin-bottom:.45em;}
.r88-qa-list{display:grid;gap:12px;}
.r88-notfound-wrap{max-width:720px;margin-inline:auto;padding:64px 24px 96px;}
@media (max-width:520px){.r88-subnav .r88-subnav-in{padding:10px 16px;}.r88-crumb-plain{padding:10px 16px;}}

.r88-aside-title{font-size:19px;margin-bottom:10px;}
.r88-aside-text{font-size:15px;line-height:1.8;margin-bottom:12px;opacity:.9;}
.r88-aside-list{margin:0 0 0 1.05em;font-size:15px;line-height:1.75;}
.r88-aside-list li{margin-bottom:6px;}
.r88-motif{width:100%;height:100%;display:block;color:currentColor;opacity:.85;}