/* ==========================================================================
 * 0.10.0 — quotes: the in-article blockquote styles (Theme Options → Quote
 * images → Blockquote style, a class on .entry-content) and the quote image
 * maker panel built by js/quote-card.js. Loaded after blog.css.
 * ========================================================================== */

/* ---------- blockquote styles (reading fonts only, nothing extra to load) ---------- */
.nhn-post .entry-content[class*="nhn-bq--"] blockquote {
    --nhn-bq-ink: var(--nhn-heading);
    position: relative;
    margin: var(--nhn-space-6) 0;
    border: 0;
    border-radius: 0;
    background: none;
    font-family: var(--nhn-font-reading);
    font-style: normal;
    color: var(--nhn-bq-ink);
}
.nhn-post .entry-content[class*="nhn-bq--"] blockquote > :last-child { margin-block-end: 0; }

/* Thư phòng: paper card, a vertical rule, a small cinnabar seal and a faint
 * ink scene (buffalo boy with flute, bamboo, far hills) sunk behind everything in the bottom right. */
.nhn-post .entry-content.nhn-bq--thu-phong blockquote {
    isolation: isolate;
    padding: var(--nhn-space-5) calc(var(--nhn-space-5) + 2.25rem) var(--nhn-space-5) var(--nhn-space-5);
    background:
        linear-gradient(color-mix(in srgb, var(--nhn-bq-ink) 35%, transparent), color-mix(in srgb, var(--nhn-bq-ink) 35%, transparent))
            right 1.6rem top var(--nhn-space-4) / 1px calc(100% - 2 * var(--nhn-space-4) - 1.9rem) no-repeat,
        var(--nhn-reading-card);
    border: 1px solid var(--nhn-reading-border);
    font-size: 1.12em;
    line-height: 1.85;
}
.nhn-post .entry-content.nhn-bq--thu-phong blockquote::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset-block-end: 0.35rem;
    inset-inline-end: 2.4rem;
    /* Height-led so a one-line quote never lets the art poke out of the card. */
    block-size: min(11rem, calc(100% - 0.7rem));
    max-inline-size: 60%;
    aspect-ratio: 400 / 260;
    background: var(--nhn-bq-ink);
    -webkit-mask: url("../img/quote/chan-trau.svg") center / contain no-repeat;
    mask: url("../img/quote/chan-trau.svg") center / contain no-repeat;
    opacity: 0.2;
    pointer-events: none;
}
:root[data-theme="dark"] .nhn-post .entry-content.nhn-bq--thu-phong blockquote::before { opacity: 0.17; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .nhn-post .entry-content.nhn-bq--thu-phong blockquote::before { opacity: 0.17; }
}
.nhn-post .entry-content.nhn-bq--thu-phong blockquote::after {
    content: "";
    position: absolute;
    inset-block-end: var(--nhn-space-4);
    inset-inline-end: 1.05rem;
    inline-size: 1.15rem;
    block-size: 1.15rem;
    border-radius: 2px;
    background: var(--nhn-bq-accent, #b3281f);
}

/* Trang sách: italic text with a hanging quotation mark. */
.nhn-post .entry-content.nhn-bq--trang-sach blockquote {
    padding: var(--nhn-space-2) 0 var(--nhn-space-2) clamp(2.6rem, 2rem + 2vw, 3.6rem);
    font-size: 1.2em;
    font-style: italic;
    line-height: 1.6;
}
.nhn-post .entry-content.nhn-bq--trang-sach blockquote::before {
    content: "\201C";
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: -0.12em;
    font: 400 4.2em/1 var(--nhn-font-reading);
    font-style: normal;
    color: var(--nhn-bq-accent, var(--nhn-reading-accent));
}

/* Đèn đêm: a night card with a lamp glow, the same in light and dark mode. */
.nhn-post .entry-content.nhn-bq--den-dem blockquote {
    --nhn-bq-ink: #f2e9d6;
    padding: clamp(1.6rem, 1.2rem + 2vw, 2.6rem);
    padding-inline-end: clamp(3rem, 2rem + 4vw, 5rem);
    background:
        radial-gradient(60% 90% at 92% 0%, color-mix(in srgb, var(--nhn-bq-accent, #f2b45a) 30%, transparent), transparent 70%),
        #121827;
    border-radius: var(--nhn-radius-md);
    font-size: 1.12em;
    font-style: italic;
    line-height: 1.75;
}
.nhn-post .entry-content.nhn-bq--den-dem blockquote::after {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 1.6rem;
    inline-size: 1.5rem;
    block-size: 1.9rem;
    background:
        radial-gradient(circle at 50% 100%, var(--nhn-bq-accent, #f2b45a) 0 0.75rem, transparent 0.78rem) bottom / 100% 0.78rem no-repeat,
        linear-gradient(#7a6a4c, #7a6a4c) center top / 2px 1.15rem no-repeat;
}
.nhn-post .entry-content.nhn-bq--den-dem blockquote a { color: #f2b45a; }

/* Bút dạ: bold sans with a highlighter band behind every line. */
.nhn-post .entry-content.nhn-bq--but-da blockquote {
    --nhn-bq-mark: color-mix(in srgb, var(--nhn-bq-accent, #ffdf3d) 70%, transparent);
    padding: 0;
    font-family: var(--nhn-font-body);
    font-size: 1.3em;
    font-weight: 700;
    line-height: 1.55;
    letter-spacing: -0.01em;
}
.nhn-post .entry-content.nhn-bq--but-da blockquote > p {
    display: inline;
    padding-inline: 0.2em;
    background: linear-gradient(transparent 55%, var(--nhn-bq-mark) 55%, var(--nhn-bq-mark) 92%, transparent 92%);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}
.nhn-post .entry-content.nhn-bq--but-da blockquote > p + p::before { content: "\A"; white-space: pre; }
:root[data-theme="dark"] .nhn-post .entry-content.nhn-bq--but-da blockquote {
    --nhn-bq-mark: color-mix(in srgb, var(--nhn-bq-accent, #ffdf3d) 32%, transparent);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .nhn-post .entry-content.nhn-bq--but-da blockquote {
        --nhn-bq-mark: color-mix(in srgb, var(--nhn-bq-accent, #ffdf3d) 32%, transparent);
    }
}

/* ---------- maker panel ---------- */
.nhn-qmaker-open,
.nhn-qmaker-open body { overflow: hidden; }

.nhn-qmaker {
    position: fixed;
    inset: 0;
    z-index: 95;
    display: grid;
    place-items: center;
    padding: var(--nhn-space-4);
    background: rgb(14 12 10 / 0.64);
}
.nhn-qmaker[hidden] { display: none; }

.nhn-qmaker__panel {
    inline-size: min(100%, 64rem);
    max-block-size: calc(100dvh - 2rem);
    overflow: auto;
    background: var(--nhn-card-surface);
    color: var(--nhn-text);
    border-radius: var(--nhn-radius-lg);
    box-shadow: 0 24px 60px -20px rgb(0 0 0 / 0.55);
}

.nhn-qmaker__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--nhn-space-3);
    padding: var(--nhn-space-4) var(--nhn-space-5);
    border-block-end: 1px solid var(--nhn-border-subtle);
}
.nhn-qmaker__title { margin: 0; font: 700 1.15rem/1.3 var(--nhn-font-body); color: var(--nhn-heading); }
.nhn-qmaker__close {
    inline-size: 2.5rem;
    block-size: 2.5rem;
    border: 0;
    border-radius: 50%;
    background: var(--nhn-surface-muted);
    color: var(--nhn-text-strong);
    font: 400 1.6rem/1 var(--nhn-font-body);
    cursor: pointer;
}

.nhn-qmaker__body {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: var(--nhn-space-5);
    padding: var(--nhn-space-5);
}
.nhn-qmaker__view { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: start; gap: var(--nhn-space-2); min-inline-size: 0; }
.nhn-qmaker__stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    place-items: center;
    inline-size: 100%;
    min-block-size: 16rem;
    padding: var(--nhn-space-3);
    background: repeating-conic-gradient(var(--nhn-surface-muted) 0 25%, transparent 0 50%) 0 0 / 18px 18px;
    border-radius: var(--nhn-radius-md);
}
.nhn-qmaker__canvas {
    display: block;
    max-inline-size: 100%;
    max-block-size: min(62dvh, 34rem);
    inline-size: auto;
    block-size: auto;
    box-shadow: 0 10px 28px -12px rgb(0 0 0 / 0.5);
}
.nhn-qmaker__status { margin: 0; min-block-size: 1.4em; font-size: var(--nhn-text-sm); color: var(--nhn-text-muted); }

.nhn-qmaker__controls { display: flex; flex-direction: column; gap: var(--nhn-space-2); }
.nhn-qmaker__label { margin: var(--nhn-space-2) 0 0; font: 600 var(--nhn-text-sm)/1.4 var(--nhn-font-body); color: var(--nhn-text-muted); }
.nhn-qmaker__choices { display: flex; flex-wrap: wrap; gap: var(--nhn-space-2); }
.nhn-qmaker__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-block-size: 2.5rem;
    padding: 0.35rem 0.9rem 0.35rem 0.45rem;
    border: 1px solid var(--nhn-border-subtle);
    border-radius: var(--nhn-radius-pill);
    background: transparent;
    color: var(--nhn-text-strong);
    font: 500 var(--nhn-text-sm)/1.2 var(--nhn-font-body);
    cursor: pointer;
    transition: border-color 150ms ease, background-color 150ms ease;
}
.nhn-qmaker__chip:not(:has(.nhn-qmaker__swatch)) { padding-inline: 0.95rem; }
.nhn-qmaker__chip:hover { border-color: var(--nhn-reading-accent); }
.nhn-qmaker__chip[aria-pressed="true"] {
    border-color: var(--nhn-reading-accent);
    background: color-mix(in srgb, var(--nhn-reading-accent) 12%, transparent);
    box-shadow: inset 0 0 0 1px var(--nhn-reading-accent);
}
.nhn-qmaker__swatch {
    inline-size: 1.6rem;
    block-size: 1.6rem;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.14);
}

.nhn-qmaker__actions { display: flex; flex-wrap: wrap; gap: var(--nhn-space-2); margin-block-start: auto; padding-block-start: var(--nhn-space-4); }
.nhn-qmaker__btn {
    min-block-size: 2.9rem;
    padding: 0.6rem 1.4rem;
    border: 1px solid var(--nhn-reading-accent);
    border-radius: var(--nhn-radius-pill);
    background: transparent;
    color: var(--nhn-reading-accent);
    font: 700 var(--nhn-text-sm)/1.2 var(--nhn-font-body);
    cursor: pointer;
}
.nhn-qmaker__btn--primary { background: var(--nhn-reading-accent); color: #fff; }
.nhn-qmaker__btn:disabled { opacity: 0.45; cursor: progress; }
.nhn-qmaker__panel:focus { outline: none; }
.nhn-qmaker__btn:hover { filter: brightness(1.08); }
.nhn-qmaker__close:focus-visible,
.nhn-qmaker__chip:focus-visible,
.nhn-qmaker__btn:focus-visible { outline: 2px solid var(--nhn-reading-accent); outline-offset: 2px; }

@media (max-width: 47.99rem) {
    .nhn-qmaker { padding: 0; place-items: end stretch; }
    .nhn-qmaker__panel { inline-size: 100%; max-block-size: 94dvh; border-radius: var(--nhn-radius-lg) var(--nhn-radius-lg) 0 0; }
    .nhn-qmaker__body { grid-template-columns: minmax(0, 1fr); padding: var(--nhn-space-4); gap: var(--nhn-space-3); }
    .nhn-qmaker__stage { min-block-size: 0; padding: var(--nhn-space-2); }
    .nhn-qmaker__canvas { max-block-size: 46dvh; }
    .nhn-qmaker__choices:first-of-type { flex-wrap: nowrap; overflow-x: auto; padding-block-end: 2px; scrollbar-width: none; }
    .nhn-qmaker__choices:first-of-type::-webkit-scrollbar { display: none; }
    .nhn-qmaker__chip { flex: none; }
    .nhn-qmaker__actions { position: sticky; inset-block-end: 0; padding-block: var(--nhn-space-3); background: var(--nhn-card-surface); }
}
@media (prefers-reduced-motion: reduce) {
    .nhn-qmaker__chip { transition: none; }
}