/* deu-pages.css — trang riêng của NAVS Deutsch (public/deu/*.php). Chỉ dùng token (site-deu.css ghi đè bảng màu).
   🚨 Chữ (font, cỡ, độ đậm, giãn chữ, khoảng dòng) chép Y HỆT trang chủ NAVS — public/assets/css/home-guest.css
   (.hg-h1 · .hg-lead · .hg-h2 · .hg-c__title · .hg-c__desc). Chủ chốt 11/10/2026: chữ tiếng Việt phải giống NAVS. */

/* Nền trang cùng kiểu trang chủ (deu-home.css): trắng ấm + quầng vàng nhạt góc phải, chút đỏ góc trái. Giao diện 12/10/2026. */
.deu-page, .deu-soon, .d404 { --dp-shadow: color-mix(in srgb, var(--color-ink) 22%, transparent); }
.deu-page {
    display: block;
    background:
        radial-gradient(60% 520px at 86% -60px, color-mix(in srgb, var(--color-brand-gold) 22%, transparent), transparent 66%),
        radial-gradient(46% 420px at 0% 0%,    color-mix(in srgb, var(--color-brand-red) 6%, transparent), transparent 62%),
        linear-gradient(180deg, color-mix(in srgb, var(--color-brand-gold) 5%, var(--color-surface)) 0%, var(--color-bg) 760px);
}
.deu-wrap { max-width: 1180px; margin: 0 auto; padding: var(--space-12) var(--space-6) var(--space-16); }

.deu-hero { display: flex; flex-direction: column; gap: var(--space-5); max-width: 760px; }
/* Cờ nhỏ bo góc (thay cho ba vạch trần): cùng kiểu .dh-flag ở trang chủ. */
.deu-hero__kicker { display: flex; flex-direction: column; width: 30px; height: 20px; border-radius: 5px; overflow: hidden;
                    box-shadow: 0 6px 16px -8px var(--dp-shadow, transparent), 0 0 0 1px color-mix(in srgb, var(--color-ink) 10%, transparent); }
.deu-hero__kicker span { flex: 1; }
.deu-hero__kicker span:nth-child(1) { background: var(--color-ink); }
.deu-hero__kicker span:nth-child(2) { background: var(--color-brand-red); }
.deu-hero__kicker span:nth-child(3) { background: var(--color-brand-gold); }
.deu-hero h1 {
    margin: 0; max-width: 17ch; text-wrap: balance;
    font-size: clamp(36px, 5.2vw, 68px); line-height: 1.03; letter-spacing: -.04em;
    font-weight: var(--fw-extrabold); color: var(--color-ink);
}
.deu-hero p {
    margin: 0; max-width: 58ch; text-wrap: pretty;
    font-size: 17.5px; line-height: 1.6; color: var(--color-secondary-text);
}
.deu-hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); padding-top: var(--space-3); }
.deu-hero__more { margin: 0; font-size: 15px; }
.deu-hero__more a { color: var(--color-ink); font-weight: var(--fw-semibold); text-decoration: underline; text-underline-offset: 3px; }

.deu-section { margin-top: var(--space-16); display: flex; flex-direction: column; gap: var(--space-5); }
.deu-section h2 {
    margin: 0; text-wrap: balance;
    font-size: clamp(26px, 3vw, 40px); font-weight: var(--fw-extrabold); letter-spacing: -.03em;
    line-height: 1.13; color: var(--color-ink);
}

.deu-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }

.deu-card {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; gap: var(--space-2);
    padding: var(--space-6); border: 1px solid var(--color-border); border-radius: 18px;
    background: var(--color-surface); color: var(--color-text); text-decoration: none;
    box-shadow: 0 10px 30px -24px var(--dp-shadow, transparent);
    transition: transform var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
a.deu-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--color-brand-gold) 70%, transparent);
                   box-shadow: 0 26px 54px -28px var(--dp-shadow, transparent); color: var(--color-text); }
