/* Cổng thông tin công khai KNST Huế (CTT-01..22). Dựa trên token của admin.css; không CSS nội tuyến (CSP style-src 'self').
   Hướng thị giác: báo điện tử công vụ — thanh đầu xanh Huế đậm có vạch vàng, chữ lớn tương phản, thẻ nội dung có viền mảnh. */

.portal {
    --portal-max: 1180px;
    --portal-gutter: clamp(1rem, 0.6rem + 2vw, 2rem);
    --portal-head-bg: var(--color-plum-900);
    --portal-head-ink: #ffffff;
    --portal-accent: var(--color-gold-500);
    --portal-hero-bg:
        radial-gradient(520px 260px at 92% 0%, rgb(43 179 160 / 12%), transparent 70%),
        linear-gradient(135deg, var(--color-sky-50) 0%, #ffffff 55%, var(--color-gold-50) 100%);
    display: flex; flex-direction: column; min-height: 100vh;
    /* Nền có quầng sáng nhẹ xanh Huế + ngọc: bớt phẳng, trẻ trung hơn. */
    background:
        radial-gradient(1000px 420px at 8% 0, rgb(3 121 255 / 6%), transparent 70%),
        radial-gradient(800px 380px at 96% 30%, rgb(43 179 160 / 6%), transparent 70%),
        var(--color-bg);
    background-repeat: no-repeat;
}
/* Bộ màu "Trung tính" (CTT-29): xám than, vạch xanh; không cho CSS tự do. */
.portal--neutral {
    --portal-head-bg: #1f2937;
    --portal-accent: var(--color-plum-500);
    --portal-hero-bg: linear-gradient(135deg, var(--color-neutral-soft) 0%, #ffffff 70%);
}

.portal-wrap { width: 100%; max-width: var(--portal-max); margin-inline: auto; padding-inline: var(--portal-gutter); }

/* ---------- Thanh đầu ---------- */
.portal-masthead { background: var(--portal-head-bg); color: var(--portal-head-ink); border-bottom: 4px solid var(--portal-accent); }
.portal-masthead :focus-visible { outline-color: var(--color-focus-on-dark); }
.portal-masthead-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-3); flex-wrap: wrap; }
.portal-brand { display: inline-flex; align-items: center; gap: var(--space-3); color: inherit; text-decoration: none; min-width: 0; }
.portal-brand:hover { color: inherit; }
.portal-brand img { width: 44px; height: 44px; border-radius: 50%; background: #ffffff; }
.portal-brand span { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.portal-brand b { font-size: var(--text-lg); letter-spacing: 0.02em; }
.portal-brand small { color: var(--color-on-dark-muted); font-size: var(--text-xs); }
.portal-tools { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
/* Ô tìm kiếm dạng viên thuốc, nút kính lúp nằm trong ô (theo dmst). */
.portal-search { position: relative; display: flex; align-items: center; }
.portal-search input {
    width: clamp(10rem, 8rem + 10vw, 18rem); min-height: 42px; padding: 0 var(--space-4) 0 44px;
    border: 1px solid transparent; border-radius: var(--radius-pill); background: rgb(255 255 255 / 14%); color: #ffffff;
    transition: background-color var(--duration-fast);
}
.portal-search input::placeholder { color: var(--color-on-dark-muted); }
.portal-search input:focus { background: #ffffff; color: var(--color-ink); }
.portal-search-go {
    position: absolute; left: 4px; display: inline-grid; place-items: center; width: 36px; height: 36px;
    border: 0; border-radius: 50%; background: transparent; color: var(--color-on-dark-muted); cursor: pointer;
}
.portal-search:focus-within .portal-search-go { color: var(--color-plum-700); }
.portal-login, .portal-menu-toggle {
    display: inline-flex; align-items: center; gap: var(--space-2); min-height: 40px; padding: 0 var(--space-2);
    border: 0; background: transparent; color: #ffffff; font: inherit; font-size: 0.875rem; text-decoration: none; cursor: pointer;
}
.portal-login:hover { color: var(--color-gold-300); text-decoration: underline; text-underline-offset: 4px; }
.portal-menu-toggle { display: none; padding: 0 var(--space-4); border: 1px solid rgb(255 255 255 / 40%); border-radius: var(--radius-pill); }
.portal-menu-toggle:hover { background: rgb(255 255 255 / 12%); color: #ffffff; }

/* Menu chặng hành trình: chữ thường 15px, gạch chân vàng cho mục hiện tại (theo dmst). */
.portal-nav { background: rgb(0 0 0 / 16%); }
.portal-nav > ul { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-6); margin-block: 0; padding-block: 0; list-style: none; }
.portal-nav a, .portal-nav-more summary {
    display: inline-flex; align-items: center; gap: var(--space-2); min-height: 48px; padding: 0;
    color: #ffffff; text-decoration: none; font-size: 0.9375rem; font-weight: 400;
    border-bottom: 2px solid transparent; cursor: pointer;
}
.portal-nav a:hover, .portal-nav-more summary:hover { color: var(--color-gold-300); }
.portal-nav a[aria-current="page"] { border-bottom-color: var(--color-gold-300); }
.portal-nav-more { position: relative; }
.portal-nav-more summary { list-style: none; }
.portal-nav-more summary::-webkit-details-marker { display: none; }
.portal-nav-more summary::after {
    content: ""; width: 7px; height: 7px; margin-left: 2px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
}
.portal-nav-more[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.portal-nav-more ul {
    position: absolute; z-index: 20; top: 100%; left: 0; min-width: 15rem; margin: 0; padding: var(--space-2) 0; list-style: none;
    background: var(--color-surface); border-radius: var(--radius-md); box-shadow: 0 12px 32px rgb(0 0 0 / 18%);
}
.portal-nav-more ul a { display: flex; min-height: 40px; padding: 0 var(--space-4); color: var(--color-ink); border-bottom: 0; border-left: 3px solid transparent; }
.portal-nav-more ul a:hover { background: var(--color-plum-50); color: var(--color-plum-800); }
.portal-nav-more ul a[aria-current="page"] { border-left-color: var(--color-gold-500); font-weight: 600; }
.portal-nav-more ul :focus-visible { outline-color: var(--color-focus); }

/* ---------- Phần chính ---------- */
.portal-crumbs { padding-top: var(--space-3); }
.portal-main { flex: 1; padding-block: var(--space-6) var(--space-10); display: flex; flex-direction: column; gap: var(--space-6); }
.portal-main:focus { outline: none; }
.portal-main > .page-header { margin-bottom: 0; }

.portal-hero {
    display: grid; gap: var(--space-5); padding: clamp(1.5rem, 1rem + 3vw, 3.5rem);
    background: var(--portal-hero-bg); border: 1px solid rgb(219 227 237 / 70%);
    border-radius: var(--radius-xl); box-shadow: var(--shadow-1);
}
.portal-hero h1 { font-size: clamp(1.75rem, 1.2rem + 2.4vw, 3rem); max-width: 22ch; }
.portal-hero .page-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

.portal-section { display: flex; flex-direction: column; gap: var(--space-4); }
.portal-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px solid rgb(219 227 237 / 70%); }
.portal-section-head h2 { position: relative; padding-left: var(--space-3); }
.portal-section-head h2::before { content: ""; position: absolute; left: 0; top: 0.2em; bottom: 0.2em; width: 4px; border-radius: var(--radius-pill); background: linear-gradient(var(--color-plum-500), var(--color-teal-500)); }
.portal-section-head h2 { font-size: var(--text-lg); }
.portal-section-head a { font-weight: 600; white-space: nowrap; }

.portal-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr)); gap: var(--space-8) var(--space-6); }

.portal-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: var(--space-4); }
.portal-card {
    position: relative; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4);
    background: var(--color-surface); border: 1px solid rgb(219 227 237 / 70%); border-radius: var(--radius-lg); box-shadow: var(--shadow-1);
    transition: border-color var(--duration-fast), box-shadow var(--duration-fast), transform var(--duration-fast);
}
.portal-card:hover { border-color: var(--color-plum-200); box-shadow: var(--shadow-2); transform: translateY(-2px); }
.portal-card:focus-within { border-color: var(--color-focus); }
.portal-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); color: var(--color-muted); font-size: var(--text-xs); }
.portal-card-title { font-size: var(--text-md); }
.portal-card-title a { color: var(--color-ink); text-decoration: none; }
.portal-card-title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.portal-card-title a:hover { color: var(--color-primary); }
.portal-card-summary { color: var(--color-ink-soft); display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.portal-card-facts { color: var(--color-muted); font-size: var(--text-sm); }
.portal-card-facts a { position: relative; z-index: 1; }

.portal-sample { background: var(--color-gold-50); color: var(--color-gold-700); }

.portal-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr)); gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.portal-stats a {
    position: relative; display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4); height: 100%; overflow: hidden;
    background: var(--color-surface); border: 1px solid rgb(219 227 237 / 70%);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-1); color: var(--color-ink); text-decoration: none;
    transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast);
}
/* Vòng tròn sắc nhạt ở góc thay vạch màu cứng phía trên. */
.portal-stats a::before { content: ""; position: absolute; right: -32px; top: -32px; width: 96px; height: 96px; border-radius: 50%; background: var(--color-sky-100); }
.portal-stats li:nth-child(even) a::before { background: var(--color-teal-50); }
.portal-stats a > * { position: relative; }
.portal-stats a:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }
.portal-stats b { font-size: var(--text-stat); line-height: 1; font-variant-numeric: tabular-nums; }
.portal-stats span { color: var(--color-muted); font-size: var(--text-sm); }

.portal-callout { padding: var(--space-6); background: linear-gradient(135deg, var(--color-sky-50), var(--color-teal-50)); border-radius: var(--radius-xl); align-items: flex-start; }

.portal-filter { margin: 0; }
.portal-muted { color: var(--color-muted); }
.portal-error { padding: var(--space-3) var(--space-4); background: var(--color-danger-soft); color: var(--color-danger); border-radius: var(--radius-sm); font-weight: 500; }
.portal-note { padding: var(--space-3) var(--space-4); background: var(--color-info-soft); color: var(--color-info); border-left: 3px solid var(--color-info); border-radius: var(--radius-md); }

/* ---------- Nút cổng công khai (chỉ trong .portal; trang quản trị giữ nút cũ) ----------
   Theo dmst: viên thuốc, nền vàng #fed74d, chữ đậm vừa, không viền, không bóng; nút phụ viền xanh mảnh. */
.portal .btn {
    min-height: 48px; padding: 0 28px; border-radius: var(--radius-pill); font-size: 1rem; font-weight: 600;
    box-shadow: none; transition: background-color var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast);
}
.portal .btn:active { transform: none; }
.portal .btn--primary { background: var(--color-gold-300); color: var(--color-ink); border: 0; box-shadow: none; }
.portal .btn--primary:hover { background: var(--color-gold-500); color: var(--color-ink); }
.portal .btn--secondary { background: transparent; color: var(--color-plum-600); border: 1px solid var(--color-plum-600); box-shadow: none; }
.portal .btn--secondary:hover { background: var(--color-plum-50); color: var(--color-plum-800); }
.portal .btn--sm { min-height: 36px; padding: 0 var(--space-4); font-size: 0.875rem; }
.portal-more { display: inline-flex; align-items: center; gap: 2px; color: var(--color-plum-600); font-size: 0.875rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.portal-more:hover { color: var(--color-plum-800); text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Hình minh họa theo loại (tạm thay ảnh) ---------- */
.portal-art { display: grid; place-items: center; aspect-ratio: 16 / 7; border-radius: var(--radius-sm); color: var(--color-plum-700); background: var(--color-plum-50); }
.portal-art svg { width: 44px; height: 44px; }
.portal-art--gold { background: var(--color-gold-50); color: var(--color-gold-700); }
.portal-art--sky { background: linear-gradient(140deg, var(--color-sky-100), var(--color-teal-50)); color: var(--color-plum-800); }
.portal-art--deep { background: var(--color-plum-800); color: var(--color-gold-300); }
/* Ảnh bìa thật (P-66): giữ tỉ lệ khung như hình minh họa, cắt vừa khung thay vì méo ảnh. */
.portal-cover { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-sm); background: var(--color-plum-50); }
.portal-card > .portal-cover { width: calc(100% + 2 * var(--space-4)); max-width: none; margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-4)) var(--space-1); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.portal-cover--hero { border-radius: var(--radius-md); }
.portal-card > .portal-art { margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-4)) var(--space-1); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }

/* ---------- Băng chuyển đầu trang ---------- */
.portal-carousel { position: relative; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-2); background: var(--color-plum-900); color: #ffffff; }
.portal-carousel :focus-visible { outline-color: var(--color-focus-on-dark); }
.portal-carousel-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.portal-carousel-track::-webkit-scrollbar { display: none; }
.portal-slide {
    flex: 0 0 100%; scroll-snap-align: start; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    align-items: center; gap: var(--space-6); padding: clamp(1.5rem, 1rem + 3vw, 3.5rem); min-height: 22rem;
    background:
        radial-gradient(circle at 85% 20%, rgb(254 215 77 / 16%), transparent 45%),
        radial-gradient(circle at 10% 110%, rgb(43 179 160 / 30%), transparent 50%),
        linear-gradient(135deg, var(--color-plum-900), var(--color-plum-700));
}
.portal-slide-text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.portal-slide-kind { color: var(--color-gold-300); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.portal-slide-title { font-size: clamp(1.5rem, 1.1rem + 2vw, 2.6rem); line-height: 1.2; max-width: 24ch; color: #ffffff; }
.portal-slide-summary { color: var(--color-on-dark-muted); max-width: 56ch; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.portal-slide-text .btn { margin-top: var(--space-2); }
.portal-slide > .portal-art { aspect-ratio: 1; width: min(100%, 16rem); justify-self: center; border-radius: 50%; background: rgb(255 255 255 / 10%); color: var(--color-gold-300); }
.portal-slide > .portal-cover { width: min(100%, 22rem); justify-self: center; aspect-ratio: 4 / 3; border-radius: var(--radius-md); }
.portal-slide > .portal-art svg { width: 45%; height: 45%; }
.portal-carousel-controls { position: absolute; right: var(--space-4); bottom: var(--space-4); display: flex; gap: var(--space-2); }
.portal-carousel-btn {
    display: inline-grid; place-items: center; width: 40px; height: 40px; border: 1px solid rgb(255 255 255 / 45%); border-radius: 50%;
    background: rgb(0 0 0 / 20%); color: #ffffff; font-size: 1.25rem; line-height: 1; cursor: pointer; transition: background-color var(--duration-fast);
}
.portal-carousel-btn:hover { background: rgb(255 255 255 / 18%); }
.portal-carousel-btn[aria-pressed="true"] { background: var(--color-gold-300); color: var(--color-ink); }

/* ---------- Chúng tôi sẽ đồng hành cùng bạn ---------- */
.portal-journey { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: var(--space-6); align-items: center; }
.portal-journey-intro { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.portal-journey-intro h2 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); color: var(--color-plum-800); }
.portal-journey-intro p { color: var(--color-ink-soft); font-size: var(--text-md); line-height: 1.6; }
/* Nút mũi tên vàng: khối cắt bằng clip-path, không ảnh. */
.portal-arrow-cta {
    display: inline-flex; align-items: center; min-height: 52px; padding: 0 48px 0 24px; background: var(--color-gold-300); color: var(--color-ink);
    font-weight: 700; text-decoration: none; clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 50%, calc(100% - 24px) 100%, 0 100%);
    transition: background-color var(--duration-fast);
}
.portal-arrow-cta:hover { background: var(--color-gold-500); color: var(--color-ink); }
.portal-journey-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.portal-journey-tiles li:last-child { grid-column: 1 / -1; }
.portal-journey-tiles a {
    display: flex; flex-direction: column; gap: var(--space-2); height: 100%; min-height: 9rem; padding: var(--space-5);
    border-radius: var(--radius-lg); background: var(--color-plum-700); color: #ffffff; text-decoration: none;
    transition: background-color var(--duration-fast), transform var(--duration-fast) var(--ease-out);
}
.portal-journey-tiles li:nth-child(2) a { background: var(--color-plum-800); }
.portal-journey-tiles li:nth-child(3) a { background: var(--color-plum-900); }
.portal-journey-tiles a:hover { background: var(--color-plum-600); color: #ffffff; transform: translateY(-2px); }
.portal-journey-tiles b { font-size: var(--text-lg); }
.portal-journey-tiles span { color: var(--color-on-dark-muted); max-width: 40ch; }
.portal-journey-tiles i {
    margin-top: auto; align-self: flex-end; display: inline-grid; place-items: center; width: 36px; height: 36px;
    border-radius: 50%; background: var(--color-gold-300); color: var(--color-ink); font-style: normal; font-weight: 700;
}

/* ---------- Trang chặng hành trình ---------- */
.portal-hub-hero {
    display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--space-6); align-items: center;
    padding: clamp(1.5rem, 1rem + 3vw, 3rem); border-radius: var(--radius-xl); background: var(--portal-hero-bg); border: 1px solid rgb(219 227 237 / 70%);
}
.portal-hub-hero-text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.portal-hub-hero .portal-slide-kind { color: var(--color-plum-700); }
.portal-hub-hero h1 { font-size: clamp(1.6rem, 1.1rem + 2vw, 2.6rem); color: var(--color-plum-900); max-width: 22ch; }
.portal-hub-hero > .portal-art { aspect-ratio: 1; width: min(100%, 13rem); justify-self: center; border-radius: 50%; }
.portal-hub-hero > .portal-art svg { width: 45%; height: 45%; }

/* ---------- Bài viết ---------- */
.portal-article { display: flex; flex-direction: column; gap: var(--space-5); max-width: 76ch; }
.portal-article h1 { font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.4rem); }
.portal-facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-4); margin: 0; padding: var(--space-4) var(--space-5); background: var(--color-sky-50); border-radius: var(--radius-lg); }
.portal-facts dt { color: var(--color-muted); font-weight: 600; }
.portal-facts dd { margin: 0; overflow-wrap: anywhere; }
.portal-prose { font-size: var(--text-md); line-height: 1.7; overflow-wrap: break-word; }
.portal-prose > * + * { margin-top: var(--space-4); }
.portal-prose h2, .portal-prose h3 { margin-top: var(--space-6); }
.portal-prose ul, .portal-prose ol { padding-left: 1.4em; }
.portal-prose blockquote { margin-inline: 0; padding-left: var(--space-4); border-left: 4px solid var(--portal-accent); color: var(--color-ink-soft); }
.portal-prose table { border-collapse: collapse; display: block; overflow-x: auto; }
.portal-prose th, .portal-prose td { border: 1px solid var(--color-line); padding: var(--space-2); }
.portal-prose img { height: auto; border-radius: var(--radius-sm); }

