/* ============================================================
   style.css — Toàn bộ CSS của Phòng khám Tâm thần Trung ương
   (Tách từ <style> trong web 1.4.html — giữ nguyên 100%)
   ============================================================ */

        @import url('https://fonts.googleapis.com/css2?family=Lexend:wght@400;500;600;700;800;900&family=Be+Vietnam+Pro:wght@400;500;600;700;800;900&display=swap');

        :root {
            --ink: #2b3a47;          /* Viền/mực xám-than DỊU (soft-brutalism v2) */
            --ink-strong: #0f172a;   /* dự phòng khi cần đậm tuyệt đối */
            --primary: #138a9c;      /* Teal trấn an — màu chủ đạo v2 */
            --primary-deep: #0e6e80;
            --teal: #0e8ba1;         /* Xanh ngọc — lấy từ logo */
            --teal-light: #2bb6c9;
            --sage: #6f9b8e;         /* Xanh rêu nhạt — phụ trợ */
            --sky: #0ea5e9;
            --gold: #bd8b3f;         /* Vàng nhấn (hơi trầm cho dịu) */
            --red-light: #ff4d4d;
            --crisis: #dc2626;       /* Đỏ: chỉ dùng cho khủng hoảng/cấp cứu */
            --white: #ffffff;
            --bg: #f4f2ec;           /* Nền kem ấm, trấn an */
            --border: 5px;
            --radius: 12px;
            --radius-sm: 8px;
            --shadow: 5px 5px 0px rgba(43,58,71,.16), 0 10px 24px rgba(15,23,42,.05);
        }

        * { -webkit-tap-highlight-color: transparent; }

        body {
            font-family: 'Lexend', 'Be Vietnam Pro', sans-serif;
            background-color: var(--bg);
            color: var(--ink);
            margin: 0; padding: 0;
            overflow-x: hidden;
            line-height: 1.6;            /* nhịp đọc dễ chịu (font Lexend tối ưu khả năng đọc) */
            -webkit-font-smoothing: antialiased;
            text-rendering: optimizeLegibility;
        }
        h1, h2, h3, h4, .font-space { font-family: 'Lexend', 'Be Vietnam Pro', sans-serif; letter-spacing: -0.01em; }

        /* Scrollbar */
        ::-webkit-scrollbar { width: 12px; height: 12px; }
        ::-webkit-scrollbar-track { background: var(--white); border-left: 3px solid var(--ink); }
        ::-webkit-scrollbar-thumb { background: var(--primary); border: 3px solid var(--ink); }
        ::-webkit-scrollbar-thumb:hover { background: var(--ink); }
        .scrollbar-hide::-webkit-scrollbar { display: none; }
        .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

        /* ===== THƯ VIỆN VIDEO: khung chính + thanh cuộn ngang đề xuất ===== */
        /* Khung video chính (#videoMain) chứa facade hoặc iframe */
        #videoMain iframe { width: 100%; height: 100%; border: 0; display: block; }
        .video-facade { position: relative; width: 100%; height: 100%; border: 4px solid var(--ink);
            overflow: hidden; background: #0f172a; cursor: pointer; }
        .video-facade img { width: 100%; height: 100%; object-fit: cover; opacity: .85; transition: opacity .25s, transform .25s; }
        .video-facade:hover img { opacity: 1; transform: scale(1.03); }
        .video-facade .vf-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
            width: 80px; height: 80px; background: var(--primary); border: 5px solid var(--ink);
            box-shadow: 6px 6px 0 #fff; display: flex; align-items: center; justify-content: center; transition: background .2s; }
        .video-facade:hover .vf-play { background: var(--teal); }
        .video-facade .vf-caption { position: absolute; bottom: 1.25rem; left: 1.25rem; right: 1.25rem;
            background: #fff; border: 5px solid var(--ink); padding: 1rem; box-shadow: 8px 8px 0 var(--primary); }

        /* Thanh cuộn ngang các video đề xuất */
        .video-strip { display: flex; gap: 1rem; overflow-x: auto; overflow-y: hidden;
            scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: .25rem .25rem 1rem; }
        .video-thumb { scroll-snap-align: start; flex: 0 0 auto; width: 210px; cursor: pointer;
            background: #fff; border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink);
            transition: transform .15s, box-shadow .15s; display: flex; flex-direction: column; }
        .video-thumb:hover { transform: translateY(-3px); box-shadow: 6px 6px 0 var(--primary); }
        .video-thumb.active { box-shadow: 6px 6px 0 var(--teal); outline: 3px solid var(--teal); outline-offset: -3px; }
        .video-thumb .vt-imgwrap { position: relative; height: 118px; background: #0f172a;
            border-bottom: 3px solid var(--ink); overflow: hidden; }
        .video-thumb .vid-thumb { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s; }
        .video-thumb .vt-badge { position: absolute; top: 6px; left: 6px; }
        .video-thumb .vt-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
            width: 38px; height: 38px; background: var(--primary); border: 3px solid var(--ink);
            display: flex; align-items: center; justify-content: center; color: #fff; }
        .video-thumb .vt-body { padding: .6rem .7rem; }
        .video-thumb .vt-title { font-weight: 800; font-size: .8rem; line-height: 1.15; color: var(--ink);
            display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
        .video-thumb .vt-doctor { font-size: .68rem; font-weight: 700; color: var(--primary); margin-top: .25rem; }

        .mondrian-box {
            background: var(--white);
            border: var(--border) solid var(--ink);
            box-shadow: var(--shadow);
            position: relative;
            transition: transform .2s ease, box-shadow .2s ease;
            border-radius: 0;
        }
        .mondrian-box:hover { transform: translate(-4px, -4px); box-shadow: 9px 9px 0px rgba(19,138,156,.22), 0 16px 32px rgba(15,23,42,.07); }

        .stripes-pattern { background: repeating-linear-gradient(45deg, var(--ink), var(--ink) 2px, transparent 2px, transparent 8px); }
        .stripes-teal { background: repeating-linear-gradient(45deg, var(--teal), var(--teal) 2px, transparent 2px, transparent 8px); }
        .stripes-blue { background: repeating-linear-gradient(45deg, var(--sky), var(--sky) 2px, transparent 2px, transparent 8px); }

        .btn-mondrian {
            background: var(--primary); color: var(--white);
            border: 4px solid var(--ink); box-shadow: 4px 4px 0px var(--ink);
            font-weight: 800; text-transform: uppercase;
            transition: transform .1s ease, box-shadow .1s ease, background .15s ease;
            display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
        }
        .btn-mondrian:hover { background: var(--primary-deep); }
        .btn-mondrian:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--ink); }

        .btn-mondrian-white {
            background: var(--white); color: var(--ink);
            border: 4px solid var(--ink); box-shadow: 4px 4px 0px var(--primary);
            font-weight: 800; transition: transform .1s ease, box-shadow .1s ease; cursor: pointer;
        }
        .btn-mondrian-white:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--primary); }

        .bg-mondrian-grid {
            background-color: var(--bg);
            background-image:
                linear-gradient(var(--teal-light) 1px, transparent 1px),
                linear-gradient(90deg, var(--teal-light) 1px, transparent 1px);
            background-size: 60px 60px;
            opacity: 0.13;
            position: fixed; inset: 0; z-index: -1;
        }

        details > summary { list-style: none; cursor: pointer; }
        details > summary::-webkit-details-marker { display: none; }

        /* Calendar */
        .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0; border: 2px solid var(--ink); border-right: none; border-bottom: none; }
        .cal-day { padding: 9px 0; text-align: center; font-size: .8rem; font-weight: 600; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); background: white; transition: all .1s; user-select: none; }
        .cal-day.pick:hover { background: var(--teal-light); color: var(--ink); cursor: pointer; }
        .cal-day.active { background: var(--primary); color: white; }
        .cal-day.today { box-shadow: inset 0 0 0 2px var(--gold); }
        .cal-day.empty { background: #f1f5f9; color: transparent; }
        .cal-day.past { background: #f8fafc; color: #cbd5e1; cursor: not-allowed; }
        .cal-header { font-weight: 800; color: white; background: var(--ink); font-size: .72rem; text-align: center; padding: 5px 0; border-right: 2px solid var(--white); }
        .cal-header:last-child { border-right: none; }

        .panel-header { border-bottom: var(--border) solid var(--ink); display: flex; align-items: stretch; background: var(--white); }
        .panel-title { padding: 16px; flex-grow: 1; font-family: 'Lexend', sans-serif; font-weight: 700; font-size: 1.1rem; text-transform: uppercase; letter-spacing: .5px; display: flex; align-items: center; }
        .panel-icon-box { width: 60px; border-left: var(--border) solid var(--ink); background: var(--teal-light); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: var(--ink); }

        .dec-square { position: absolute; width: 12px; height: 12px; background: var(--primary); border: 3px solid var(--ink); z-index: 10; }
        .dec-tl { top: -6px; left: -6px; } .dec-tr { top: -6px; right: -6px; }
        .dec-bl { bottom: -6px; left: -6px; } .dec-br { bottom: -6px; right: -6px; }

        /* Time slot chips */
        .slot { border: 3px solid var(--ink); background: white; font-weight: 700; font-size: .8rem; padding: 7px 4px; cursor: pointer; transition: all .1s; text-align: center; }
        .slot:hover { background: var(--teal-light); }
        .slot.active { background: var(--ink); color: white; }
        .slot.taken { background: #f1f5f9; color: #cbd5e1; cursor: not-allowed; text-decoration: line-through; }
        /* Khung giờ bác sĩ đánh dấu bận — phía BỆNH NHÂN: làm mờ, không cho chọn */
        .slot.blocked { background: #fde8e8; color: #e11d2a; border-color: #e11d2a; cursor: not-allowed; text-decoration: line-through; opacity: .75; }
        .slot.blocked:hover { background: #fde8e8; }
        /* Khung giờ bận trong "Quản lý lịch làm việc" của BÁC SĨ — đỏ, vẫn click để mở lại */
        .slot.busy { background: #e11d2a; color: white; border-color: var(--ink); text-decoration: none; }
        .slot.busy:hover { background: #c81e1e; }

        /* Box thông tin bác sĩ cạnh lịch đặt khám */
        .docinfo-box { border: 3px solid var(--ink); background: #f8fafc; padding: 10px 12px; margin-bottom: 12px; box-shadow: 3px 3px 0 var(--teal); }
        .docinfo-box:empty { display: none; }
        .docinfo-loading { font-size: .75rem; color: #94a3b8; font-style: italic; }
        .docinfo-title { font-weight: 800; font-size: .85rem; color: var(--ink); margin-bottom: 6px; }
        .docinfo-row { display: flex; gap: 8px; font-size: .75rem; padding: 2px 0; }
        .docinfo-label { flex: 0 0 64px; font-weight: 800; text-transform: uppercase; color: var(--teal); font-size: .66rem; padding-top: 1px; }
        .docinfo-val { color: #334155; font-weight: 600; }

        /* Modal */
        .modal-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.55); backdrop-filter: blur(2px); z-index: 90; display: none; align-items: flex-start; justify-content: center; padding: 16px; overflow-y: auto; }
        .modal-overlay.show { display: flex; }
        /* Khóa cuộn TRANG NỀN khi modal mở → chỉ còn 1 vùng cuộn (nội dung modal). */
        body.modal-open { overflow: hidden; }
        .modal-card { width: 100%; max-width: 640px; margin-top: 5vh; animation: pop .18s ease; }
        @keyframes pop { from { transform: translateY(12px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }

        /* ICD list */
        .icd-item { border: 3px solid var(--ink); background: white; padding: 12px 14px; cursor: pointer; transition: all .12s; display: flex; align-items: center; gap: 12px; }
        .icd-item:hover, .icd-item.kbd { background: var(--teal-light); transform: translateX(3px); }
        .icd-code { font-family: 'Lexend'; font-weight: 700; background: var(--ink); color: white; padding: 2px 8px; font-size: .75rem; white-space: nowrap; }

        /* Test tâm lý chuyên biệt (nodes) */
        .test-block { margin-top: 18px; border-top: 3px dashed var(--ink); padding-top: 14px; }
        .test-block-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
        .test-grid { display: flex; flex-wrap: wrap; gap: 8px; }
        .test-node { border: 3px solid var(--ink); background: #fff; padding: 7px 10px; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: transform .12s, box-shadow .12s, background .12s; box-shadow: 3px 3px 0 var(--ink); text-align: left; }
        .test-node:hover { transform: translate(-1px,-1px); box-shadow: 5px 5px 0 var(--primary); }
        .test-node.active { box-shadow: 5px 5px 0 var(--teal); background: var(--teal-light); }
        .test-node.active .test-full { color: #fff; }
        .test-ab { font-family: 'Lexend'; font-weight: 700; font-size: .72rem; background: var(--ink); color: #fff; padding: 2px 7px; white-space: nowrap; }
        .test-full { font-weight: 600; font-size: .72rem; color: var(--red-light); }
        .test-info { margin-top: 12px; border: 3px solid var(--ink); background: #f8fafc; padding: 12px 14px; box-shadow: 4px 4px 0 var(--gold); }

        /* Toast */
        #toastWrap { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 120; display: flex; flex-direction: column; gap: 10px; width: calc(100% - 32px); max-width: 420px; pointer-events: none; }
        .toast { background: var(--white); border: 4px solid var(--ink); box-shadow: 6px 6px 0 var(--primary); padding: 12px 16px; font-weight: 700; font-size: .85rem; display: flex; align-items: center; gap: 10px; animation: slideUp .25s ease; }
        @keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }

        .marquee-track { display: inline-flex; white-space: nowrap; animation: marquee 28s linear infinite; }
        @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

        /* So dien thoai - do choi tren nen trang */
        .phone-red {
            color: #e11d2a !important;
            background: #ffffff !important;
            font-weight: 800 !important;
            letter-spacing: .3px;
            white-space: nowrap;
            transition: color .15s ease, background .15s ease;
        }
        .phone-red:hover { color: #ffffff !important; background: #e11d2a !important; }

        /* Game thu gian */
        .game-cell {
            border: 3px solid var(--ink);
            background: #f1f5f9;
            display: flex; align-items: center; justify-content: center;
            font-size: 1.6rem; min-height: 54px; cursor: pointer;
            transition: transform .08s ease, background .1s ease;
            color: var(--ink); user-select: none;
        }
        .game-cell:active { transform: scale(.9); }
        .game-cell.good { background: var(--teal-light); color: var(--ink); box-shadow: inset 0 0 0 3px var(--ink); animation: pop .12s ease; }
        .game-cell.bad  { background: var(--ink); color: #fff; animation: pop .12s ease; }

        /* ===== Tối ưu xuống dòng (desktop & mobile/Android) ===== */
        h1, h2, h3, h4, .panel-title, .font-space { text-wrap: balance; }
        p { text-wrap: pretty; }
        h1, h2, h3, h4, p, span, a, li { overflow-wrap: break-word; }
        .nowrap { white-space: nowrap; }

        /* ===== Làm nổi bật tên phòng khám trên banner (outline + shadow nhẹ) ===== */
        .brand-emboss {
            paint-order: stroke fill;
            -webkit-text-stroke: 1px var(--ink);
            text-shadow: 4px 4px 0 rgba(14,139,161,.20), 0 3px 9px rgba(15,23,42,.18);
        }
        .brand-eyebrow {
            paint-order: stroke fill;
            -webkit-text-stroke: .3px rgba(15,23,42,.20);
            text-shadow: 1.5px 1.5px 0 rgba(15,23,42,.16);
        }
        .brand-footer {
            paint-order: stroke fill;
            -webkit-text-stroke: .9px var(--ink);
            text-shadow: 3px 3px 0 rgba(37,99,235,.20), 0 2px 7px rgba(15,23,42,.16);
        }
        .brand-footer-outline {
            text-shadow: 3px 3px 0 rgba(37,99,235,.22), 0 2px 7px rgba(15,23,42,.15);
        }

        /* ===== Khả năng tiếp cận (focus) ===== */
        a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible, [tabindex]:focus-visible, label:focus-within {
            outline: 3px solid var(--gold); outline-offset: 2px;
        }
        .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
        [id] { scroll-margin-top: 72px; }
        html { scroll-behavior: smooth; }

        /* ===== Thanh điều hướng ===== */
        .nav-link { padding:.5rem .7rem; font-weight:700; font-size:.78rem; text-transform:uppercase; letter-spacing:.02em; color:#0f172a; border:2px solid transparent; transition:all .12s; }
        .nav-link:hover { background:var(--teal-light); border-color:#0f172a; }

        /* ===== Bài test trắc nghiệm ===== */
        .opt-chip { position:relative; overflow:hidden; border:3px solid var(--ink); background:#fff; padding:6px 11px; font-size:.74rem; font-weight:700; cursor:pointer; user-select:none; transition:all .1s; }
        .opt-chip:hover { background:var(--teal-light); }
        .opt-chip:has(input:checked) { background:var(--ink); color:#fff; }
        /* Radio PHỦ kín nhãn (thay vì sr-only định vị lệch) → tick không làm modal
           cuộn/giật lên đầu do focus "scroll-into-view". Vẫn ẩn nhờ opacity:0. */
        .opt-chip input { position:absolute; inset:0; width:100%; height:100%; margin:0; padding:0; opacity:0; clip:auto; -webkit-appearance:none; appearance:none; cursor:pointer; }

        @media (prefers-reduced-motion: reduce) {
            *, .marquee-track, .modal-card { animation: none !important; transition: none !important; }
        }

        /* Cổng AUTH-LOADING: ẩn phần phụ thuộc vai trò tới khi onAuthChange resolve
           lần đầu (tránh chớp tắt UI giữa trạng thái chưa/đã đăng nhập khi F5).
           authUI gỡ class 'auth-loading' khỏi <body> ở callback đầu tiên. */
        body.auth-loading [data-auth-only],
        body.auth-loading [data-admin-btn],
        body.auth-loading [data-pw-btn] { visibility: hidden; }

        /* ============================================================
           RESKIN v2 (soft-brutalism) — CHỈ CSS, không đụng markup/JS.
           Nạp cuối + dùng !important để đồng bộ palette cho cả lớp
           Tailwind hardcode (#0f172a, #2563eb) lẫn lớp dùng biến.
           ============================================================ */

        /* Bo góc mềm cho các khối chính */
        .mondrian-box, .modal-card { border-radius: var(--radius); }
        .btn-mondrian, .btn-mondrian-white, .test-node, .opt-chip, .icd-item,
        .slot, .toast, .docinfo-box, .test-info, .game-cell, .cal-day,
        .icd-code, .test-ab, input, select, textarea { border-radius: var(--radius-sm); }
        .panel-icon-box { border-radius: 0; }   /* giữ vuông trong header để khớp viền */

        /* Bóng dịu hơn cho thẻ/nút dùng lớp riêng */
        .test-node:hover { box-shadow: 5px 5px 0 rgba(19,138,156,.25); }
        .video-thumb:hover { box-shadow: 6px 6px 0 rgba(19,138,156,.20); }

        /* Đồng bộ palette cho lớp Tailwind hardcode (giữ nút/modal/JS-render nhất quán) */
        .bg-\[\#0f172a\], .hover\:bg-\[\#0f172a\]:hover { background-color: var(--ink) !important; }
        .bg-\[\#2563eb\], .hover\:bg-\[\#2563eb\]:hover { background-color: var(--primary) !important; }
        .text-\[\#0f172a\] { color: var(--ink) !important; }
        .text-\[\#2563eb\] { color: var(--primary) !important; }
        .border-\[\#0f172a\] { border-color: var(--ink) !important; }
        .divide-\[\#0f172a\] > :not([hidden]) ~ :not([hidden]) { border-color: var(--ink) !important; }

        /* Làm dịu bóng cứng hardcode phổ biến (#0f172a) → bóng xám-than nhạt */
        .shadow-\[3px_3px_0_\#0f172a\] { box-shadow: 3px 3px 0 rgba(43,58,71,.16) !important; }
        .shadow-\[4px_4px_0px_\#0f172a\] { box-shadow: 4px 4px 0 rgba(43,58,71,.16) !important; }
        .shadow-\[5px_5px_0px_\#0f172a\] { box-shadow: 5px 5px 0 rgba(43,58,71,.15) !important; }
        .shadow-\[6px_6px_0px_\#0f172a\] { box-shadow: 6px 6px 0 rgba(43,58,71,.14) !important; }
        .shadow-\[8px_8px_0px_\#0f172a\] { box-shadow: 8px 8px 0 rgba(43,58,71,.13) !important; }

        /* Nền trang ấm */
        body { background-color: var(--bg); }