/* =============================================================
   HOITHAO — Conference Tracker Theme
   ----------------------------------
   Visual language: editorial warm-cream / ink. Inspired by
   avoidaiwriting.com — a paper-tone background with near-black
   ink and one saturated orange used sparingly as a "now/featured"
   highlight. Avoids cool blues; everything sits in warm hues
   except the orange accent.

   All selectors scoped under body.hoithao so the theme can coexist
   with sibling themes (e.g. minimalism). Class names match the
   mockup at html/template/themes/frontend/hoithao/index.html.
   Default typeface: Museo Sans (single weight, supports Vietnamese).
   ============================================================= */

@font-face {
    font-family: "Museo Sans";
    src: url("https://res.cloudinary.com/yeungon/raw/upload/v1779760909/font/vietnamese_museosanscyrl-500_1.otf")
        format("opentype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

body.hoithao {
    /* ── Colour tokens ─────────────────────────────────────────
       Warm cream + ink palette with one saturated orange highlight,
       inspired by avoidaiwriting.com. Foreground/background pairs
       all clear WCAG AA on small text (4.5:1 minimum). */
    --bg: #f5efe0;          /* warm paper, the dominant surface */
    --paper: #fdfaf2;       /* card / panel — slightly lighter than bg */
    --surface: #ffffff;
    --surface-hover: #efe7d3;  /* row/cell hover, slightly darker than bg */
    --fg: #0a0a0a;          /* near-black ink */
    --fg-soft: #2a2a2a;
    --muted: #5a5a5a;
    --faint: #707070;
    --border: rgba(10, 10, 10, 0.12);
    --border-strong: rgba(10, 10, 10, 0.24);
    --rule: #0a0a0a;

    /* Primary = ink. The primary action colour is the same near-black
       as the body text. Reserves one saturated colour (--highlight)
       for true emphasis. */
    --primary: #0a0a0a;
    --primary-dark: #2a2a2a;
    --primary-soft: rgba(10, 10, 10, 0.06);  /* faint ink wash for active nav, tags */
    --primary-glow: rgba(10, 10, 10, 0.08);  /* focus rings */

    /* Highlight — the brand pop. Used sparingly: hero accent number,
       today marker, required-field star, "opening" timeline chip,
       optional CTA variant. */
    --highlight: #ff6b35;
    --highlight-hover: #ff8555;
    --highlight-glow: rgba(255, 107, 53, 0.18);

    /* Secondary academic accents */
    --accent: #6b521b;            /* mustard, retained for warn-ish hover */
    --success: #2e7d32;
    --warn: #7c4209;
    --danger: #c62828;

    /* Pills — every fg/bg pair clears AA on small text.
       Pulled toward warmer hues to sit on the cream background. */
    --pill-far-bg: rgba(10, 10, 10, 0.06);
    --pill-far-fg: #2a2a2a;
    --pill-soon-bg: #f3ead2;
    --pill-soon-fg: #5e4408;
    --pill-urgent-bg: #fde0d4;
    --pill-urgent-fg: #8a2a0c;
    --pill-closed-bg: #e6ddc8;
    --pill-closed-fg: #4a473d;

    --radius: 3px;             /* tighter — more institutional */
    --radius-lg: 6px;
    --shadow-sm: 0 1px 0 rgba(0, 0, 0, 0.04);
    --shadow: 0 4px 16px rgba(20, 23, 27, 0.06);

    /* ── Typography ──────────────────────────────────────────── */
    --font: "Museo Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
        "Helvetica Neue", Arial, sans-serif;
    --font-sans: "Museo Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
        "Helvetica Neue", Arial, sans-serif;
    --mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono",
        Menlo, monospace;

    --page-max: 1200px;
    --page-pad: 32px;

    margin: 0;
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font);
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    /* Tabular numerals for every number on the page (counters,
       fees, dates, days-until). Prevents jitter when chips
       re-render. */
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1, "kern" 1;
}

/* Visible keyboard focus everywhere. :focus-visible only fires for
   keyboard navigation, so mouse clicks don't display a ring. */
body.hoithao *:focus { outline: none; }
body.hoithao *:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: 2px;
}

body.hoithao *,
body.hoithao *::before,
body.hoithao *::after {
    box-sizing: border-box;
}

/* In-prose links: ink-coloured with a hairline underline, no sienna
   pop. The navy --primary is reserved for chrome cues only. */
body.hoithao a {
    color: var(--fg);
    text-decoration: underline;
    text-decoration-color: var(--border-strong);
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
body.hoithao a:hover {
    color: var(--primary);
    text-decoration-color: var(--primary);
}

/* Strip the underline on chrome elements where it would be visual
   noise. Restores the clean library/catalogue feel. */
body.hoithao .topnav-link,
body.hoithao .topnav-cta,
body.hoithao .footer-links a,
body.hoithao .brand,
body.hoithao .btn,
body.hoithao .conf-row,
body.hoithao .timeline-item,
body.hoithao .chip,
body.hoithao .back-link,
body.hoithao .topic-link,
body.hoithao .tag,
body.hoithao .hero h1 a,
body.hoithao .detail-title a {
    text-decoration: none;
}

body.hoithao h1,
body.hoithao h2,
body.hoithao h3,
body.hoithao h4 {
    font-family: var(--font);
    font-weight: 700;
    letter-spacing: -0.005em;
    color: var(--fg);
    margin: 0;
}

body.hoithao p { margin: 0 0 1em 0; }
body.hoithao img { max-width: 100%; height: auto; }

body.hoithao .page {
    max-width: var(--page-max);
    margin: 0 auto;
    padding: 0 var(--page-pad);
}

/* ── Top navigation ───────────────────────────────────────────── */

body.hoithao .topnav {
    background: var(--paper);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 50;
}
body.hoithao .topnav-inner {
    display: flex;
    align-items: center;
    padding: 14px 0;
    gap: 24px;
    position: relative;        /* mobile drawer anchors here */
}

body.hoithao .brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font);
    color: var(--fg);
    line-height: 1.1;
}
body.hoithao .brand:hover { color: var(--fg); }

body.hoithao .brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--primary);
    color: var(--paper);
    border-radius: var(--radius);
    font-family: var(--mono);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.06em;
    flex-shrink: 0;
}
body.hoithao .brand-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
body.hoithao .brand-name {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.005em;
}
body.hoithao .brand-sub {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--muted);
    letter-spacing: 0.04em;
    text-transform: lowercase;
}

/* The single nav holds everything: links, spacer, counter, CTA.
   The spacer pushes counter + CTA to the right on desktop. */
body.hoithao .topnav-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    margin-left: 24px;
}
body.hoithao .topnav-link {
    color: var(--fg-soft);
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 500;
    padding: 8px 14px;
    border-radius: var(--radius);
    transition: background 0.15s ease, color 0.15s ease;
}
body.hoithao .topnav-link:hover {
    color: var(--fg);
    background: var(--primary-soft);
}
body.hoithao .topnav-link.active {
    color: var(--highlight);
    background: var(--primary-soft);
    font-weight: 700;
}

/* Spacer: invisible flex spring on desktop, hairline rule on mobile. */
body.hoithao .topnav-spacer {
    flex: 1 1 auto;
}

body.hoithao .nav-meta {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--muted);
    letter-spacing: 0.04em;
    padding: 0 6px;
}

body.hoithao .topnav-cta {
    margin-left: 6px;
}

/* ── Hamburger ────────────────────────────────────────────────── */

body.hoithao .hamburger {
    display: none;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    padding: 0;
    width: 44px;
    height: 44px;
    cursor: pointer;
    color: var(--fg);
    align-items: center;
    justify-content: center;
}
body.hoithao .hamburger:hover {
    border-color: var(--fg);
    background: var(--paper);
}
body.hoithao .hamburger-bars {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    width: 18px;
}
body.hoithao .hamburger-bars span {
    display: block;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform 0.18s ease, opacity 0.18s ease;
}
/* Animate to an X when the drawer is open. */
body.hoithao .hamburger[aria-expanded="true"] .hamburger-bars span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}
body.hoithao .hamburger[aria-expanded="true"] .hamburger-bars span:nth-child(2) {
    opacity: 0;
}
body.hoithao .hamburger[aria-expanded="true"] .hamburger-bars span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

/* ── Buttons ──────────────────────────────────────────────────── */

body.hoithao .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 18px;
    border-radius: var(--radius);
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 700;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    line-height: 1;
    min-height: 40px;
    letter-spacing: 0.01em;
}
body.hoithao .btn-primary {
    background: var(--primary);
    color: var(--paper);
    border-color: var(--primary);
}
body.hoithao .btn-primary:hover {
    background: var(--primary-dark);
    color: var(--paper);
    border-color: var(--primary-dark);
}
body.hoithao .btn-secondary {
    background: var(--surface);
    color: var(--fg);
    border-color: var(--border-strong);
}
body.hoithao .btn-secondary:hover {
    background: var(--surface-hover);
    color: var(--fg);
    border-color: var(--fg);
}
body.hoithao .btn-ghost {
    background: transparent;
    color: var(--fg-soft);
    border-color: transparent;
}
body.hoithao .btn-ghost:hover {
    color: var(--fg);
    background: var(--primary-soft);
}
/* Highlight CTA — reserved for the single most important action on
   a page (e.g. the hero "Subscribe" button). Use sparingly so the
   orange retains its meaning. */
body.hoithao .btn-highlight {
    background: var(--highlight);
    color: #fff;
    border-color: var(--highlight);
}
body.hoithao .btn-highlight:hover {
    background: var(--highlight-hover);
    color: #fff;
    border-color: var(--highlight-hover);
}
body.hoithao .btn-sm {
    padding: 8px 14px;
    font-size: 14px;
    min-height: 36px;
}

/* ── Hero ─────────────────────────────────────────────────────── */

body.hoithao .hero {
    padding: 48px 0 36px 0;
    border-bottom: 1px solid var(--border);
}
body.hoithao .hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--mono);
    font-size: 12px;
    color: var(--muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 18px;
}
body.hoithao .hero-eyebrow .dot,
body.hoithao .form-eyebrow .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--highlight);
    display: inline-block;
}
body.hoithao .hero h1 {
    font-size: 42px;            /* calmer than 52 — more academic */
    line-height: 1.08;
    margin: 0 0 16px 0;
    letter-spacing: -0.015em;
    font-weight: 700;
    max-width: 22ch;
    text-transform: none;
}
body.hoithao .hero p {
    max-width: 64ch;
    font-size: 17px;
    color: var(--fg-soft);
    line-height: 1.6;
}
body.hoithao .hero-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    margin-top: 32px;
    padding-top: 28px;
    border-top: 1px dashed var(--border-strong);
}
body.hoithao .hero-stat .num {
    font-family: var(--mono);
    font-size: 32px;
    font-weight: 700;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.1;
    line-height: 1;
    color: var(--fg);
    margin-bottom: 8px;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}
body.hoithao .hero-stat .num .accent { color: var(--highlight); }
body.hoithao .hero-stat .lab {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* ── Toolbar / filters ────────────────────────────────────────── */

body.hoithao .toolbar {
    padding: 24px 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
body.hoithao .search { position: relative; max-width: 560px; }
body.hoithao .search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--muted);
    pointer-events: none;
}
body.hoithao .search input {
    width: 100%;
    padding: 12px 14px 12px 40px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--fg);
    font-family: var(--font-sans);
    font-size: 15px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    min-height: 44px;
}
body.hoithao .search input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-glow);
}

