@font-face {
  font-family: "Cafeta";
  src: url("/assets/fonts/utm-cafeta.ttf") format("truetype");
  font-display: swap;
  unicode-range: U+0000-2012, U+2015-FFFF;
}
:root {
  --ink: #123c37; --ink-2: #1c4c44; --ink-3: #295d51;
  --paper: #f6f1e4; --paper-2: #ece3cd; --paper-3: #d7c49a;
  --text: #233e36; --muted: #576452; --gold: #d9b56c; --gold-hi: #f4dfaa;
  --red: #a53524; --red-hi: #c95035; --red-lo: #752719;
  --f-brush: "Pattaya", "Cafeta", serif;
  --f-display: "Cafeta", "Roboto", system-ui, sans-serif;
  --f-body: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--text); background: var(--paper); font: 400 16px/1.65 var(--f-body); }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: 3px; }
button, input { font: inherit; color: inherit; }
::selection { color: #fff8e6; background: var(--red); }
:focus-visible { outline: 3px solid var(--red-hi); outline-offset: 3px; }
.site-head { position: sticky; z-index: 20; top: 0; display: flex; align-items: center; justify-content: space-between; min-height: 68px; padding: 8px clamp(16px, 4vw, 48px); color: #fff7e7; background: #123c37f7; border-bottom: 1px solid #d9b56c99; }
.brand img { width: 132px; height: auto; }
.site-head nav { display: flex; align-items: center; gap: 8px; }
.site-head nav a { padding: 10px 13px; font: 400 18px/1 var(--f-display); text-decoration: none; border-radius: 4px 12px; }
.site-head nav a:hover { color: var(--gold-hi); background: #f4dfaa18; }
.site-head nav .primary { padding: 11px 20px; color: #ffffff; background: linear-gradient(#a53524, var(--red) 55%, var(--red-lo)); border: 1px solid var(--gold); box-shadow: inset 0 1px #ffecbe88, inset 0 -2px #0004; }
.masthead { position: relative; isolation: isolate; min-height: 310px; overflow: hidden; color: #fff7e7; background: var(--ink); }
.masthead__art { position: absolute; z-index: -2; inset: 0; background: url("/assets/img/art-konoha-bridge.webp") center 43% / cover no-repeat; }
.masthead::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, #123c37f5 0%, #123c37d9 48%, #123c3760 100%); }
.masthead__inner { width: min(1180px, calc(100% - 32px)); margin: auto; padding: 66px 0 54px; }
.back-home { display: inline-block; margin-bottom: 18px; color: var(--gold-hi); font: 400 18px/1 var(--f-display); text-decoration: none; }
.masthead h1 { max-width: 760px; margin: 0; color: var(--gold-hi); font: 400 clamp(45px, 6vw, 72px)/1.08 var(--f-brush); text-shadow: 0 3px #6c351a, 0 10px 28px #0008; text-wrap: balance; }
.masthead p { max-width: 650px; margin: 14px 0 0; color: #f6ead2; font-size: 18px; }
.layout { display: grid; grid-template-columns: minmax(280px, 350px) minmax(0, 1fr); gap: clamp(22px, 3vw, 38px); width: min(1180px, calc(100% - 32px)); margin: -34px auto 70px; align-items: start; }
.archive, .article { position: relative; background: linear-gradient(180deg, #fffdf6, #f3e7ca); box-shadow: 0 24px 50px -32px #173d39cc; }
.archive { z-index: 2; overflow: hidden; border-radius: 6px 22px; }
.archive::after, .article::after { content: ""; position: absolute; pointer-events: none; inset: 6px; border: 1px solid #d9b56c99; border-radius: 2px 17px; }
.archive__tools { padding: 26px 24px 14px; }
.archive__tools label { display: block; margin-bottom: 7px; color: var(--ink); font: 400 19px/1 var(--f-display); }
.archive__tools input { width: 100%; height: 44px; padding: 0 13px; background: #fffdf6; border: 1px solid #b6b79e; border-radius: 4px; caret-color: var(--red); }
.archive__tools input:focus { border-color: var(--ink-3); outline: 3px solid #295d5124; }
.tabs { display: flex; overflow-x: auto; gap: 0; padding: 0 18px; border-bottom: 1px solid var(--paper-3); scrollbar-width: thin; }
.tabs button { position: relative; flex: 0 0 auto; padding: 10px 8px 12px; color: var(--muted); background: none; border: 0; cursor: pointer; font: 400 17px/1 var(--f-display); }
.tabs button[aria-selected="true"] { color: var(--red); }
.tabs button[aria-selected="true"]::after { content: ""; position: absolute; right: 8px; bottom: -1px; left: 8px; height: 3px; background: var(--red); }
.archive__count { margin: 14px 24px 4px; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.archive__list { max-height: min(66vh, 720px); margin: 0; padding: 6px 12px 18px; overflow-y: auto; list-style: none; scrollbar-color: var(--gold) transparent; }
.archive__list li + li { border-top: 1px dashed #6f4f3344; }
.archive__list a { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 14px 12px; text-decoration: none; border-radius: 4px 12px; }
.archive__list a:hover { background: #e7b24a1a; }
.archive__list a[aria-current="page"] { color: var(--red-lo); background: #e7b24a26; }
.archive__title { font: 400 18px/1.25 var(--f-display); }
.archive__date { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.archive__cat { grid-column: 1 / -1; width: max-content; padding: 3px 6px; color: #fff8e6; background: var(--red); border-radius: 3px; font: 400 12px/1 var(--f-display); }
.archive__cat[data-cat="tin-tuc"] { background: #5d3b22; }
.archive__cat[data-cat="tinh-nang"] { background: #2f6b5b; }
.archive__cat[data-cat="huong-dan"] { background: #7a5419; }
.article { min-height: 540px; padding: clamp(30px, 5vw, 62px); border-radius: 6px 24px; outline: none; }
.article__hero { position: relative; z-index: 1; margin: calc(clamp(30px, 5vw, 62px) * -1) calc(clamp(30px, 5vw, 62px) * -1) 34px; overflow: hidden; aspect-ratio: 16 / 7; border-radius: 6px 24px 0 0; background: var(--ink-2); }
.article__hero img { width: 100%; height: 100%; object-fit: cover; }
.article__hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, #123c37aa, transparent 55%); }
.article__meta { position: relative; z-index: 1; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 12px; color: var(--muted); font-size: 13px; }
.article__meta span { padding: 4px 8px; color: #fff8e6; background: var(--red); border-radius: 4px; font: 400 14px/1 var(--f-display); }
.article h1 { position: relative; z-index: 1; max-width: 100%; margin: 0 0 18px; color: var(--red-lo); font: 400 clamp(38px, 5vw, 58px)/1.1 var(--f-brush); text-wrap: balance; }
.article__body { position: relative; z-index: 1; max-width: 75ch; }
.article__body h2 { margin: 2.1em 0 .65em; color: var(--ink); font: 400 30px/1.15 var(--f-brush); }
.article__body h3 { margin: 1.75em 0 .55em; color: var(--ink-2); font: 400 23px/1.2 var(--f-display); }
.article__body h3 + ul { display: grid; gap: 7px; margin: 0 0 2em; padding: 4px 0 20px; list-style: none; border-bottom: 1px dashed #6f4f3344; }
.article__body h3 + ul li { position: relative; margin: 0; padding: 0 0 0 130px; }
.article__body h3 + ul li > strong:first-child { position: absolute; top: 0; left: 0; width: 118px; }
.article__body h3 + ul li strong { color: var(--ink); }
.article__body p { margin: 0 0 1em; }
.article__body ul, .article__body ol { margin: 0 0 1.3em; padding-left: 1.4em; }
.article__body li { margin: .4em 0; padding-left: .2em; }
.article__body li::marker { color: var(--red); font-weight: 700; }
.article__body a { color: var(--red-lo); font-weight: 500; }
.article__body img { max-height: 560px; margin: 1.6em auto; object-fit: contain; border-radius: 4px 18px; box-shadow: 0 20px 40px -24px #173d39cc; }
.article__body blockquote { margin: 1.5em 0; padding: 18px 22px; color: var(--ink); background: #ece3cd; border: 1px solid var(--gold); border-radius: 4px 14px; }
.article__body blockquote p:last-child { margin-bottom: 0; }
.article__body code { padding: 2px 5px; color: #fff7e7; background: var(--ink-2); border-radius: 3px; font-size: .9em; }
.article__body pre { overflow-x: auto; padding: 18px; color: #fff7e7; background: var(--ink-2); border-radius: 4px 14px; }
.article__body pre code { padding: 0; }
.article__body hr { margin: 2em 0; border: 0; border-top: 1px solid var(--paper-3); }
.md-table { max-width: 100%; margin: 1.4em 0; overflow-x: auto; border: 1px solid var(--paper-3); border-radius: 4px 14px; }
.md-table table { width: 100%; border-collapse: collapse; font-size: 14px; }
.md-table th, .md-table td { min-width: 150px; padding: 11px 13px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--paper-3); }
.md-table th:first-child, .md-table td:first-child { min-width: 210px; }
.md-table td img { display: inline-block; width: 44px; height: 44px; max-height: none; margin: 0 10px 0 0; object-fit: contain; vertical-align: middle; border-radius: 8px; box-shadow: none; }
.md-table th { color: #fff7e7; background: var(--ink-2); font: 400 17px/1.2 var(--f-display); }
.md-table tr:last-child td { border-bottom: 0; }
.md-table tbody tr:nth-child(even) { background: #ece3cd88; }
.article__empty { position: relative; z-index: 1; display: grid; grid-template-columns: 150px 1fr; gap: 22px; min-height: 420px; align-items: center; }
.article__empty img { align-self: end; }
.article__empty h2 { margin: 0 0 8px; color: var(--ink); font: 400 38px/1.1 var(--f-brush); }
.article__empty p { max-width: 46ch; color: var(--muted); }
.article__error { position: relative; z-index: 1; padding: 40px 0; text-align: center; }
footer { padding: 34px 16px; color: #d9dcc5; text-align: center; background: var(--ink); border-top: 1px solid #d9b56c88; font-size: 13px; }
@media (max-width: 860px) {
  .site-head nav a:not(.primary) { display: none; }
  .masthead { min-height: 270px; }
  .layout { grid-template-columns: 1fr; margin-top: -24px; }
  .archive__list { max-height: 390px; }
  .article { min-height: 460px; }
}
@media (max-width: 560px) {
  .site-head { min-height: 60px; padding-inline: 12px; }
  .brand img { width: 108px; }
  .site-head nav .primary { padding: 10px 14px; font-size: 17px; }
  .masthead__inner { padding-top: 46px; }
  .masthead h1 { font-size: 43px; }
  .masthead p { font-size: 16px; }
  .layout { width: min(100% - 20px, 1180px); gap: 16px; }
  .article { padding: 26px 20px 36px; }
  .article__hero { margin: -26px -20px 28px; aspect-ratio: 16 / 9; }
  .article h1 { font-size: 38px; }
  .article__body h2 { font-size: 28px; }
  .article__body h3 + ul li { padding-left: 0; }
  .article__body h3 + ul li > strong:first-child { position: static; display: block; width: auto; margin-bottom: 1px; }
  .article__empty { grid-template-columns: 1fr; text-align: center; }
  .article__empty img { width: 120px; margin: auto; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }