/* Hallmark · macro: tapchi-12cot · nav: thanh-mong-5link · footer: 3cot-noi-dung-that · hero: tinh-mau-lop · hue: 273 · corner: chamfer-7 · density: thoang · pre-emit P4 H4 E5 S3 R5 V5 · contrast: pass · mobile: 320/375/414/768 pass */

:root{
  /* color tokens, hue 273 orchid violet */
  --color-paper:      oklch(96% 0.04 273);
  --color-paper-2:    oklch(93% 0.05 273);
  --color-ink:        oklch(18% 0.06 273);
  --color-ink-soft:   oklch(28% 0.05 273);
  --color-muted:      oklch(50% 0.04 273);
  --color-line:       oklch(82% 0.05 273);
  --color-accent:     oklch(48% 0.18 273);
  --color-accent-ink: oklch(98% 0.01 273);
  --color-ok:         oklch(58% 0.14 165);
  --color-danger:     oklch(54% 0.20 25);
  --color-focus:      oklch(70% 0.18 273);

  /* type stack */
  --font-display: "Sriracha", "IBM Plex Sans Thai Looped", system-ui, sans-serif;
  --font-body:    "IBM Plex Sans Thai Looped", system-ui, sans-serif;

  /* spacing : 4pt grid */
  --space-xs:  4px;
  --space-s:   8px;
  --space-m:  16px;
  --space-l:  24px;
  --space-xl: 40px;

  /* type scale */
  --text-xs:      0.75rem;
  --text-s:       0.875rem;
  --text-base:    1rem;
  --text-m:       1.125rem;
  --text-l:       1.375rem;
  --text-xl:      1.75rem;
  --text-h2:      2.25rem;
  --text-h1:      3rem;
  --text-display: 4.25rem;

  /* motion */
  --ease-out:      cubic-bezier(.22,.61,.36,1);
  --ease-in:       cubic-bezier(.55,.06,.68,.19);
  --ease-in-out:   cubic-bezier(.65,0,.35,1);
  --dur-fast:  140ms;
  --dur-base:  260ms;
  --dur-slow:  520ms;

  /* form */
  --radius-chamfer: 7px;
  --rule: 1px solid var(--color-line);
}

/* reset */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{overflow-x:clip}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  font-family:var(--font-body);
  font-size:var(--text-base);
  line-height:1.8;
  color:var(--color-ink);
  background:var(--color-paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,video{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}

/* typography */
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-display);
  font-style:normal;
  font-weight:400;
  color:var(--color-ink);
  line-height:1.15;
  letter-spacing:-0.01em;
  overflow-wrap:anywhere;
  min-width:0;
}
h1{font-size:var(--text-h1)}
h2{font-size:var(--text-h2)}
h3{font-size:var(--text-xl)}
h4{font-size:var(--text-l)}
h5{font-size:var(--text-m)}
h6{font-size:var(--text-s)}
p,li,dd{overflow-wrap:anywhere;min-width:0}

/* layout grid 12 cols */
.wrap{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:var(--space-l);
  width:min(100%,1280px);
  margin-inline:auto;
  padding-inline:var(--space-m);
}
.col-12{grid-column:span 12}
.col-6{grid-column:span 6}
.col-4{grid-column:span 4}
.col-3{grid-column:span 3}
@media (max-width:768px){
  .wrap{grid-template-columns:1fr;gap:var(--space-m);padding-inline:var(--space-m)}
  .col-12,.col-6,.col-4,.col-3{grid-column:1/-1}
}

/* nav: thin bar, 5 links always visible, horizontal scroll on mobile */
.nav{
  position:sticky;top:0;z-index:50;
  background:var(--color-paper);
  border-bottom:var(--rule);
  height:44px;
  display:flex;align-items:center;
}
.nav-inner{
  display:flex;gap:var(--space-l);
  width:min(100%,1280px);
  margin-inline:auto;
  padding-inline:var(--space-m);
  overflow-x:auto;
  scrollbar-width:none;
}
.nav-inner::-webkit-scrollbar{display:none}
.nav a{
  flex:0 0 auto;
  white-space:nowrap;
  font-size:var(--text-s);
  letter-spacing:.04em;
  padding:var(--space-xs) 0;
  color:var(--color-ink-soft);
  transition:color var(--dur-base) var(--ease-out);
}
.nav a:hover{color:var(--color-accent)}
.nav a[aria-current="page"]{color:var(--color-accent);font-weight:500}

/* hero: static layered color field, no fixed attachment */
.hero{
  position:relative;
  padding-block:var(--space-xl) var(--space-xl);
  background:
    radial-gradient(60% 80% at 20% 20%, oklch(78% 0.14 273 / 0.55), transparent 70%),
    radial-gradient(50% 70% at 85% 30%, oklch(82% 0.12 290 / 0.45), transparent 65%),
    linear-gradient(180deg, var(--color-paper) 0%, var(--color-paper-2) 100%);
  border-bottom:var(--rule);
}
.hero h1{font-size:var(--text-display)}
@media (max-width:768px){.hero{padding-block:var(--space-l)}.hero h1{font-size:var(--text-h1)}}

/* footer 3 cols real content, single col on mobile */
.footer{
  margin-top:var(--space-xl);
  padding-block:var(--space-xl);
  background:var(--color-paper-2);
  border-top:var(--rule);
}
.footer .wrap{align-items:start}
.footer h6{
  font-family:var(--font-body);
  font-size:var(--text-s);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--color-muted);
  margin-bottom:var(--space-s);
}
.footer ul{list-style:none;display:grid;gap:var(--space-xs)}
.footer a{font-size:var(--text-s);color:var(--color-ink-soft)}
.footer a:hover{color:var(--color-accent)}
.footer-meta{
  grid-column:1/-1;
  display:flex;justify-content:space-between;gap:var(--space-m);
  padding-top:var(--space-l);margin-top:var(--space-l);
  border-top:var(--rule);
  font-size:var(--text-xs);color:var(--color-muted);
  flex-wrap:wrap;
}
@media (max-width:768px){
  .footer .col-4{grid-column:1/-1}
  .footer-meta{flex-direction:column}
}

/* chamfer corner */
.chamfer,.card,.btn,.fig{
  clip-path:polygon(
    var(--radius-chamfer) 0,
    100% 0,
    100% calc(100% - var(--radius-chamfer)),
    calc(100% - var(--radius-chamfer)) 100%,
    0 100%,
    0 var(--radius-chamfer)
  );
}

/* card */
.card{
  background:var(--color-paper);
  border:var(--rule);
  padding:var(--space-m);
  transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.card:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 28px -16px oklch(30% 0.08 273 / 0.35);
}

/* button: 8 states */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-s);
  padding:var(--space-s) var(--space-l);
  background:var(--color-accent);
  color:var(--color-accent-ink);
  border:1px solid var(--color-accent);
  font-size:var(--text-s);
  letter-spacing:.06em;
  cursor:pointer;
  position:relative;overflow:hidden;
  transition:
    transform var(--dur-fast) var(--ease-out),
    background var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 18px -10px var(--color-accent)}
.btn:active{transform:translateY(0)}
.btn:disabled,.btn[aria-disabled="true"]{
  background:var(--color-paper-2);color:var(--color-muted);
  border-color:var(--color-line);cursor:not-allowed;transform:none;box-shadow:none;
}
.btn:focus-visible{
  outline:2px solid var(--color-focus);
  outline-offset:2px;
  transition:none;
}
.btn.is-loading{color:transparent;pointer-events:none}
.btn.is-loading::before{
  content:"";
  position:absolute;left:50%;top:50%;
  width:14px;height:14px;margin:-7px 0 0 -7px;
  border:2px solid var(--color-accent-ink);
  border-top-color:transparent;border-radius:50%;
  animation:spin 700ms linear infinite;
}
.btn.is-error{background:var(--color-danger);border-color:var(--color-danger)}
.btn.is-success{background:var(--color-ok);border-color:var(--color-ok)}
@keyframes spin{to{transform:rotate(360deg)}}

/* ripple effect */
.btn .ripple{
  position:absolute;border-radius:50%;
  background:oklch(100% 0 0 / 0.35);
  transform:scale(0);animation:rip var(--dur-slow) var(--ease-out);
  pointer-events:none;
}
@keyframes rip{to{transform:scale(2.5);opacity:0}}

/* figure utilities: only 2 ratios */
.fig-1x1      {aspect-ratio:1 / 1}
.fig-portrait {aspect-ratio:1 / 0.74}
.fig{position:relative;background:var(--color-paper-2);overflow:hidden}
.fig img,.fig picture img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
}

/* fade-up */
@keyframes fadeUp{
  from{opacity:0;transform:translateY(14px)}
  to  {opacity:1;transform:none}
}
.fade-up{animation:fadeUp var(--dur-slow) var(--ease-out) both}

/* selection */
::selection{background:var(--color-accent);color:var(--color-accent-ink)}

/* density helpers */
.section{padding-block:var(--space-xl)}
@media (max-width:768px){.section{padding-block:var(--space-l)}}

/* readability queries */
@media (max-width:414px){:root{--text-base:0.95rem;--text-h1:2.25rem;--text-display:2.75rem}}
@media (max-width:375px){:root{--space-l:18px;--space-xl:32px}}
@media (max-width:320px){:root{--space-m:12px;--space-l:16px;--text-base:0.9rem}}
@media (min-width:1366px){:root{--text-base:1.0625rem}}

/* reduced motion: crossfade only, <=150ms */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:150ms !important;
    animation-delay:0ms !important;
    transition-duration:150ms !important;
    transition-delay:0ms !important;
  }
  .fade-up{animation:fadeUp 150ms linear both}
  .card:hover{transform:none}
  .btn:hover{transform:none}
  .btn.is-loading::before{animation:none;border-top-color:var(--color-accent-ink)}
}

.crumb-nav{font-size:var(--text-xs);color:var(--color-muted);margin-bottom:var(--space-m)}
.crumb-nav a{color:inherit;border-bottom:1px solid currentColor}
.crumb-nav a:hover{color:var(--color-accent)}
.crumb-sep{opacity:.6;padding-inline:var(--space-xs)}
dl{display:grid;gap:var(--space-s)}
dt{font-weight:600;margin-top:var(--space-m)}
dd{color:var(--color-ink-soft)}