body.hoithao .filter-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px 24px;
}
body.hoithao .filter-group {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
body.hoithao .filter-label {
    font-family: var(--mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
}
body.hoithao .chip-row {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
}
body.hoithao .chip {
    background: var(--surface);
    border: 1px solid var(--border-strong);
    color: var(--fg-soft);
    padding: 7px 13px;
    border-radius: 999px;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
}
body.hoithao .chip:hover {
    border-color: var(--fg);
    color: var(--fg);
}
body.hoithao .chip.active {
    background: var(--fg);
    border-color: var(--fg);
    color: var(--paper);
    font-weight: 700;
}
body.hoithao .filter-result {
    margin-left: auto;
    font-family: var(--mono);
    font-size: 12px;
    color: var(--muted);
}

/* ── Field disclosure (40-row taxonomy popover) ───────────────────
   Native <details> dropdown for the dashboard "Lĩnh vực ▾" filter.
   The trigger looks like a chip; the panel is absolutely positioned
   below it on desktop and pinned to the bottom of the viewport on
   mobile so the 7 grouped sections stay scannable on narrow screens.
*/
body.hoithao .field-disclosure {
    position: relative;
}
body.hoithao .field-disclosure-trigger {
    background: var(--surface);
    border: 1px solid var(--border-strong);
    color: var(--fg-soft);
    padding: 7px 12px 7px 13px;
    border-radius: 999px;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    list-style: none;        /* WebKit shows a triangle by default */
    user-select: none;
}
body.hoithao .field-disclosure-trigger::-webkit-details-marker {
    display: none;
}
body.hoithao .field-disclosure-trigger:hover {
    border-color: var(--fg);
    color: var(--fg);
}
body.hoithao .field-disclosure-trigger.active {
    background: var(--fg);
    border-color: var(--fg);
    color: var(--paper);
    font-weight: 700;
}
body.hoithao .field-disclosure-caret {
    width: 14px;
    height: 14px;
    transition: transform 0.15s ease;
}
body.hoithao .field-disclosure[open] .field-disclosure-caret {
    transform: rotate(180deg);
}

body.hoithao .field-disclosure-panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 30;
    min-width: 320px;
    max-width: min(680px, calc(100vw - 32px));
    max-height: min(520px, calc(100vh - 200px));
    overflow-y: auto;
    background: var(--paper);
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
    padding: 14px 16px 18px;
}
/* Desktop: 320px floor was sized for narrow phones; on a 1280px+
   viewport the popover ends up squeezing the 15-chip "Toán & Khoa
   học máy tính" group into 6+ rows. Bump the floor (and the ceiling)
   so the chips have room to breathe. Mobile keeps the 320px min via
   the `<600px` rule below, which pins the panel full-width anyway. */
@media (min-width: 900px) {
    body.hoithao .field-disclosure-panel {
        min-width: 560px;
        max-width: min(720px, calc(100vw - 64px));
    }
}
body.hoithao .field-disclosure-head {
    padding-bottom: 10px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--border);
}
body.hoithao .field-disclosure-clear {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 999px;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    color: var(--fg-soft);
    text-decoration: none;
    border: 1px solid var(--border-strong);
    background: var(--surface);
    transition: all 0.15s ease;
}
body.hoithao .field-disclosure-clear:hover {
    border-color: var(--fg);
    color: var(--fg);
}
body.hoithao .field-disclosure-clear.active {
    background: var(--fg);
    border-color: var(--fg);
    color: var(--paper);
    font-weight: 700;
}

body.hoithao .field-disclosure-groups {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
body.hoithao .field-disclosure-group-title {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    margin: 0 0 8px 0;
}
body.hoithao .field-disclosure-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
body.hoithao .field-disclosure-chips .chip {
    font-size: 13px;
    padding: 5px 11px;
    min-height: 28px;
}

/* Mobile: pin the panel to the bottom edge so a 7-group list with
   ~40 chips doesn't get squeezed into a tiny popover. */
@media (max-width: 600px) {
    body.hoithao .field-disclosure-panel {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        max-width: none;
        max-height: 70vh;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.18);
    }
}

/* ── Pills (deadline state) ───────────────────────────────────── */

body.hoithao .pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 3px;       /* squarer = more catalogue-like */
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: lowercase;
}
body.hoithao .pill-far    { background: var(--pill-far-bg);    color: var(--pill-far-fg); }
body.hoithao .pill-soon   { background: var(--pill-soon-bg);   color: var(--pill-soon-fg); }
body.hoithao .pill-urgent { background: var(--pill-urgent-bg); color: var(--pill-urgent-fg); }
body.hoithao .pill-closed { background: var(--pill-closed-bg); color: var(--pill-closed-fg); }

/* ── Conference table ─────────────────────────────────────────── */

body.hoithao .conf-table {
    margin: 24px 0 64px 0;
    border-top: 2px solid var(--rule);
    border-bottom: 1px solid var(--border);
}
body.hoithao .conf-thead {
    display: grid;
    grid-template-columns: 130px 1.6fr 1fr 1fr 100px 120px;
    gap: 18px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-strong);
    font-family: var(--mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    font-weight: 700;
}
body.hoithao .conf-thead .right { text-align: right; }
body.hoithao .conf-row {
    display: grid;
    grid-template-columns: 130px 1.6fr 1fr 1fr 100px 120px;
    gap: 18px;
    padding: 18px 0;
    border-bottom: 1px solid var(--border);
    color: var(--fg);
    transition: background 0.15s ease;
    text-decoration: none;
}
body.hoithao .conf-row:hover     { background: var(--surface-hover); }
body.hoithao .conf-row:last-child { border-bottom: none; }
body.hoithao .conf-row.closed     { opacity: 0.6; }

/* Grid items default their min-width to min-content, which for an
   unbroken token like "INTERSPEECH_UPDATED" is the full word width.
   That makes the 130px first track silently grow and overlap the
   name column. `min-width: 0` lets the track honour its declared
   size; the wrap rules on .acro then break the token across lines.
   See tasks/lessons.md "fixed-width grid + long token". */
body.hoithao .conf-acronym {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
body.hoithao .conf-acronym .acro {
    font-family: var(--mono);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.15;
    color: var(--fg);
    letter-spacing: 0.02em;
    overflow-wrap: anywhere;
    word-break: break-word;
}
body.hoithao .conf-acronym .year {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--muted);
}