/* Vạch màu cờ = sọc ngang mép trên của thẻ (như ba thẻ mục tiêu ở trang chủ). */
.deu-card__bar { position: absolute; left: 0; right: 0; top: 0; width: auto; height: 4px; border-radius: 0; }
.deu-card:has(> .deu-card__bar) { padding-top: calc(var(--space-6) + 4px); }
.deu-card__bar--ink { background: var(--color-ink); }
.deu-card__bar--red { background: var(--color-brand-red); }
.deu-card__bar--gold { background: var(--color-brand-gold); }
.deu-card h3 { margin: 0; font-size: 17px; font-weight: var(--fw-bold); color: var(--color-ink); letter-spacing: -.01em; }
.deu-card p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--color-muted); }
.deu-card__meta { font-size: 13.5px; font-weight: var(--fw-semibold); color: var(--color-secondary-text); }

.deu-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.deu-chip { display: inline-flex; align-items: center; height: 30px; padding: 0 var(--space-3); border-radius: var(--radius-pill); font-weight: var(--fw-semibold); font-size: 13.5px; }
.deu-chip--der { background: var(--color-gender-der-soft); color: var(--color-gender-der-fg); }
.deu-chip--die { background: var(--color-gender-die-soft); color: var(--color-gender-die-fg); }
.deu-chip--das { background: var(--color-gender-das-soft); color: var(--color-gender-das-fg); }

.deu-keys { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.deu-keys span { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg); font-weight: var(--fw-semibold); }

.deu-note { margin-top: var(--space-16); padding: var(--space-4) var(--space-5); border-radius: 14px; font-size: 13.5px; line-height: 1.6;
            background: color-mix(in srgb, var(--color-brand-gold) 10%, var(--color-surface)); color: var(--color-secondary-text);
            border: 1px solid color-mix(in srgb, var(--color-brand-gold) 40%, transparent); }

.deu-soon { max-width: 640px; margin: 0 auto; padding: var(--space-16) var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start; }
.deu-soon h1 { margin: 0; font-size: clamp(26px, 3vw, 40px); font-weight: var(--fw-extrabold); letter-spacing: -.03em; line-height: 1.13; color: var(--color-ink); }
.deu-soon p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--color-muted); }

/* Điện thoại — cùng mốc và cỡ chữ với home-guest.css (@media max-width: 820px). */
@media (max-width: 820px) {
    .deu-grid { grid-template-columns: 1fr; }
    .deu-wrap { padding-top: var(--space-6); }
    .deu-hero h1 { font-size: clamp(30px, 8.6vw, 38px); max-width: 15ch; }
    .deu-hero p { font-size: 15.5px; }
    .deu-section h2 { font-size: clamp(23px, 6.4vw, 28px); }
}

/* Nhập môn A1 (public/deu/a1-starter.php): số liệu + kế hoạch từng tuần. */
.deu-sub { margin: 0; max-width: 70ch; font-size: 15px; line-height: 1.6; color: var(--color-muted); }
.deu-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.deu-stat { display: flex; flex-direction: column; gap: 2px; padding: var(--space-5); border: 1px solid var(--color-border); border-radius: 18px; background: var(--color-surface);
            box-shadow: 0 16px 40px -30px var(--dp-shadow, transparent); }
.deu-stat b { font-size: clamp(26px, 3vw, 36px); font-weight: var(--fw-extrabold); letter-spacing: -.03em; color: var(--color-ink); line-height: 1.1; }
.deu-stat span { font-size: 13.5px; color: var(--color-secondary-text); }
.deu-weeks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.deu-week { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); border: 1px solid var(--color-border); border-radius: 18px; background: var(--color-surface);
            box-shadow: 0 10px 30px -24px var(--dp-shadow, transparent); }