.portal-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.portal-chip { display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--space-3); border: 1px solid var(--color-plum-200); border-radius: var(--radius-pill); background: var(--color-surface); text-decoration: none; font-weight: 600; font-size: var(--text-sm); }
.portal-chip:hover { background: var(--color-plum-50); }

.portal-stat-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: var(--space-4); }
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; }

.portal-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--space-4); margin: 0; padding: 0; list-style: none; counter-reset: step; }
.portal-steps li { counter-increment: step; padding: var(--space-5); background: var(--color-surface); border: 1px solid rgb(219 227 237 / 70%); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); }
.portal-steps li::before { content: counter(step); display: inline-grid; place-items: center; width: 2rem; height: 2rem; margin-bottom: var(--space-3); border-radius: 50%; background: var(--portal-accent); color: var(--color-plum-950); font-weight: 700; }
.portal-steps h2 { font-size: var(--text-md); margin-bottom: var(--space-2); }

/* ---------- Hỏi đáp ---------- */
.portal-qa-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); gap: var(--space-6); align-items: start; }
.portal-qa-side { display: flex; flex-direction: column; gap: var(--space-4); }
.portal-qa-list { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.portal-qa { background: var(--color-surface); border: 1px solid rgb(219 227 237 / 70%); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); }
.portal-qa summary { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); cursor: pointer; font-weight: 600; min-height: 44px; align-items: center; }
.portal-qa summary time { color: var(--color-muted); font-weight: 400; font-size: var(--text-xs); white-space: nowrap; }
.portal-qa[open] summary { border-bottom: 1px solid var(--color-line); }
.portal-qa-body, .portal-qa-answer { padding: var(--space-3) var(--space-4); white-space: pre-line; }
.portal-qa-answer { background: var(--color-primary-soft); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.portal-qa-answer h3 { font-size: var(--text-sm); color: var(--color-primary); margin-bottom: var(--space-1); }
.portal-form { display: flex; flex-direction: column; gap: var(--space-3); }
.portal-form input:not([type="checkbox"]), .portal-form textarea {
    width: 100%; min-height: 40px; padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-input-border); border-radius: var(--radius-md); background: var(--color-surface);
}
.portal-check { display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--text-sm); }
.portal-check input { width: 20px; height: 20px; margin-top: 2px; flex: none; }
/* Ô bẫy honeypot: đẩy khỏi màn hình, không dùng display:none để máy gửi vẫn thấy. */
.portal-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.portal-code { padding: var(--space-5); background: var(--color-success-soft); border: 1px solid var(--color-success); border-radius: var(--radius-md); display: flex; flex-direction: column; gap: var(--space-2); }
.portal-code-value output { display: inline-block; padding: var(--space-2) var(--space-4); background: #ffffff; border-radius: var(--radius-sm); font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: var(--text-xl); letter-spacing: 0.08em; user-select: all; }
.portal-lookup { display: flex; flex-direction: column; gap: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--color-line); }