body.hoithao .conf-name .name {
    font-size: 16px;
    line-height: 1.4;
    color: var(--fg);
    margin-bottom: 6px;
    font-weight: 500;
}
body.hoithao .conf-tags { display: flex; flex-wrap: wrap; gap: 4px; }
body.hoithao .tag {
    display: inline-block;
    padding: 2px 8px;
    background: var(--primary-soft);
    color: var(--primary);
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    border-radius: 3px;
    letter-spacing: 0.02em;
}

body.hoithao .conf-meta .v {
    font-size: 14px;
    color: var(--fg);
    margin-bottom: 2px;
}
body.hoithao .conf-meta .s {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--muted);
}

body.hoithao .conf-fee {
    text-align: right;
    font-family: var(--mono);
    font-size: 16px;
    font-weight: 700;
    color: var(--fg);
}
body.hoithao .conf-fee .cur {
    margin-left: 4px;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--muted);
    font-weight: 400;
}

body.hoithao .conf-deadline { text-align: right; }
body.hoithao .conf-deadline .pill { margin-bottom: 4px; }
body.hoithao .deadline-date {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--muted);
}

/* ── Empty state ──────────────────────────────────────────────── */

body.hoithao .empty-state {
    padding: 56px 32px;
    text-align: center;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-lg);
    background: var(--paper);
    margin: 24px 0;
}
body.hoithao .empty-state h3 { font-size: 18px; margin: 0 0 8px 0; }
body.hoithao .empty-state p  { color: var(--muted); margin: 0; }

/* ── Detail page ──────────────────────────────────────────────── */

body.hoithao .back-link {
    display: inline-block;
    font-family: var(--mono);
    font-size: 13px;
    color: var(--muted);
    margin: 24px 0 16px 0;
    padding: 6px 8px;
    border-radius: var(--radius);
    text-decoration: none;
}
body.hoithao .back-link:hover { color: var(--fg); background: var(--surface-hover); }

body.hoithao .detail-hero {
    padding: 24px 0 24px 0;
    border-bottom: 2px solid var(--rule);
    margin-bottom: 24px;
}
body.hoithao .detail-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
    align-items: center;
}
body.hoithao .detail-title {
    font-size: 38px;             /* scaled down from 44 */
    line-height: 1.08;
    margin: 0 0 6px 0;
    letter-spacing: -0.01em;
    font-weight: 700;
}
body.hoithao .detail-name {
    font-size: 18px;
    color: var(--fg-soft);
    margin: 0 0 18px 0;
    line-height: 1.45;
    max-width: 60ch;
}
body.hoithao .detail-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 14px;
}

body.hoithao .detail-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    margin-bottom: 32px;
    background: var(--paper);
}
body.hoithao .detail-cell {
    padding: 18px 22px;
    border-right: 1px solid var(--border);
}
body.hoithao .detail-cell:last-child { border-right: none; }
body.hoithao .detail-cell.urgent     { background: var(--pill-urgent-bg); }
body.hoithao .detail-cell .label {
    font-family: var(--mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    margin-bottom: 8px;
    font-weight: 700;
}
body.hoithao .detail-cell .val {
    font-size: 20px;
    font-weight: 700;
    color: var(--fg);
    margin-bottom: 4px;
    line-height: 1.2;
}
body.hoithao .detail-cell .val.sm { font-size: 15px; font-weight: 700; }
body.hoithao .detail-cell .sub {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--muted);
}

body.hoithao .detail-body {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 48px;
    padding-bottom: 64px;
}
body.hoithao .detail-prose {
    font-size: 17px;
    line-height: 1.7;
    color: var(--fg);
}
body.hoithao .detail-prose p { max-width: 65ch; }

body.hoithao .section-h {
    font-size: 14px;
    font-weight: 700;
    margin: 32px 0 12px 0;
    color: var(--fg);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-family: var(--mono);
}
body.hoithao .dates-table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0 24px 0;
}
body.hoithao .dates-table td {
    padding: 9px 0;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}
body.hoithao .dates-table td:first-child {
    color: var(--muted);
    font-family: var(--mono);
    font-size: 12px;
    width: 50%;
}

body.hoithao .side-card {
    background: var(--primary-soft);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    padding: 22px;
    margin-bottom: 24px;
}
body.hoithao .side-card .heading {
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 8px;
    color: var(--fg);
}
body.hoithao .side-card .copy {
    font-size: 14px;
    color: var(--fg-soft);
    line-height: 1.5;
    margin-bottom: 16px;
}
body.hoithao .topic-pills { display: flex; flex-wrap: wrap; gap: 6px; }

/* ── Calendar / timeline ──────────────────────────────────────── */

body.hoithao .timeline { margin: 32px 0 64px 0; }
body.hoithao .month-band { margin-bottom: 32px; }
body.hoithao .month-label {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--rule);
}
body.hoithao .month-label .name {
    font-size: 19px;
    font-weight: 700;
    color: var(--fg);
}
body.hoithao .month-label .y {
    font-family: var(--mono);
    font-size: 13px;
    color: var(--muted);
}
body.hoithao .timeline-item {
    display: grid;
    grid-template-columns: 90px 1fr 110px;
    gap: 18px;
    padding: 14px 4px;
    border-bottom: 1px solid var(--border);
    color: var(--fg);
    align-items: center;
    transition: background 0.15s ease;
    text-decoration: none;
}
body.hoithao .timeline-item:hover { background: var(--surface-hover); }
body.hoithao .tl-date {
    font-family: var(--mono);
    font-size: 13px;
    color: var(--fg);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
body.hoithao .tl-title {
    font-size: 15px;
    color: var(--fg);
    font-weight: 500;
    /* Long titles wrap inside their grid cell instead of pushing the badge
       column out of alignment. */
    overflow-wrap: anywhere;
}
body.hoithao .timeline-item .what {
    /* Promoted to its own grid column so deadline / opening pills line up
       in a clean vertical strip across every row. */
    justify-self: start;
    align-self: center;
    padding: 2px 8px;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    border-radius: 3px;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
body.hoithao .timeline-item .what.deadline {
    background: var(--pill-urgent-bg);
    color: var(--pill-urgent-fg);
}
body.hoithao .timeline-item .what.opening {
    background: var(--highlight-glow);
    color: #b8431a;
}

/* Phones: stack into two rows so the 3-column grid doesn't squish. Date
   + badge ride together on the top line; title wraps below at full width. */
@media (max-width: 640px) {
    body.hoithao .timeline-item {
        grid-template-columns: 90px 1fr;
        row-gap: 6px;
    }
    body.hoithao .timeline-item .tl-title {
        grid-column: 1 / -1;
    }
}

body.hoithao .today-marker {
    margin: 18px 0;
    text-align: center;
    position: relative;
}
body.hoithao .today-marker::before {
    content: '';
    position: absolute;
    left: 0; right: 0;
    top: 50%;
    height: 1px;
    background: var(--highlight);
    opacity: 0.5;
}
body.hoithao .today-label {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--bg);
    padding: 4px 14px;
    color: var(--highlight);
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
body.hoithao .today-label .date {
    color: var(--muted);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0.02em;
}

/* ── Statistics page (/thongke) ──────────────────────────────────
   Pure-CSS visualisations: bar charts via height/width %, heatmap
   via grid + tint classes. No JS dependency, fits the editorial
   design language. Chart colours map to existing palette tokens
   so a future palette tweak flows through automatically.
   plans/thongke.md is the source of truth. */

body.hoithao .stat-section { margin: 32px 0 48px 0; }
body.hoithao .stat-section h2 {
    font-size: 19px;
    font-weight: 700;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--rule);
    margin: 0 0 16px 0;
}
body.hoithao .stat-subtitle {
    color: var(--fg-soft, var(--muted));
    font-size: 14px;
    line-height: 1.55;
    margin: 0 0 20px 0;
    max-width: 64ch;
}
body.hoithao .stat-empty {
    margin: 32px 0 64px 0;
    padding: 48px 16px;
    text-align: center;
    color: var(--muted);
    font-style: italic;
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

/* Section 1 — month density bars (12 columns) */
body.hoithao .stat-monthbars {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 8px;
    align-items: end;
    height: 200px;
    margin-bottom: 12px;
}
body.hoithao .stat-monthbar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    height: 100%;
}
body.hoithao .stat-monthbar-bar {
    flex: 1;
    display: flex;
    flex-direction: column-reverse;
    min-height: 4px;
    background: rgba(10, 10, 10, 0.04);
    border-radius: 2px;
    overflow: hidden;
}
body.hoithao .stat-monthbar-segment { transition: height .25s ease; }
body.hoithao .stat-monthbar-deadline { background: var(--pill-urgent-bg); }
body.hoithao .stat-monthbar-opening  { background: var(--highlight-glow, var(--highlight)); opacity: 0.55; }
body.hoithao .stat-monthbar-label {
    font-family: var(--mono);
    font-size: 12px;
    text-align: center;
    margin-top: 6px;
    color: var(--ink, var(--fg));
}

/* Shared legend used by Sections 1 + 4 */
body.hoithao .stat-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 12px;
    font-family: var(--mono);
    font-size: 12px;
    color: var(--muted);
}
body.hoithao .stat-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
body.hoithao .stat-legend-swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 2px;
    vertical-align: middle;
}

/* Section 2 — top fields */
body.hoithao .stat-fields { display: flex; flex-direction: column; gap: 10px; }
body.hoithao .stat-field-row {
    display: grid;
    grid-template-columns: 200px 1fr 60px;
    gap: 14px;
    align-items: center;
    text-decoration: none;
    color: inherit;
    padding: 8px 12px;
    border-radius: 4px;
    border: 1px solid transparent;
    transition: background-color .15s, border-color .15s;
}
body.hoithao .stat-field-row:hover {
    background: var(--surface-hover, rgba(10, 10, 10, 0.04));
    border-color: var(--border);
}
body.hoithao .stat-field-label {
    font-weight: 600;
    font-size: 14px;
}
body.hoithao .stat-field-bar-wrap {
    height: 14px;
    background: rgba(10, 10, 10, 0.04);
    border-radius: 2px;
    overflow: hidden;
}
body.hoithao .stat-field-bar {
    height: 100%;
    background: var(--accent, var(--ink));
    border-radius: 2px;
    transition: width .25s ease;
}
body.hoithao .stat-field-num {
    font-family: var(--mono);
    text-align: right;
    color: var(--ink, var(--fg));
}