.deu-week__h { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-3); }
.deu-week__no { font-size: 12.5px; font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .06em; color: var(--color-brand-red-text); }
.deu-week__h h3 { margin: 0; flex: 1 1 100%; font-size: 16.5px; font-weight: var(--fw-bold); color: var(--color-ink); letter-spacing: -.01em; }
.deu-week__free { order: -1; margin-left: auto; padding: 2px var(--space-2); border-radius: var(--radius-pill); background: var(--color-gender-das-soft); color: var(--color-gender-das-fg); font-size: 12px; font-weight: var(--fw-bold); }
.deu-week__cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.deu-week__l { display: block; margin-bottom: var(--space-1); font-size: 12.5px; font-weight: var(--fw-semibold); color: var(--color-secondary-text); }
.deu-week ul { margin: 0; padding-left: 1.1em; display: flex; flex-direction: column; gap: 4px; font-size: 14px; line-height: 1.45; }
.deu-week a { color: var(--color-text); text-decoration: none; }
.deu-week a:hover { color: var(--color-ink); text-decoration: underline; }
.deu-week__exam { display: inline-block; margin-top: var(--space-3); padding: 4px var(--space-3); border-radius: var(--radius-pill); background: var(--color-bg); border: 1px solid var(--color-border); font-size: 13px; font-weight: var(--fw-semibold); color: var(--color-ink); }
@media (max-width: 820px) {
    .deu-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .deu-weeks, .deu-week__cols { grid-template-columns: 1fr; }
}

/* Câu hỏi thường gặp (public/deu/faq.php). */
.deu-faq { display: flex; flex-direction: column; gap: var(--space-3); max-width: 860px; }
.deu-faq__item { border: 1px solid var(--color-border); border-radius: 14px; background: var(--color-surface); overflow: hidden;
                 transition: border-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); }
.deu-faq__item[open] { border-color: color-mix(in srgb, var(--color-brand-gold) 70%, transparent); box-shadow: 0 14px 34px -26px var(--dp-shadow, transparent); }
.deu-faq__item summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
                         padding: var(--space-5) var(--space-6); font-size: 15.5px; font-weight: var(--fw-semibold); color: var(--color-ink); }
.deu-faq__item summary::-webkit-details-marker { display: none; }
.deu-faq__item summary::after { content: '\f067'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 12px; color: var(--color-muted); flex-shrink: 0; }
.deu-faq__item[open] summary::after { content: '\f068'; color: var(--color-brand-gold-hover); }
.deu-faq__item p { margin: 0; padding: 0 var(--space-6) var(--space-5); font-size: 14.5px; line-height: 1.7; color: var(--color-text); }

/* ── /lock — trang chưa có quyền (public/deu/lock.php, Đợt 1 audit 16/10/2026) ── */
.deu-lock .lv-wrap { max-width: 720px; padding: var(--space-12) var(--space-6) var(--space-16); }
.deu-lock__card { padding: var(--space-8); text-align: center; }
.deu-lock__card h1 { font-size: var(--fs-h2-desktop); line-height: var(--lh-tight); margin: 0 0 var(--space-3); }
.deu-lock__card p { color: var(--color-muted); margin: 0 0 var(--space-6); line-height: var(--lh-body); }
.deu-lock__acts { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); }

/* Trang giới thiệu lộ trình (roadmap-intro.php — Đợt 2 audit 16/10/2026): danh sách Teil của từng kỹ năng + thẻ "Các lộ trình khác". */
.deu-teile { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: var(--space-1); font-size: var(--fs-small); color: var(--color-muted); line-height: var(--lh-body); }
.deu-teile b { color: var(--color-text); font-weight: var(--fw-semibold); margin-right: var(--space-1); white-space: nowrap; }
.deu-card--link { display: block; text-decoration: none; color: inherit; transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); }
.deu-card--link:hover { box-shadow: var(--shadow-md); text-decoration: none; color: inherit; }
.deu-card--link h3 { color: var(--color-primary); }

/* Khung "gói đã hết hạn" (includes/deu/ui.php deu_lapsed_notice — T-30 audit Đợt 4, 16/10/2026): trang khoá, Thi thử, Luyện Viết – Nói. */
.deu-lapsed { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-4); flex-wrap: wrap;
    padding: var(--space-4) var(--space-5); margin-bottom: var(--space-4); border-left: 3px solid var(--color-warning); }
.deu-lapsed p { margin: 0; flex: 1 1 320px; font-size: var(--fs-body); color: var(--color-text); line-height: var(--lh-body); }
.deu-lapsed b { color: var(--color-ink); }