/* ---------- Chân trang ---------- */
.portal-footer { background: var(--color-plum-950); color: var(--color-on-dark-muted); border-top: 4px solid var(--portal-accent); padding-block: var(--space-8); }
.portal--neutral .portal-footer { background: #111827; }
.portal-footer :focus-visible { outline-color: var(--color-focus-on-dark); }
.portal-footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--space-6); }
.portal-footer h2 { color: #ffffff; font-size: var(--text-md); margin-bottom: var(--space-3); }
.portal-footer ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-1); }
.portal-footer a { color: #ffffff; display: inline-block; padding-block: 2px; }
.portal-footer p + p { margin-top: var(--space-3); }

/* ---------- Màn hẹp (tới 375px) ---------- */
@media (max-width: 960px) {
    .portal-qa-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
    .portal-masthead-row { align-items: flex-start; }
    .portal-tools { width: 100%; gap: var(--space-2); }
    .portal-search { flex: 1 1 100%; }
    .portal-search input { flex: 1; width: auto; min-width: 0; }
    .portal-brand small { display: none; }
    .js .portal-menu-toggle { display: inline-flex; }
    .js .portal-nav:not(.is-open) { display: none; }
    .portal-nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
    .portal-nav a, .portal-nav-more summary { width: 100%; border-bottom: 0; border-left: 3px solid transparent; padding-left: var(--space-3); }
    .portal-nav a[aria-current="page"] { border-left-color: var(--color-gold-300); }
    .portal-nav-more ul { position: static; box-shadow: none; background: transparent; padding: 0 0 var(--space-2) var(--space-4); }
    .portal-nav-more ul a { color: #ffffff; }
    .portal-nav-more ul a:hover { background: rgb(255 255 255 / 10%); color: #ffffff; }
    .portal-nav-more ul :focus-visible { outline-color: var(--color-focus-on-dark); }
    .portal-slide, .portal-journey, .portal-hub-hero { grid-template-columns: minmax(0, 1fr); }
    .portal-slide { min-height: 0; padding-bottom: 5rem; }
    .portal-slide > .portal-art, .portal-hub-hero > .portal-art { display: none; }
    .portal-journey-tiles { grid-template-columns: minmax(0, 1fr); }
    .portal-facts { grid-template-columns: 1fr; gap: 0; }
    .portal-facts dd { margin-bottom: var(--space-2); }
    .portal-section-head { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
    .portal-card, .portal-stats a { transition: none; }
    .portal-card:hover, .portal-stats a:hover, .portal-journey-tiles a:hover { transform: none; }
    .portal-carousel-track { scroll-behavior: auto; }
    .portal .btn, .portal-arrow-cta, .portal-journey-tiles a, .portal-search input { transition: none; }
}