/* Section 3 — fee distribution */
body.hoithao .stat-fees-bar {
    display: flex;
    height: 24px;
    border-radius: 3px;
    overflow: hidden;
    background: rgba(10, 10, 10, 0.06);
    margin-bottom: 14px;
}
body.hoithao .stat-fees-segment {
    transition: flex-basis .25s ease;
    border-right: 1px solid var(--paper, #fff);
}
body.hoithao .stat-fees-segment:last-child { border-right: 0; }
body.hoithao .stat-fees-1 { background: #e8d6a8; }
body.hoithao .stat-fees-2 { background: #d6b572; }
body.hoithao .stat-fees-3 { background: #b89653; }
body.hoithao .stat-fees-4 { background: #8a6e3a; }
body.hoithao .stat-fees-5 { background: #4a3a20; }
body.hoithao .stat-fees-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    font-family: var(--mono);
    font-size: 12px;
    color: var(--muted);
}
body.hoithao .stat-fees-legend strong {
    color: var(--ink, var(--fg));
    font-weight: 700;
}

/* Section 4 — heatmap (7 weekday rows × 12 week cols + axis labels) */
body.hoithao .stat-heatmap {
    display: grid;
    grid-template-columns: 36px repeat(12, 1fr);
    grid-auto-rows: 22px;
    gap: 4px;
    font-family: var(--mono);
    font-size: 11px;
    margin-bottom: 6px;
}
body.hoithao .stat-heatmap-corner { /* empty top-left cell */ }
body.hoithao .stat-heatmap-col-label,
body.hoithao .stat-heatmap-row-label {
    color: var(--muted);
    text-align: center;
    align-self: center;
}
body.hoithao .stat-heatmap-cell {
    border-radius: 2px;
    transition: transform .12s;
}
body.hoithao .stat-heatmap-cell:hover { transform: scale(1.18); }
body.hoithao .stat-heatmap-0 { background: rgba(10, 10, 10, 0.06); }
body.hoithao .stat-heatmap-1 { background: rgba(180, 60, 60, 0.30); }
body.hoithao .stat-heatmap-2 { background: rgba(180, 60, 60, 0.55); }
body.hoithao .stat-heatmap-3 { background: rgba(180, 60, 60, 0.80); }
body.hoithao .stat-heatmap-4 { background: rgba(180, 60, 60, 1.00); }
body.hoithao .stat-legend-tints { gap: 12px; }
body.hoithao .stat-legend-tints .stat-legend-swatch {
    width: 14px;
    height: 14px;
}

/* Bottom CTA — funnels visitors into /subscribe */
body.hoithao .stat-cta {
    text-align: center;
    padding: 32px 0 64px 0;
    margin-top: 24px;
    border-top: 1px solid var(--border);
}

/* Mobile: tighter month bars, narrower field-row label column,
   smaller heatmap cells. The 12-col grids stay 12-col so the
   visual identity is preserved (no collapsing-to-stack). */
@media (max-width: 720px) {
    body.hoithao .stat-monthbars {
        height: 160px;
        gap: 4px;
    }
    body.hoithao .stat-monthbar-label { font-size: 10px; }
    body.hoithao .stat-field-row {
        grid-template-columns: 110px 1fr 44px;
        gap: 10px;
        padding: 6px 8px;
    }
    body.hoithao .stat-field-label { font-size: 13px; }
    body.hoithao .stat-fees-bar { height: 20px; }
    body.hoithao .stat-heatmap {
        grid-template-columns: 28px repeat(12, 1fr);
        grid-auto-rows: 16px;
        gap: 3px;
        font-size: 9px;
    }
    body.hoithao .stat-legend,
    body.hoithao .stat-fees-legend { gap: 12px; }
}

/* ── Forms (submit / subscribe) ───────────────────────────────── */

body.hoithao .form-page {
    max-width: 720px;
    margin: 0 auto;
    padding: 24px 0 64px 0;
}
body.hoithao .form-page-wide { max-width: 980px; }
body.hoithao .form-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--mono);
    font-size: 12px;
    color: var(--muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 14px;
}
body.hoithao .form-title {
    font-size: 32px;
    line-height: 1.1;
    margin: 0 0 14px 0;
    font-weight: 700;
    letter-spacing: -0.01em;
}
body.hoithao .form-lede {
    font-size: 17px;
    color: var(--fg-soft);
    line-height: 1.55;
    margin-bottom: 28px;
    max-width: 60ch;
}
body.hoithao .form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}
body.hoithao .form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
body.hoithao .form-field.full { grid-column: 1 / -1; }
body.hoithao .form-field label {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--fg);
    letter-spacing: 0.04em;
    font-weight: 700;
    text-transform: uppercase;
}
body.hoithao .form-field .req { color: var(--highlight); margin-left: 2px; }
body.hoithao .form-field input,
body.hoithao .form-field select,
body.hoithao .form-field textarea {
    padding: 11px 13px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface);
    font-family: var(--font-sans);
    font-size: 15px;
    color: var(--fg);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    min-height: 44px;
}
body.hoithao .form-field textarea {
    min-height: 130px;
    resize: vertical;
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.55;
}
body.hoithao .form-field input:focus,
body.hoithao .form-field select:focus,
body.hoithao .form-field textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-glow);
}
body.hoithao .form-field .hint {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--muted);
}
body.hoithao .form-field .is-invalid { border-color: var(--danger); }
body.hoithao .form-field .invalid-feedback {
    color: var(--danger);
    font-size: 13px;
    font-weight: 500;
}
body.hoithao .form-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
}
body.hoithao .form-hint {
    margin-left: auto;
    font-family: var(--mono);
    font-size: 12px;
    color: var(--muted);
}
body.hoithao .form-success {
    background: #e3efe9;
    border: 1px solid #b9d6c5;
    color: #1d4934;
    border-radius: var(--radius);
    padding: 14px 18px;
    margin-bottom: 18px;
    font-size: 15px;
    font-weight: 500;
}
body.hoithao .form-field input.is-invalid,
body.hoithao .form-field select.is-invalid,
body.hoithao .form-field textarea.is-invalid {
    border-color: var(--danger);
}

/* ── Subscribe page ───────────────────────────────────────────── */

body.hoithao .subscribe-layout {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 48px;
    align-items: start;
}
body.hoithao .subscribe-aside {
    display: flex;
    flex-direction: column;
    gap: 18px;
    position: sticky;
    top: 96px;
}
body.hoithao .subscribe-stat {
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px;
}
body.hoithao .subscribe-stat .num {
    font-family: var(--mono);
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
    color: var(--fg);
    margin-bottom: 8px;
    font-variant-numeric: tabular-nums;
}
body.hoithao .subscribe-stat .num.acro {
    font-size: 22px;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.15;
}
body.hoithao .subscribe-stat .num .accent { color: var(--primary); }
body.hoithao .subscribe-stat .lab {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

body.hoithao .radio-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 8px;
}
body.hoithao .radio-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 14px;
    padding: 14px 18px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface);
    cursor: pointer;
    align-items: center;
    transition: border-color 0.15s ease, background 0.15s ease;
}
body.hoithao .radio-row:hover { border-color: var(--fg); background: var(--surface-hover); }
body.hoithao .radio-row .r-title {
    font-family: var(--font);
    font-weight: 700;
    color: var(--fg);
    font-size: 15px;
    margin-bottom: 2px;
}
body.hoithao .radio-row .r-desc {
    font-size: 14px;
    color: var(--fg-soft);
    line-height: 1.45;
}
body.hoithao .radio-row .r-meta {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--muted);
    letter-spacing: 0.04em;
}

