/* DKE Học – giao diện học tập. Bảng màu Hani; child theme có thể ghi đè các biến bên dưới. */
:root {
	--dke-green: #0f5d56;
	--dke-green-dark: #0a443f;
	--dke-green-soft: #e1efed;
	--dke-red: #e63946;
	--dke-red-text: #d33240;   /* đỏ dùng cho nút có chữ: đạt 4.9:1 với chữ trắng */
	--dke-red-soft: #fdecec;
	--dke-gold: #d4af37;
	--dke-gold-text: #7a5f0a;
	--dke-gold-soft: #f7edcb;
	--dke-ivory: #faf8f3;
	--dke-ink: #1b1f2a;
	--dke-muted: #5b6070;
	--dke-line: #e8e2d6;
	--dke-radius: 16px;
	--dke-font: 'Be Vietnam Pro', system-ui, sans-serif;
	--dke-font-ko: 'Noto Sans KR', 'Malgun Gothic', sans-serif;
}

.dke-app, .dke-card, .dke-map, .dke-choose, .dke-wordgrid { font-family: var(--dke-font); color: var(--dke-ink); }
[lang="ko"], .dke-ko { font-family: var(--dke-font-ko); }
.dke-muted { color: var(--dke-muted); }
.dke-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .02em; color: var(--dke-muted); }
.dke-loading, .dke-empty { color: var(--dke-muted); padding: 16px 0; }
.dke-error { color: var(--dke-red-text); font-weight: 600; }
.dke-row { display: flex; justify-content: space-between; gap: 12px; }

.dke-card { background: #fff; border: 1px solid var(--dke-line); border-radius: var(--dke-radius); padding: 16px; margin: 0 0 12px; }
.dke-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px; }

/* Nút */
.dke-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px; border-radius: 12px; border: 0; background: var(--dke-green); color: #fff !important; font: 600 15px/1.2 var(--dke-font); text-decoration: none !important; cursor: pointer; }
.dke-btn:hover { background: var(--dke-green-dark); }
.dke-btn:focus-visible, .dke-option:focus-visible, .dke-grade:focus-visible, .dke-qbtn:focus-visible { outline: 3px solid var(--dke-gold); outline-offset: 2px; }
.dke-btn[disabled] { opacity: .5; cursor: not-allowed; }
.dke-btn--outline { background: #fff; color: var(--dke-green) !important; border: 1.5px solid var(--dke-green); }
.dke-btn--outline:hover { background: var(--dke-green-soft); }
.dke-btn--soft { background: var(--dke-green-soft); color: var(--dke-green) !important; min-height: 44px; padding: 0 14px; }
.dke-btn--soft:hover { background: #cfe5e2; }
.dke-btn--accent { background: var(--dke-red-text); }
.dke-btn--accent:hover { background: #b8232f; }
.dke-btn--block { display: flex; width: 100%; margin-top: 12px; }

.dke-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.dke-chip { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 10px; background: var(--dke-green-soft); color: var(--dke-green); font-size: 12px; font-weight: 700; text-decoration: none; }
.dke-chip--word { background: #fff; border: 1px solid var(--dke-line); color: var(--dke-ink); font-size: 14px; font-weight: 500; padding: 8px 12px; }

/* Hani */
.dke-hani { width: 96px; height: 96px; object-fit: cover; border-radius: 22px; flex-shrink: 0; }
.dke-hani--xs { width: 36px; height: 36px; border-radius: 10px; }
.dke-hani--sm { width: 56px; height: 56px; border-radius: 14px; }
.dke-hani--md { width: 72px; height: 72px; border-radius: 18px; }
.dke-hani--lg { width: 112px; height: 112px; border-radius: 26px; }

/* Từ vựng */
.dke-word__ko { font: 700 44px/1.2 var(--dke-font-ko); margin: 4px 0; }
.dke-word__rom { color: var(--dke-muted); margin: 0; }
.dke-word__vi { font-size: 22px; font-weight: 700; margin: 8px 0 0; }
.dke-hanviet { color: var(--dke-red-text); font-weight: 700; }
.dke-examples { list-style: none; padding: 0; margin: 0; }
.dke-examples li { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; padding: 12px 14px; border: 1px solid var(--dke-line); border-radius: 14px; background: #fff; margin-bottom: 8px; }
.dke-examples .dke-vi { grid-column: 1 / -1; color: var(--dke-muted); font-size: 14px; }
.dke-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--dke-line); border-radius: 14px; overflow: hidden; margin: 0 0 16px; }
.dke-table th, .dke-table td { padding: 10px 12px; border-top: 1px solid var(--dke-line); text-align: left; }
.dke-table thead th { background: #eeeae1; border-top: 0; }
.dke-prevnext { display: flex; justify-content: space-between; margin-top: 24px; font-weight: 600; }
.dke-wordgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.dke-wordtile { display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: var(--dke-ink); margin: 0; }
.dke-wordtile .dke-ko { font-size: 22px; font-weight: 700; }
.dke-wordtile .dke-muted { font-size: 12px; }

/* Ngữ pháp */
.dke-formula { background: var(--dke-ink); color: #fff; border-radius: 14px; padding: 16px; text-align: center; font: 700 22px/1.4 var(--dke-font-ko); margin: 8px 0; }
.dke-tip { display: flex; gap: 12px; align-items: flex-start; background: var(--dke-gold-soft); border-radius: 14px; padding: 12px 14px; margin: 12px 0; }
.dke-tip strong { color: var(--dke-gold-text); }
.dke-tip p { margin: 4px 0 0; }

/* Quiz */
.dke-quiz__head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.dke-quiz__head .dke-progress { flex: 1; }
.dke-progress { height: 8px; border-radius: 4px; background: var(--dke-line); overflow: hidden; }
.dke-progress > span { display: block; height: 100%; background: var(--dke-green); border-radius: 4px; transition: width .3s; }
.dke-quiz__prompt { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 24px 16px; }
.dke-quiz__ko { font: 700 40px/1.2 var(--dke-font-ko); margin: 0; }
.dke-quiz__vi { font-size: 26px; font-weight: 700; margin: 0; }
.dke-options { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; }
.dke-option { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--dke-line); background: #fff; font: 500 16px var(--dke-font); color: var(--dke-ink); text-align: left; cursor: pointer; }
.dke-option:hover:not([disabled]) { border-color: var(--dke-green); }
.dke-option__key { width: 28px; height: 28px; border-radius: 8px; background: #eeeae1; color: var(--dke-muted); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex-shrink: 0; }
.dke-option.is-right { border: 2px solid var(--dke-green); background: var(--dke-green-soft); }
.dke-option.is-right .dke-option__key { background: var(--dke-green); color: #fff; }
.dke-option.is-wrong { border: 2px solid var(--dke-red-text); background: var(--dke-red-soft); }
.dke-option.is-wrong .dke-option__key { background: var(--dke-red-text); color: #fff; }
label.dke-option input { width: 20px; height: 20px; accent-color: var(--dke-green); margin: 0; }
.dke-feedback { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; border-radius: 14px; }
.dke-feedback:empty { display: none; }
.dke-feedback.is-right, .dke-feedback.is-wrong { padding: 14px; }
.dke-feedback.is-right { background: var(--dke-green-soft); }
.dke-feedback.is-wrong { background: var(--dke-red-soft); border-top: 2px solid var(--dke-red-text); }
.dke-feedback > div { flex: 1 1 200px; }
.dke-feedback p { margin: 4px 0 0; }
.dke-feedback .dke-btn { flex: 1 1 100%; }
.dke-result { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 24px; }
.dke-result h3 { margin: 8px 0 0; }
.dke-result p { margin: 2px 0; }
.dke-form { display: flex; flex-direction: column; gap: 8px; }
.dke-form select, .dke-input { min-height: 48px; border-radius: 12px; border: 1px solid var(--dke-line); padding: 0 12px; font: 16px var(--dke-font); background: #fff; }
textarea.dke-input { padding: 12px; min-height: 160px; width: 100%; box-sizing: border-box; }
.dke-levels { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.dke-level { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border: 1px solid var(--dke-line); border-radius: 10px; background: #fff; cursor: pointer; }
.dke-nudge { font-size: 14px; color: var(--dke-muted); }

/* Flashcard */
.dke-flash { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 32px 16px; min-height: 280px; }
.dke-flash__ko { font: 700 48px/1.2 var(--dke-font-ko); margin: 0; }
.dke-flash__vi { font-size: 26px; font-weight: 700; margin: 8px 0 0; }
.dke-flash__back { width: 100%; border-top: 1px solid var(--dke-line); padding-top: 12px; margin-top: 8px; }
.dke-flash__ex { background: var(--dke-ivory); border-radius: 12px; padding: 12px; }
.dke-grades { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.dke-grade { min-height: 64px; border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font: 13px var(--dke-font); cursor: pointer; border: 1.5px solid; background: #fff; }
.dke-grade strong { font-size: 15px; }
.dke-grade--quen { background: var(--dke-red-text); border-color: var(--dke-red-text); color: #fff; }
.dke-grade--kho { color: #a3202b; border-color: var(--dke-red-text); }
.dke-grade--duoc { color: var(--dke-green); border-color: var(--dke-green); }
.dke-grade--de { background: var(--dke-green); border-color: var(--dke-green); color: #fff; }

/* Bài học */
.dke-steps { list-style: none; padding: 0; margin: 0 0 16px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; font-size: 12px; color: var(--dke-muted); }
.dke-steps li { border-top: 6px solid var(--dke-line); padding-top: 4px; border-radius: 3px; }
.dke-steps li.is-done { border-color: var(--dke-green); }
.dke-steps li.is-current { border-color: var(--dke-red); color: var(--dke-ink); font-weight: 700; }
.dke-wordrow { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.dke-wordrow p { margin: 0; }
.dke-wordrow .dke-ko { font-size: 22px; font-weight: 700; }
.dke-dialogue { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.dke-line { display: grid; grid-template-columns: 32px 1fr auto; gap: 10px; align-items: center; background: #fff; border: 1px solid var(--dke-line); border-radius: 14px; padding: 10px 12px; }
.dke-line--b { background: var(--dke-green-soft); }
.dke-line p { margin: 0; }
.dke-line__who { width: 32px; height: 32px; border-radius: 16px; background: var(--dke-ink); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }

/* Bản đồ vượt ải */
.dke-map__chapter h3 { margin: 24px 0 8px; }
.dke-map__path { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.dke-node { display: flex; align-items: center; gap: 12px; }
.dke-node--o1 { padding-left: 15%; } .dke-node--o2 { padding-left: 30%; }
.dke-node__dot { flex-shrink: 0; width: 60px; height: 60px; border-radius: 50%; background: var(--dke-line); color: var(--dke-muted); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; text-decoration: none; }
.dke-node--phu .dke-node__dot { width: 48px; height: 48px; background: #fff; border: 2px solid var(--dke-green); }
.dke-node.is-done .dke-node__dot { background: var(--dke-green); color: #fff; }
.dke-node.is-done .dke-node__dot::after { content: '✓'; font-size: 20px; }
.dke-node.is-current .dke-node__dot { width: 72px; height: 72px; background: var(--dke-red-text); color: #fff; box-shadow: 0 0 0 6px #f9d7da; }
.dke-node.is-locked .dke-node__dot { cursor: not-allowed; }
.dke-node__label { display: flex; flex-direction: column; }
.dke-node__title { font-weight: 600; }
.dke-node__sub { font-size: 12px; color: var(--dke-muted); }
.dke-node.is-done .dke-node__sub { color: var(--dke-gold-text); font-weight: 600; }
.dke-map__goal { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 24px; color: var(--dke-muted); }

/* Hôm nay & hồ sơ */
.dke-today__hi { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.dke-bubble { flex: 1; background: #fff; border: 1px solid var(--dke-line); border-radius: 16px; padding: 10px 14px; display: flex; flex-direction: column; }
.dke-bubble strong { font-size: 20px; }
.dke-today__main { background: var(--dke-green); color: #fff; border: 0; display: flex; flex-direction: column; gap: 8px; }
.dke-today__main .dke-eyebrow { color: #cfe5e2; }
.dke-today__main strong { font-size: 19px; }
.dke-today__main .dke-btn { background: #fff; color: var(--dke-green) !important; }
.dke-today__grid, .dke-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.dke-stat { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--dke-ink); margin: 0; }
.dke-stat strong { font-size: 26px; }
.dke-goal { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.dke-profile__head { display: flex; flex-direction: column; margin-bottom: 12px; }
.dke-profile__name { font-size: 22px; }
.dke-profile__track { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.dke-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.dke-badge { padding: 8px 12px; border-radius: 20px; background: var(--dke-gold); color: var(--dke-ink); font-weight: 600; font-size: 14px; }
.dke-history { list-style: none; padding: 0; }
.dke-history li { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; }
.dke-history li strong { grid-row: span 2; align-self: center; color: var(--dke-green); font-size: 18px; }

/* Chọn lộ trình */
.dke-choose fieldset { border: 0; padding: 0; margin: 0 0 16px; display: flex; flex-direction: column; gap: 10px; }
.dke-choose legend { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.dke-choice { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 10px; align-items: center; padding: 14px; border: 1px solid var(--dke-line); border-radius: 14px; background: #fff; cursor: pointer; }
.dke-choice .dke-muted { grid-column: 2 / -1; font-size: 13px; }
.dke-choice:has(input:checked) { border: 2px solid var(--dke-green); }
.dke-choice.is-soon { border-style: dashed; background: #fcfbf8; cursor: not-allowed; }

/* Phòng thi */
.dke-room__head { display: flex; align-items: center; gap: 12px; background: var(--dke-ink); color: #fff; border-radius: 14px; padding: 10px 14px; margin-bottom: 12px; position: sticky; top: 0; z-index: 5; }
.dke-room__head > div { flex: 1; display: flex; flex-direction: column; }
.dke-room__head .dke-muted { color: #c9cdd6; font-size: 12px; }
.dke-room__timer { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; background: #2c3240; padding: 6px 10px; border-radius: 10px; }
.dke-room__prompt { font-size: 17px; line-height: 1.7; }
.dke-room__q img { max-width: 100%; height: auto; border-radius: 12px; }
.dke-room__q audio { width: 100%; margin-bottom: 8px; }
.dke-mark { display: flex; align-items: center; gap: 8px; min-height: 44px; color: var(--dke-gold-text); font-weight: 600; }
.dke-room__move { display: flex; gap: 8px; margin: 12px 0; }
.dke-room__move .dke-btn { flex: 1; }
.dke-room__grid { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; }
.dke-qbtn { height: 36px; border-radius: 6px; border: 1px solid var(--dke-line); background: #fff; font: 600 12px var(--dke-font); color: var(--dke-muted); cursor: pointer; padding: 0; }
.dke-qbtn.is-done { background: var(--dke-green); border-color: var(--dke-green); color: #fff; }
.dke-qbtn.is-marked { background: var(--dke-gold-soft); border-color: var(--dke-gold); color: var(--dke-gold-text); }
.dke-qbtn.is-current { border: 2px solid var(--dke-green); color: var(--dke-green); background: #fff; }
.dke-confirm { border: 2px solid var(--dke-red-text); }
.dke-sample { white-space: pre-line; background: var(--dke-ivory); padding: 12px; border-radius: 12px; }
.dke-score { background: var(--dke-green); color: #fff; border-radius: 20px; padding: 24px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; margin-bottom: 12px; }
.dke-score .dke-eyebrow { color: #cfe5e2; }
.dke-score__total { font-size: 56px; line-height: 1; }
.dke-score__total small { font-size: 22px; color: #cfe5e2; }
.dke-score__level { background: #fff; color: var(--dke-green); padding: 6px 14px; border-radius: 16px; font-weight: 700; }
.dke-section-score { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.dke-wrong { list-style: none; padding: 0; }
.dke-wrong p { margin: 4px 0; }

/* Thông báo */
.dke-toasts { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); z-index: 9999; display: flex; flex-direction: column; gap: 8px; width: min(92vw, 420px); }
.dke-toast { display: flex; align-items: center; gap: 10px; background: var(--dke-ink); color: #fff; padding: 10px 14px; border-radius: 14px; box-shadow: 0 8px 24px rgba(27, 31, 42, .25); font: 14px var(--dke-font); transition: opacity .4s; }
.dke-toast.is-out { opacity: 0; }

@media (min-width: 768px) {
	.dke-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.dke-feedback .dke-btn { flex: 0 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
	.dke-progress > span, .dke-toast { transition: none; }
}

/* ================= Hani 3D (SVG) và hiệu ứng ================= */
.dke-hani3d { display: inline-block; overflow: visible; max-width: 100%; height: auto; filter: drop-shadow(0 12px 14px rgba(15, 93, 86, .18)); transition: transform .45s cubic-bezier(.2, .8, .2, 1); animation: hn-pop .7s cubic-bezier(.2, 1.4, .4, 1) backwards; }
.dke-hani3d.dke-hani { border-radius: 0; height: auto; object-fit: initial; }
.dke-hani3d:hover { transform: perspective(700px) rotateY(-14deg) rotateX(6deg) scale(1.05); }
.dke-hani3d .hn-body-wrap { animation: hn-float 3.2s ease-in-out infinite; }
.dke-hani3d .hn-shadow { transform-origin: 120px 268px; animation: hn-shadow 3.2s ease-in-out infinite; }
.dke-hani3d .hn-head { transform-origin: 120px 150px; animation: hn-tilt 6s ease-in-out infinite; }
.dke-hani3d .hn-eyes { transform-box: fill-box; transform-origin: center; animation: hn-blink 4.6s infinite; }
.dke-hani3d .hn-tail { transform-origin: 160px 228px; animation: hn-tail 2.4s ease-in-out infinite; }
.dke-hani3d .hn-arm--wave { transform-origin: 152px 168px; animation: hn-wave 1.4s ease-in-out infinite; }
.dke-hani3d .hn-arm--left-up { transform-origin: 88px 168px; animation: hn-wave-l 1.4s ease-in-out infinite; }
.dke-hani3d .hn-arm--fist { transform-origin: 152px 170px; animation: hn-pump .9s ease-in-out infinite; }
.dke-hani3d .hn-ribbon { transform-origin: 124px 188px; animation: hn-sway 2.6s ease-in-out infinite; }
.dke-hani3d .hn-twinkle { transform-box: fill-box; transform-origin: center; animation: hn-twinkle 1.8s ease-in-out infinite; }
.dke-hani3d .hn-d1 { animation-delay: .3s; } .dke-hani3d .hn-d2 { animation-delay: .6s; } .dke-hani3d .hn-d3 { animation-delay: .9s; }
.dke-hani3d .hn-bob { animation: hn-bob 2s ease-in-out infinite; }
.dke-hani3d .hn-confetti { animation: hn-confetti 2.4s ease-in-out infinite; }
.dke-hani3d .hn-tear { animation: hn-tear 2.2s ease-in infinite; }
.dke-hani3d--buon .hn-body-wrap { animation-duration: 4.5s; }

@keyframes hn-pop { from { opacity: 0; transform: translateY(16px) scale(.85); } to { opacity: 1; transform: none; } }
@keyframes hn-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes hn-shadow { 0%, 100% { transform: scale(1); opacity: .22; } 50% { transform: scale(.86); opacity: .14; } }
@keyframes hn-tilt { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-2.5deg); } 70% { transform: rotate(2deg); } }
@keyframes hn-blink { 0%, 90%, 100% { transform: scaleY(1); } 93% { transform: scaleY(.08); } 96% { transform: scaleY(1); } }
@keyframes hn-tail { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-9deg); } }
@keyframes hn-wave { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-16deg); } 75% { transform: rotate(10deg); } }
@keyframes hn-wave-l { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(16deg); } 75% { transform: rotate(-10deg); } }
@keyframes hn-pump { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-8px) rotate(-6deg); } }
@keyframes hn-sway { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(6deg); } }
@keyframes hn-twinkle { 0%, 100% { transform: scale(.6) rotate(0); opacity: .5; } 50% { transform: scale(1.15) rotate(20deg); opacity: 1; } }
@keyframes hn-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes hn-confetti { 0% { transform: translateY(-6px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(18px); opacity: 0; } }
@keyframes hn-tear { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(22px); opacity: 0; } }

/* ================= Khung trang & các khối ================= */
.dke-wrap { max-width: 1200px; margin: 0 auto; padding: 0 16px; box-sizing: border-box; }
.dke-section { margin: 0 auto 56px !important; max-width: 1200px !important; width: 100%; padding: 0 16px; box-sizing: border-box; font-family: var(--dke-font); }
.dke-section > *, .dke-section .wp-block-group__inner-container > * { max-width: none !important; }
.dke-home .entry-content > .wp-block-shortcode, .dke-home .entry-content > p:empty { margin: 0; }
.dke-section .wp-block-heading { font-family: var(--dke-font); font-weight: 800; font-size: clamp(22px, 3vw, 30px); line-height: 1.25; margin: 0 0 8px; color: var(--dke-ink); }
.dke-section p { font-family: var(--dke-font); color: var(--dke-muted); }
.dke-home .entry-header, .dke-home .page-header { display: none; }
.dke-home .site-content { padding-top: 0; }
.dke-home .inside-article { padding-top: 0; background: transparent; }
body.dke-home, .dke-home .site-content, .dke-home .inside-article { background-color: var(--dke-ivory); }
.dke-btn--lg { min-height: 54px; padding: 0 24px; font-size: 16px; }
.dke-btn--light { background: #fff; color: var(--dke-green) !important; }
.dke-btn--light:hover { background: var(--dke-green-soft); }
.dke-btn--ghost { background: transparent; border: 1.5px solid #fff; }
.dke-btn--ghost:hover { background: rgba(255, 255, 255, .12); }
.dke-chip--lg { font-size: 13px; padding: 6px 12px; }
.dke-chip--muted { background: #eeeae1; color: var(--dke-muted); }

/* Hero */
.dke-hero { position: relative; overflow: hidden; max-width: none !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; background: radial-gradient(1200px 500px at 85% 20%, #e1efed 0%, rgba(225, 239, 237, 0) 60%), linear-gradient(180deg, #faf8f3, #f5efe2); padding: 48px 0 56px; margin: 0 calc(50% - 50vw) 48px; width: 100vw; font-family: var(--dke-font); }
.dke-hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 14px; background: repeating-linear-gradient(90deg, #0f5d56 0 24px, #d4af37 24px 32px, #e63946 32px 40px, #d4af37 40px 48px); opacity: .9; }
.dke-hero__grid { display: flex; flex-wrap: wrap; align-items: center; gap: 32px; }
.dke-hero__text { flex: 1 1 460px; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.dke-hero__title { margin: 0; font-size: clamp(34px, 5vw, 54px); line-height: 1.12; color: var(--dke-ink); font-weight: 800; letter-spacing: -.01em; }
.dke-hero__lead { margin: 0; font-size: 18px; line-height: 1.6; color: var(--dke-muted); max-width: 560px; }
.dke-hero__art { flex: 1 1 320px; position: relative; display: flex; justify-content: center; min-height: 340px; }
.dke-hero__halo { position: absolute; width: 320px; height: 320px; border-radius: 50%; top: 10px; background: radial-gradient(circle at 40% 35%, #ffffff 0%, #e1efed 55%, rgba(225, 239, 237, 0) 72%); animation: hn-halo 6s ease-in-out infinite; }
.dke-hero__hani { position: relative; width: min(300px, 70vw); }
.dke-hero__bubble { position: absolute; top: 18px; right: max(0px, calc(50% - 230px)); background: #fff; border: 1px solid var(--dke-line); border-radius: 18px; padding: 10px 14px; display: flex; flex-direction: column; box-shadow: 0 10px 24px rgba(27, 31, 42, .12); animation: hn-bob 3s ease-in-out infinite; }
.dke-hero__bubble strong { font-size: 18px; }
.dke-hero__bubble span { font-size: 13px; color: var(--dke-muted); }
@keyframes hn-halo { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }

/* Lộ trình theo đối tượng */
.dke-tracks { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; margin-top: 16px; }
.dke-track { display: flex; flex-direction: column; gap: 8px; text-decoration: none !important; color: var(--dke-ink); transition: transform .2s, box-shadow .2s; margin: 0; }
.dke-track:hover { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(15, 93, 86, .12); }
.dke-track__top { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 18px; }
.dke-track__level { font-size: 13px; font-weight: 700; color: var(--dke-green); }
.dke-track.is-soon { border-style: dashed; background: #fcfbf8; }

/* Câu nói mỗi ngày */
.dke-quote { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 28px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ccircle cx='20' cy='20' r='1.5' fill='%23e8e2d6'/%3E%3C/svg%3E"); }
.dke-quote__ko { font: 700 clamp(24px, 4vw, 32px)/1.4 var(--dke-font-ko); margin: 6px 0 0; }
.dke-quote__vi { font-size: 18px; margin: 0 0 8px; }
.dke-quote p { margin: 0; }

/* Banner thi thử */
.dke-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; background: linear-gradient(120deg, #0f5d56, #0a443f); color: #fff; border-radius: 24px; padding: 28px 32px; overflow: hidden; position: relative; }
.dke-banner::before { content: ''; position: absolute; right: -60px; top: -60px; width: 240px; height: 240px; border-radius: 50%; background: rgba(212, 175, 55, .18); }
.dke-banner__text { flex: 1 1 380px; position: relative; }
.dke-banner__text h2 { color: #fff; margin: 0 0 8px; font-size: clamp(22px, 3vw, 30px); }
.dke-banner__text p { color: #cfe5e2; margin: 0; }
.dke-banner__art { flex: 0 0 auto; margin: 0 auto; position: relative; }

/* Gặp Hani */
.dke-meet__intro { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; margin-bottom: 16px; }
.dke-meet__intro > div { flex: 1 1 320px; }
.dke-meet__intro h2 { margin: 4px 0 8px; color: var(--dke-green); }
.dke-meet__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.dke-meet__item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; margin: 0; }

/* Bảng chữ Hangul */
.dke-hangul h3 { margin: 24px 0 10px; }
.dke-hangul__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; }
.dke-letter { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 6px; border-radius: 14px; border: 1px solid var(--dke-line); background: #fff; cursor: pointer; font-family: var(--dke-font); color: var(--dke-ink); transition: transform .15s, box-shadow .15s; }
.dke-letter:hover { transform: translateY(-2px); box-shadow: 0 8px 16px rgba(15, 93, 86, .12); border-color: var(--dke-green); }
.dke-letter__ko { font: 700 30px/1.1 var(--dke-font-ko); color: var(--dke-green); }
.dke-letter__rom { font-size: 13px; font-weight: 600; }
.dke-letter__ex { font-size: 13px; color: var(--dke-muted); }

/* Thẻ luyện tập */
.dke-practice { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.dke-practice__card { display: flex; align-items: center; gap: 14px; text-decoration: none !important; color: var(--dke-ink); margin: 0; transition: transform .2s; }
.dke-practice__card:hover { transform: translateY(-3px); }
.dke-practice__card > span { display: flex; flex-direction: column; gap: 4px; }
.dke-practice__card strong { font-size: 18px; }
.dke-choose__hani { float: right; width: 110px; margin: 0 0 8px 12px; }

/* Footer thương hiệu */
.dke-footer { background: #0f5d56; color: #cfe5e2; font-family: var(--dke-font); padding: 36px 0; }
.dke-footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 24px; }
.dke-footer__brand { display: flex; gap: 12px; align-items: center; }
.dke-footer__brand > div { display: flex; flex-direction: column; font-size: 14px; }
.dke-footer strong { color: #fff; font-size: 16px; }
.dke-footer ul { list-style: none; margin: 8px 0 0; padding: 0; line-height: 2; }
.dke-footer a { color: #cfe5e2; text-decoration: none; }
.dke-footer a:hover { color: #fff; text-decoration: underline; }

/* Thanh điều hướng dưới đáy (điện thoại) */
.dke-bottomnav { display: none; }
@media (max-width: 768px) {
	.dke-bottomnav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 9990; height: 64px; background: #fff; border-top: 1px solid var(--dke-line); box-shadow: 0 -6px 18px rgba(27, 31, 42, .06); padding-bottom: env(safe-area-inset-bottom); font-family: var(--dke-font); }
	.dke-bottomnav a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 11px; font-weight: 600; color: var(--dke-muted); text-decoration: none; }
	.dke-bottomnav a.is-active { color: var(--dke-green); }
	body.dke-has-bottomnav { padding-bottom: 64px; }
	.dke-toasts { bottom: 80px; }
	.dke-hero { padding: 28px 0 40px; }
	.dke-hero__art { min-height: 280px; padding-top: 64px; }
	.dke-hero__bubble { top: 0; right: 8px; }
	.dke-hero__halo { top: 70px; }
	.dke-banner { padding: 24px 20px; }
}

@media (prefers-reduced-motion: reduce) {
	.dke-hani3d, .dke-hani3d *, .dke-hero__halo, .dke-hero__bubble { animation: none !important; transition: none !important; }
}

/* Chống theme ghi đè kiểu nút và tiêu đề */
.dke-section h2, .dke-section h3, .dke-hero h1, .dke-app h2, .dke-app h3, .dke-banner h2, .dke-meet h2, .dke-hangul h3 { font-family: var(--dke-font); font-weight: 800; letter-spacing: normal; }
button.dke-btn, a.dke-btn { background: var(--dke-green) !important; color: #fff !important; border-radius: 12px !important; font-family: var(--dke-font) !important; text-transform: none !important; letter-spacing: normal !important; box-shadow: none; }
button.dke-btn:hover, a.dke-btn:hover { background: var(--dke-green-dark) !important; }
button.dke-btn--outline, a.dke-btn--outline { background: #fff !important; color: var(--dke-green) !important; border: 1.5px solid var(--dke-green) !important; }
button.dke-btn--outline:hover, a.dke-btn--outline:hover { background: var(--dke-green-soft) !important; }
button.dke-btn--soft, a.dke-btn--soft { background: var(--dke-green-soft) !important; color: var(--dke-green) !important; border: 0 !important; }
button.dke-btn--soft:hover, a.dke-btn--soft:hover { background: #cfe5e2 !important; }
button.dke-btn--accent, a.dke-btn--accent { background: var(--dke-red-text) !important; }
button.dke-btn--accent:hover, a.dke-btn--accent:hover { background: #b8232f !important; }
a.dke-btn--light { background: #fff !important; color: var(--dke-green) !important; }
a.dke-btn--ghost { background: transparent !important; border: 1.5px solid #fff !important; }
.dke-today__main a.dke-btn { background: #fff !important; color: var(--dke-green) !important; }
button.dke-option, button.dke-grade, button.dke-qbtn, button.dke-letter { text-transform: none; letter-spacing: normal; }
button.dke-option, label.dke-option { background: #fff !important; color: var(--dke-ink) !important; border: 1px solid var(--dke-line) !important; opacity: 1 !important; font-weight: 500 !important; }
button.dke-option.is-right { background: var(--dke-green-soft) !important; border: 2px solid var(--dke-green) !important; }
button.dke-option.is-wrong { background: var(--dke-red-soft) !important; border: 2px solid var(--dke-red-text) !important; }
button.dke-letter, button.dke-qbtn { background: #fff !important; color: var(--dke-ink) !important; }
button.dke-qbtn.is-done { background: var(--dke-green) !important; color: #fff !important; }
button.dke-qbtn.is-marked { background: var(--dke-gold-soft) !important; color: var(--dke-gold-text) !important; }
button.dke-qbtn.is-current { background: #fff !important; color: var(--dke-green) !important; }
button.dke-grade { background: #fff !important; }
button.dke-grade--quen { background: var(--dke-red-text) !important; color: #fff !important; }
button.dke-grade--kho { color: #a3202b !important; }
button.dke-grade--duoc { color: var(--dke-green) !important; }
button.dke-grade--de { background: var(--dke-green) !important; color: #fff !important; }

/* Liên hệ & footer có logo */
.dke-footer__logo { display: inline-flex; background: #fff; border-radius: 14px; padding: 8px 10px; flex-shrink: 0; }
.dke-footer__logo img { width: 120px; height: auto; display: block; }
.dke-footer__brand { align-items: flex-start; grid-column: span 2; }
.dke-footer__brand span { line-height: 1.7; }
@media (max-width: 640px) { .dke-footer__brand { grid-column: auto; flex-direction: column; } }
.dke-contact { font-family: var(--dke-font); }
.dke-contact__hq { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; padding: 24px; }
.dke-contact__hq-text { flex: 1 1 420px; }
.dke-contact__hq h2 { margin: 4px 0 10px; color: var(--dke-green); font-family: var(--dke-font); }
.dke-contact__line { margin: 6px 0; }
.dke-contact__title { margin: 28px 0 12px; font-family: var(--dke-font); }
.dke-branches { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.dke-branch { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.dke-branch strong { color: var(--dke-green); }
.dke-branch__links a { font-weight: 600; }
.dke-listen { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.dke-contact__line, .dke-footer span { overflow-wrap: anywhere; }

/* ===== Header (GeneratePress và theme khác): logo ngang gọn, không lặp tên site ===== */
html, body { overflow-x: clip; } /* hero tràn ngang không tạo thanh cuộn ngang */
.site-header .site-logo img, .site-header .header-image, .custom-logo-link img, .custom-logo { width: auto !important; max-width: min(240px, 60vw) !important; height: auto !important; max-height: 56px; }
.dke-brand-logo .site-branding, .dke-brand-logo .site-title, .dke-brand-logo .site-description { display: none !important; }
.dke-brand-logo .site-header .inside-header { align-items: center; }
@media (max-width: 768px) {
	.site-header .site-logo img, .site-header .header-image, .custom-logo-link img, .custom-logo { max-height: 40px; max-width: 170px !important; }
	.site-header .inside-header { padding-top: 10px; padding-bottom: 10px; }
}