/* ⭐ Ban demo tinh — dai bao "Bản demo" + trang thai o / lien ket bi khoa. */
.demo-bang {
    position: fixed; top: 0; left: 0; right: 0; z-index: 2147483000;
    margin: 0; padding: 7px 16px; text-align: center;
    background: #1f4d3a; color: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
    font: 600 13px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
.demo-bang a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.demo-bang a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* "Đăng nhập" ⇒ nut vien trang: khach thay ngay bao cao that can tai khoan. */
.demo-bang a.demo-bang-dang-nhap {
    display: inline-block; margin-left: 4px; padding: 1px 12px; border-radius: 999px; white-space: nowrap;
    background: #fff; color: #1f4d3a; text-decoration: none; line-height: 1.45;
}
.demo-bang a.demo-bang-dang-nhap:hover { background: #e6efe9; }
body { padding-top: 34px !important; }
/* Nut dang xuat cua app ⇒ <a> toi trang dang nhap that. */
a.bck-dang-xuat { display: inline-flex; align-items: center; text-decoration: none; }
.bck-chan-ben p.demo-tai-khoan { margin-top: var(--space-3, 12px); color: rgba(255, 255, 255, .8); font-weight: 500; }
@media (max-width: 640px) {
    .demo-bang { font-size: 12px; padding: 6px 12px; }
    body { padding-top: 50px !important; }
}
.demo-tat { cursor: not-allowed !important; opacity: .55; text-decoration: none !important; }
form[data-demo-tat] :disabled { cursor: not-allowed; }
.demo-ghi-chu {
    margin: 0 0 12px; padding: 8px 12px; border-radius: 8px;
    background: #fff7e0; color: #5c4400; border: 1px solid #f0d58a;
    font: 500 13px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ⭐ Owner 29/10 — muc 04 Trang dich: phan duoi hang KPI dau bi lam mo + the "Đăng ký mua". */
.demo-khoa { position: relative; min-height: 460px; max-height: 1150px; overflow: hidden; border-radius: 16px; }
.demo-mo {
    display: flex; flex-direction: column; gap: var(--space-5, 20px);
    filter: blur(7px); opacity: .55; pointer-events: none; user-select: none; -webkit-user-select: none;
}
@media (min-width: 850px) { .demo-mo { gap: var(--space-6, 24px); } }
.demo-khoa::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 60%; pointer-events: none;
    background: linear-gradient(to bottom, rgba(244, 245, 240, 0), var(--bck-nen, #F4F5F0) 80%);
}
.demo-the-vo { position: absolute; inset: 0; z-index: 2; display: flex; justify-content: center; align-items: flex-start; padding: 56px 0 0; }
.demo-the {
    width: 100%; max-width: 560px; margin: 0 auto; box-sizing: border-box; padding: 28px 24px; text-align: center;
    background: var(--surface-raised, #fff); border: 1px solid var(--bck-vien, #DCE3DA); border-top: 4px solid var(--brand-primary, #155446);
    border-radius: 16px; box-shadow: 0 12px 32px rgba(21, 84, 70, .18);
}
.demo-the h2 { margin: 0 0 8px; color: var(--brand-primary, #155446); font: 700 22px/30px var(--font-body); text-wrap: balance; }
.demo-the p { margin: 0 0 20px; color: var(--text-secondary, #3B3B3B); font: 500 15px/23px var(--font-body); }
.demo-the-nut { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.demo-nut {
    display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 48px; padding: 0 22px;
    border-radius: 999px; font: 700 15px/1.25 var(--font-body); text-decoration: none; text-align: center;
}
.demo-nut-chinh { background: var(--action-primary-bg, #A66426); color: var(--action-primary-text, #fff); }
.demo-nut-chinh:hover { background: var(--action-primary-bg-hover, #85501E); }
.demo-nut-phu { background: transparent; color: var(--brand-primary, #155446); box-shadow: inset 0 0 0 2px var(--brand-primary, #155446); }
.demo-nut-phu:hover { background: var(--bck-sang, #EEF3EE); }
.demo-nut:focus-visible { outline: 3px solid var(--brand-primary, #155446); outline-offset: 2px; }
@media (max-width: 640px) {
    .demo-the-vo { padding-top: 32px; }
    .demo-the { padding: 22px 16px; }
    .demo-the h2 { font-size: 20px; line-height: 28px; }
    .demo-nut { width: 100%; }
}
/* Lich chon ky (dung chung js/chon-khoang-ngay.js): moc chua co trong ban demo + loi khi chon khoang tuy y. */
.lich-trang-thai { max-width: 46ch; }
.lich-trang-thai.lich-loi { color: #b42318; font-weight: 600; }
.lich-moc-nut.lich-moc-khoa { color: var(--text-muted, #5E5E5E); }
.lich-moc-nut.lich-moc-khoa::after { content: ' · bản đầy đủ'; font-size: 11px; font-weight: 500; }