/* ── Field pills (Lĩnh vực) ────────────────────────────────────
   Grouped, self-sizing chip checkboxes used by /submit and
   /subscribe. Replaces the old fixed-width `.topic-grid` layout
   where short labels ("TOÁN HỌC") and long labels ("XỬ LÝ NGÔN
   NGỮ TỰ NHIÊN") were forced into the same cell width and the
   tallest cell pulled every row to its height. Pills size to
   their content via inline-flex + flex-wrap, so the layout
   reflows densely on every viewport.

   Checked state is driven by `:has(input:checked)` (broadly
   supported in modern evergreen browsers); the native checkbox
   is visually hidden but kept focusable so the keyboard / screen-
   reader path is intact. Older browsers without `:has()` simply
   render the unchecked style for both states — the input itself
   remains visible (.5em wide) as a fallback affordance. */
body.hoithao .topic-grid {
    /* Legacy class retained as a thin alias for any unmigrated
       call site (e.g. the JS-rendered mockup at index.html).
       New markup uses .topic-pills directly. */
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}
body.hoithao .topic-groups {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 8px;
}
body.hoithao .topic-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
body.hoithao .topic-group-title {
    margin: 0;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}
body.hoithao .topic-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
body.hoithao .topic-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: var(--surface);
    color: var(--fg);
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.2;
    cursor: pointer;
    user-select: none;
    transition: border-color 0.12s ease, background-color 0.12s ease, color 0.12s ease;
}
body.hoithao .topic-pill:hover { border-color: var(--fg); background: var(--paper); }
body.hoithao .topic-pill input {
    /* Visually hidden but keyboard-focusable. The pill itself
       carries the visual state via :has(); the input stays in
       the tab order and gets a focus ring through the pill's
       :focus-within rule below. */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
/* Leading checkmark glyph — invisible by default, fades in on checked.
   Replaces the native checkbox we hid above as the visual "selected"
   signal. We render the ✓ inside a fixed-width inline span so the pill
   doesn't reflow when its text becomes bold on selection. */
body.hoithao .topic-pill > span {
    position: relative;
    padding-left: 0;
    transition: padding-left 0.12s ease;
}
body.hoithao .topic-pill > span::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 700;
    color: var(--fg);
    opacity: 0;
    transition: opacity 0.12s ease;
}
/* Checked state — restrained academic styling: warm cream background
   (the same paper-warm tone the conf-row hover uses), ink border, bold
   text, leading ✓. Keeps the page legible when 10+ pills are checked
   at once on /submit, where a solid-ink fill (used by the single-
   select dashboard chips) would otherwise pile into a heavy block. */
body.hoithao .topic-pill:has(input:checked) {
    border-color: var(--fg);
    background: var(--surface-hover);
    color: var(--fg);
    font-weight: 600;
}
body.hoithao .topic-pill:has(input:checked) > span {
    padding-left: 16px;
}
body.hoithao .topic-pill:has(input:checked) > span::before {
    opacity: 1;
}
body.hoithao .topic-pill:focus-within {
    outline: 2px solid var(--primary, var(--fg));
    outline-offset: 2px;
}

/* Legacy `.topic-check` kept as a thin alias so the JS-rendered
   mockup at index.html (which still emits this class string) and
   any other unmigrated caller stays styled. New markup uses
   `.topic-pill`. */
body.hoithao .topic-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 13px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface);
    font-family: var(--font-sans);
    font-size: 14px;
    cursor: pointer;
    user-select: none;
    min-height: 38px;
}
body.hoithao .topic-check input { margin: 0; }
body.hoithao .topic-check:hover { border-color: var(--fg); }

/* ── Footer ───────────────────────────────────────────────────── */

body.hoithao .footer {
    border-top: 1px solid var(--border);
    margin-top: 48px;
    padding: 28px 0 36px 0;
}
body.hoithao .footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    font-family: var(--mono);
    font-size: 12px;
    color: var(--muted);
    letter-spacing: 0.04em;
}
body.hoithao .footer-links { display: flex; gap: 18px; flex-wrap: wrap; }
body.hoithao .footer-links a { color: var(--fg-soft); }
body.hoithao .footer-links a:hover { color: var(--highlight); }

/* ── Alerts ───────────────────────────────────────────────────── */

body.hoithao .alert {
    padding: 14px 18px;
    border-radius: var(--radius);
    margin-bottom: 24px;
    font-size: 15px;
    border: 1px solid transparent;
    font-weight: 500;
}
body.hoithao .alert-success {
    background: #e3efe9;
    color: #1d4934;
    border-color: #b9d6c5;
}
body.hoithao .alert-error {
    background: #fadfdc;
    color: #8a2a0c;
    border-color: #ebbcb5;
}

/* ─────────────────────────────────────────────────────────────────
   Responsive — mobile drawer
   ─────────────────────────────────────────────────────────────── */

@media (max-width: 920px) {
    /* Conference table compresses to 4 columns. */
    body.hoithao .conf-thead,
    body.hoithao .conf-row {
        grid-template-columns: 80px 1.4fr 0.9fr 0.9fr;
    }
    body.hoithao .conf-thead > div:nth-child(5),
    body.hoithao .conf-thead > div:nth-child(6),
    body.hoithao .conf-row    > div:nth-child(5),
    body.hoithao .conf-row    > div:nth-child(6) {
        display: none;
    }

    body.hoithao .hero h1     { font-size: 30px; }
    body.hoithao .detail-title { font-size: 28px; }
    body.hoithao .form-title   { font-size: 26px; }

    body.hoithao .hero-stats   { grid-template-columns: repeat(2, 1fr); gap: 24px; }
    body.hoithao .detail-grid  { grid-template-columns: repeat(2, 1fr); }
    body.hoithao .detail-cell:nth-child(2n) { border-right: none; }
    body.hoithao .detail-body,
    body.hoithao .subscribe-layout {
        grid-template-columns: 1fr;
    }

    /* Brand: drop the subtitle on small screens to free up width. */
    body.hoithao .brand-sub { display: none; }

    /* Hamburger button visible, pushed to the right edge of the
       topnav row. margin-left:auto consumes the flex slack between
       the brand and the button so the row reads brand ── ham. */
    body.hoithao .hamburger {
        display: inline-flex;
        margin-left: auto;
    }

    /* Drawer collapsed by default. Single column, full width below
       the topnav bar; opens via .open class from the JS toggle. */
    body.hoithao .topnav-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        margin-left: 0;
        background: var(--paper);
        border-bottom: 1px solid var(--border);
        box-shadow: 0 8px 24px rgba(20, 23, 27, 0.08);
        padding: 8px var(--page-pad) 18px;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        z-index: 49;
        flex: initial;
    }
    body.hoithao .topnav-nav.open { display: flex; }

    /* Drawer link rows: full-width, hairline-separated, left rule on
       the active row. */
    body.hoithao .topnav-link {
        padding: 14px 4px;
        border-radius: 0;
        font-size: 16px;
        color: var(--fg);
        border-bottom: 1px solid var(--border);
        background: transparent;
        font-weight: 500;
        text-align: left;
    }
    body.hoithao .topnav-link:hover {
        background: transparent;
        color: var(--primary);
    }
    body.hoithao .topnav-link.active {
        background: transparent;
        color: var(--highlight);
        font-weight: 700;
        border-left: 3px solid var(--highlight);
        padding-left: 12px;
    }

    /* On mobile, the spacer becomes a small vertical air gap between
       the link list and the meta + CTA block. */
    body.hoithao .topnav-spacer {
        flex: 0 0 auto;
        height: 16px;
    }

    /* Counter: small caption above the CTA. */
    body.hoithao .nav-meta {
        padding: 4px 0 0 0;
        color: var(--muted);
        text-transform: uppercase;
        letter-spacing: 0.06em;
        font-size: 11px;
    }

    /* CTA: full-width pill button anchored at the bottom of drawer. */
    body.hoithao .topnav-cta {
        align-self: stretch;
        justify-content: center;
        margin: 12px 0 0;
        min-height: 44px;
        font-size: 15px;
    }

    body.hoithao .form-grid { grid-template-columns: 1fr; }
}

/* Phone : 920px breakpoint covers tablets too, where the chunky 36px
   brand mark + 44px hamburger + 17px name still fit. On a 390px
   iPhone viewport they crowd the bar. Tighten the topnav itself
   (smaller mark, smaller hamburger, less vertical padding) without
   touching the drawer rules above. */
@media (max-width: 600px) {
    body.hoithao .topnav-inner {
        padding: 10px 0;
        gap: 12px;
    }
    body.hoithao .brand { gap: 9px; }
    body.hoithao .brand-mark {
        width: 30px;
        height: 30px;
        font-size: 12px;
        border-radius: calc(var(--radius) - 2px);
    }
    body.hoithao .brand-name { font-size: 15px; }
    body.hoithao .hamburger {
        width: 38px;
        height: 38px;
    }
    body.hoithao .hamburger-bars { width: 16px; }
}

/* ── Reduced motion ─────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    body.hoithao *,
    body.hoithao *::before,
    body.hoithao *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── Pagination (hoithao theme) ─────────────────────────────
 *
 * Theme-native pagination styling for the public dashboard partial
 * (themes/frontend/hoithao/partials/pagination.html). Uses the
 * existing design tokens (--primary, --border, --surface) so the
 * nav blends with the rest of the academic-restrained aesthetic
 * — no Tabler classes here; this is the custom hoithao theme. */

body.hoithao .pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 32px 0 8px;
    flex-wrap: wrap;
    font-size: 14px;
}

body.hoithao .pagination-prev,
body.hoithao .pagination-next {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    color: var(--ink, #1a1a1a);
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e5e5e5);
    border-radius: 6px;
    text-decoration: none;
    transition: border-color 0.15s ease, color 0.15s ease;
    line-height: 1;
}

body.hoithao .pagination-prev:hover,
body.hoithao .pagination-next:hover {
    border-color: var(--primary, #1a1a1a);
    color: var(--primary, #1a1a1a);
}

body.hoithao .pagination-prev.disabled,
body.hoithao .pagination-next.disabled {
    color: var(--muted, #999);
    background: var(--surface, #fff);
    border-color: var(--border, #e5e5e5);
    cursor: not-allowed;
    opacity: 0.55;
}

body.hoithao .pagination-prev svg,
body.hoithao .pagination-next svg {
    width: 16px;
    height: 16px;
}

body.hoithao .pagination-pages {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

body.hoithao .pagination-page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    color: var(--ink, #1a1a1a);
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e5e5e5);
    border-radius: 6px;
    text-decoration: none;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
    line-height: 1;
}

body.hoithao .pagination-page:hover {
    border-color: var(--primary, #1a1a1a);
    color: var(--primary, #1a1a1a);
}

body.hoithao .pagination-page.active {
    color: #fff;
    background: var(--primary, #1a1a1a);
    border-color: var(--primary, #1a1a1a);
    cursor: default;
}

@media (max-width: 640px) {
    body.hoithao .pagination {
        gap: 6px;
        margin: 24px 0 8px;
    }

    body.hoithao .pagination-prev,
    body.hoithao .pagination-next {
        padding: 8px 10px;
        font-size: 13px;
    }

    body.hoithao .pagination-page {
        min-width: 32px;
        height: 32px;
        padding: 0 8px;
    }
}