/* ========================================================= cac-tiep-can/style.css — riêng cho môn "Các tiếp cận tham vấn trị liệu tâm lý". Token màu/font, reset nền tảng, .eyebrow, .callout, .pill đã có sẵn ở ../assets/css/theme.css (link trước file này trong ) — ở đây chỉ còn phần bố cục & component riêng của môn: topbar, hub-grid, quiz engine, câu hỏi ngắn/văn mẫu, drawer. ========================================================= */ :root{ --ok:#33463B; --bad:#7C2D2D; } a{color:var(--maroon-deep);} /* ---------- back link (dùng ở titlepage của index.html — về landing page) ---------- */ .back-link{ display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:11.5px; font-weight:700; letter-spacing:.04em; color:var(--maroon-deep); text-decoration:none; margin-bottom:16px; } .back-link:hover{color:var(--maroon); text-decoration:underline;} .back-link:focus-visible{outline:2px solid var(--maroon); outline-offset:2px;} /* ---------- top bar (dùng cho mọi trang con: quiz, câu hỏi ngắn, 11 file tiếp cận) ---------- */ .topbar{ position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:14px; padding:14px clamp(16px,4vw,40px); background:linear-gradient(180deg, var(--paper-dark), var(--paper)); border-bottom:1px solid var(--line); } .topbar a.back{ font-family:var(--sans); font-size:12.5px; font-weight:600; color:var(--maroon-deep); text-decoration:none; display:inline-flex; align-items:center; gap:6px; } .topbar a.back:hover{text-decoration:underline;} .topbar .crumb{ font-family:var(--mono); font-size:11px; color:var(--ink-faint); letter-spacing:.04em; } /* ---------- shell / reading column (trang nội dung) ---------- */ .reading{ padding:44px clamp(20px,5vw,72px) 120px; max-width:980px; margin:0 auto; } .titlepage{ margin-bottom:44px; padding-bottom:28px; border-bottom:1px solid var(--line); } /* .eyebrow dùng chung từ theme.css */ .titlepage h1{ font-family:var(--serif); font-weight:700; font-size:clamp(26px,4.2vw,40px); margin:0 0 14px; color:var(--ink); letter-spacing:-.01em; } .titlepage p{ margin:0; color:var(--ink-soft); font-size:15px; max-width:60ch; } .titlepage .src{ display:inline-flex; align-items:center; gap:8px; margin-top:16px; font-family:var(--mono); font-size:11.5px; color:var(--ink-faint); } .titlepage .src .dot{width:5px;height:5px;border-radius:50%;background:var(--gold);} .block{margin:0 0 28px;} .block h3{ font-family:var(--sans); font-weight:600; font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--maroon-deep); margin:0 0 12px; display:flex; align-items:center; gap:10px; } .block h3::after{ content:""; flex:1; height:1px; background:var(--line); } .block h4{ font-family:var(--serif); font-weight:600; font-style:italic; font-size:16px; margin:18px 0 8px; color:var(--ink); } .block p{margin:0 0 10px; color:var(--ink);} .block ul, .block ol{margin:0 0 10px; padding-left:22px;} .block li{margin-bottom:7px;} .block li::marker{color:var(--ink-faint);} .placeholder{ color:var(--ink-faint); font-style:italic; font-size:14px; border:1px dashed var(--line); border-radius:4px; padding:12px 14px; background:var(--card); } /* .callout dùng chung từ theme.css */ .divider-end{ margin-top:52px; padding-top:20px; border-top:1px dashed var(--line); color:var(--ink-faint); font-size:13.5px; font-style:italic; } /* ---------- index / hub cards ---------- */ .hub-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); gap:14px; margin:0 0 40px; } .hub-card{ display:block; text-decoration:none; background:var(--card); border:1px solid var(--line); border-radius:6px; padding:16px 18px; color:var(--ink); position:relative; transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease; } .hub-card:hover{border-color:var(--gold); transform:translateY(-2px); box-shadow:var(--shadow);} .hub-card .num{ font-family:var(--mono); font-size:11px; color:var(--maroon-deep); letter-spacing:.06em; } .hub-card h3{ font-family:var(--serif); font-size:17px; font-weight:600; margin:6px 0 4px; color:var(--ink); /* reset cascade từ .block h3 (uppercase/flex/divider) — h3 này nằm trong .block */ display:block; text-transform:none; letter-spacing:normal; gap:0; } .hub-card h3::after{content:none;} .hub-card .who{ font-family:var(--sans); font-size:12px; color:var(--ink-faint); } .tool-row{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:14px; margin:0 0 40px; } .tool-card{ display:block; text-decoration:none; background:linear-gradient(180deg, var(--card), var(--paper-dark)); border:1px solid var(--gold); border-radius:6px; padding:18px 20px; color:var(--ink); } .tool-card h3{ font-family:var(--serif); font-size:18px; font-weight:600; margin:0 0 6px; color:var(--maroon-deep); /* reset cascade từ .block h3 (uppercase/flex/divider) — h3 này nằm trong .block */ display:block; text-transform:none; letter-spacing:normal; gap:0; } .tool-card h3::after{content:none;} .tool-card p{ font-family:var(--sans); font-size:13px; color:var(--ink-soft); margin:0; } /* ---------- header block có nút hành động (bảng tổng hợp nhanh) ---------- */ .block-head{ display:flex; align-items:center; gap:14px; margin-bottom:12px; } .block-head h3{margin:0; flex:1; min-width:0;} .block-head .block-actions{ display:flex; gap:8px; flex:none; } .btn-ghost{ font-family:var(--sans); font-weight:600; font-size:12px; color:var(--ink-soft); background:var(--card); border:1px solid var(--line); border-radius:5px; padding:6px 12px; cursor:pointer; display:inline-flex; align-items:center; gap:6px; white-space:nowrap; } .btn-ghost:hover{border-color:var(--gold); color:var(--ink);} .btn-ghost:focus-visible{outline:2px solid var(--maroon); outline-offset:2px;} .btn-ghost .chev{ display:inline-block; font-size:10px; transition:transform .18s ease; } .btn-ghost[aria-expanded="false"] .chev{transform:rotate(-90deg);} /* ---------- bảng tổng hợp nhanh (index.html) ---------- */ .quickref-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:6px; margin:0 0 40px; -webkit-overflow-scrolling:touch; } table.quickref{ width:100%; min-width:760px; border-collapse:collapse; background:var(--card); font-family:var(--sans); font-size:13px; } table.quickref thead th{ text-align:left; font-family:var(--mono); font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-faint); background:var(--paper-dark); padding:10px 12px; border-bottom:1px solid var(--line); white-space:nowrap; } table.quickref tbody td{ padding:12px; border-bottom:1px solid var(--line); vertical-align:top; color:var(--ink); } table.quickref tbody tr:last-child td{border-bottom:none;} table.quickref tbody tr:hover{background:var(--paper);} .qr-no{ font-family:var(--mono); color:var(--maroon-deep); font-weight:600; } .qr-name a{ display:block; font-family:var(--serif); font-weight:600; font-size:14.5px; color:var(--maroon-deep); text-decoration:none; white-space:nowrap; } .qr-name a:hover{text-decoration:underline;} .qr-founders{ display:block; font-family:var(--mono); font-size:10.5px; color:var(--ink-faint); white-space:nowrap; margin-top:2px; } .qr-goal{ min-width:220px; color:var(--ink-soft); line-height:1.5; } .qr-chip{ display:inline-block; font-size:11px; color:var(--forest); background:#E4E9E1; border:1px solid #CBD6C5; border-radius:3px; padding:1px 6px; margin:0 4px 4px 0; white-space:nowrap; } /* ---------- quiz ---------- */ .quiz-setup{ display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:16px; margin:24px 0 8px; } .quiz-opt{ border:1px solid var(--line); background:var(--card); border-radius:6px; padding:20px; text-align:left; cursor:pointer; font-family:var(--sans); color:var(--ink); } .quiz-opt:hover{border-color:var(--gold); background:#F3EBD8;} .quiz-opt .n{ font-family:var(--serif); font-size:30px; font-weight:700; color:var(--maroon); display:block; } .quiz-opt .lbl{font-size:12.5px; color:var(--ink-faint); letter-spacing:.03em;} .progress-wrap{ display:flex; align-items:center; gap:12px; margin:0 0 26px; font-family:var(--mono); font-size:12px; color:var(--ink-faint); } .progress-bar{ flex:1; height:6px; background:var(--paper-dark); border-radius:99px; overflow:hidden; border:1px solid var(--line); } .progress-bar > i{ display:block; height:100%; background:var(--maroon); width:0%; transition:width .2s ease; } .q-card{ background:var(--card); border:1px solid var(--line); border-radius:6px; padding:22px 24px; margin-bottom:18px; } .q-card .q-tag{ font-family:var(--mono); font-size:10.5px; letter-spacing:.05em; color:var(--forest); background:#E4E9E1; border:1px solid #CBD6C5; border-radius:3px; padding:2px 7px; display:inline-block; margin-bottom:10px; } .q-card .q-text{ font-family:var(--serif); font-size:17px; color:var(--ink); margin:0 0 16px; line-height:1.55; } .q-options{list-style:none; margin:0; padding:0;} .q-options li{margin-bottom:9px;} .q-options label{ display:flex; align-items:flex-start; gap:10px; border:1px solid var(--line); background:var(--paper); border-radius:5px; padding:10px 13px; cursor:pointer; font-family:var(--sans); font-size:14px; color:var(--ink); transition:border-color .12s ease, background .12s ease; } .q-options label:hover{border-color:var(--gold);} .q-options input{margin-top:3px; accent-color:var(--maroon);} .q-options label.chosen{border-color:var(--maroon); background:#F0E4D2;} /* review state */ .q-card.correct{border-left:4px solid var(--ok);} .q-card.incorrect{border-left:4px solid var(--bad);} .q-options label.opt-correct{border-color:var(--ok); background:#E4E9E1;} .q-options label.opt-incorrect{border-color:var(--bad); background:#F3DEDE;} .q-verdict{ font-family:var(--sans); font-weight:600; font-size:12.5px; margin:2px 0 10px; } .q-verdict.ok{color:var(--ok);} .q-verdict.bad{color:var(--bad);} .q-explain{ margin-top:12px; padding:12px 14px; background:var(--paper); border:1px solid var(--line); border-radius:4px; font-size:13.5px; color:var(--ink-soft); } .q-explain strong{color:var(--maroon-deep);} .quiz-actions{ display:flex; justify-content:space-between; align-items:center; margin-top:20px; gap:12px; flex-wrap:wrap; } .btn{ font-family:var(--sans); font-weight:600; font-size:13.5px; border:none; border-radius:5px; padding:11px 20px; cursor:pointer; background:var(--maroon); color:#fff; } .btn:hover{background:var(--maroon-deep);} .btn.secondary{ background:transparent; border:1px solid var(--line); color:var(--ink-soft); } .btn.secondary:hover{border-color:var(--gold); color:var(--ink);} .btn:disabled{opacity:.45; cursor:not-allowed;} .result-summary{ text-align:center; padding:36px 20px; background:var(--card); border:1px solid var(--line); border-radius:8px; margin-bottom:28px; } .result-summary .score{ font-family:var(--serif); font-weight:700; font-size:52px; color:var(--maroon); margin:0; } .result-summary .score small{font-size:22px; color:var(--ink-faint); font-weight:500;} .result-summary .pct{ font-family:var(--sans); font-size:13px; color:var(--ink-soft); letter-spacing:.03em; margin-top:6px; } /* ---------- short-answer / văn mẫu ---------- */ .sa-card{ background:var(--card); border:1px solid var(--line); border-radius:6px; padding:20px 22px; margin-bottom:16px; } .sa-card.exam{ border-color:var(--gold); background:linear-gradient(180deg, var(--card), var(--paper-dark)); } .sa-card .sa-badge{ margin-bottom:10px; } .sa-card .sa-q{ font-family:var(--serif); font-size:17px; font-weight:600; color:var(--ink); margin:0 0 6px; } .sa-card .sa-meta{ font-family:var(--mono); font-size:11px; color:var(--ink-faint); margin-bottom:12px; } .sa-open{ font-family:var(--sans); font-weight:600; font-size:12.5px; color:var(--maroon-deep); background:none; border:1px solid var(--gold); border-radius:4px; padding:7px 14px; cursor:pointer; } .sa-open:hover{background:var(--maroon); color:#fff; border-color:var(--maroon);} .van-mau-tabs{display:flex; gap:6px; margin-bottom:14px;} .van-mau-tabs button{ font-family:var(--sans); font-size:12px; font-weight:600; color:var(--ink-soft); background:var(--paper); border:1px solid var(--line); border-radius:4px; padding:7px 13px; cursor:pointer; } .van-mau-tabs button[aria-selected="true"]{ background:var(--maroon); color:#fff; border-color:var(--maroon); } .van-mau-body{ font-size:14.5px; line-height:1.75; color:var(--ink); } .van-mau-body p{margin:0 0 12px;} /* ---------- floating / drawer (dùng lại từ TLH tôn giáo) ---------- */ .fab{ position:fixed; right:22px; bottom:22px; z-index:40; background:var(--maroon); color:#fff; border:none; border-radius:999px; padding:13px 20px 13px 16px; font-family:var(--sans); font-weight:600; font-size:13.5px; display:flex; align-items:center; gap:8px; cursor:pointer; box-shadow:var(--shadow); } .fab:hover{background:var(--maroon-deep);} .backdrop{ position:fixed; inset:0; background:rgba(30,24,18,.38); opacity:0; pointer-events:none; transition:opacity .22s ease; z-index:45; } .backdrop.show{opacity:1; pointer-events:auto;} .drawer{ position:fixed; top:0; right:0; height:100%; width:min(460px, 92vw); background:var(--card); border-left:1px solid var(--line); box-shadow:var(--shadow); transform:translateX(100%); transition:transform .28s cubic-bezier(.2,.7,.3,1); z-index:50; display:flex; flex-direction:column; } .drawer.open{transform:translateX(0);} .drawer__head{ display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid var(--line); background:var(--paper-dark); flex:none; } .drawer__head-title{ font-family:var(--sans); font-weight:600; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--maroon-deep); display:flex; align-items:center; gap:8px; } .drawer__close{ border:none; background:transparent; color:var(--ink-soft); cursor:pointer; width:30px; height:30px; border-radius:4px; display:flex; align-items:center; justify-content:center; font-size:18px; } .drawer__close:hover{background:var(--paper); color:var(--ink);} .drawer__body{padding:20px; overflow-y:auto; flex:1;} @media (max-width: 720px){ .reading{padding:28px 18px 100px;} .drawer{width:100%;} .block-head{flex-wrap:wrap;} } /* ---------- in / xuất PDF chỉ riêng bảng tổng hợp nhanh (khổ ngang) ---------- */ @media print{ /* @page landscape mặc định cũng được set động qua JS (chỉ áp cho lượt in này), khai báo lại ở đây làm phương án dự phòng cho trình duyệt không hỗ trợ style động. */ body.print-quickref-only{ -webkit-print-color-adjust: exact; print-color-adjust: exact; } body.print-quickref-only *{visibility:hidden;} body.print-quickref-only #quickrefBlock, body.print-quickref-only #quickrefBlock *{visibility:visible;} body.print-quickref-only #quickrefBlock{ position:absolute; left:0; top:0; width:100%; margin:0; padding:0; } body.print-quickref-only .block-head{margin-bottom:8px;} body.print-quickref-only .block-head h3{ font-size:15px; letter-spacing:.04em; } /* luôn hiện đủ bảng khi in, kể cả đang ở trạng thái thu gọn */ body.print-quickref-only .quickref-wrap[hidden]{display:block !important;} body.print-quickref-only .quickref-wrap{ overflow:visible !important; border:none; width:100%; } /* bảng chiếm toàn bộ chiều rộng khổ ngang, cột có bề rộng cố định để nội dung dài luôn XUỐNG DÒNG (wrap) trong đúng cột của nó thay vì tràn sang cột bên cạnh */ body.print-quickref-only table.quickref{ width:100% !important; min-width:0 !important; max-width:none !important; table-layout:fixed; font-size:10.5px; } /* mọi phần tử con trong bảng đều phải bỏ nowrap — .qr-name a, .qr-founders, .qr-chip... đều tự khai báo white-space:nowrap riêng nên phải reset tại đây, nếu không thì set white-space:normal trên th/td (ở trên) sẽ bị chúng ghi đè */ body.print-quickref-only table.quickref th, body.print-quickref-only table.quickref td, body.print-quickref-only table.quickref *{ white-space:normal !important; overflow-wrap:anywhere !important; word-break:break-word !important; } body.print-quickref-only table.quickref th, body.print-quickref-only table.quickref td{ padding:6px 7px; vertical-align:top; } /* bề rộng cố định cho từng cột, cộng lại = 100% — # hẹp nhất, các cột nội dung chia theo tỉ lệ lượng chữ trung bình để giảm khả năng tràn/wrap quá nhiều dòng */ body.print-quickref-only table.quickref col:nth-child(1), body.print-quickref-only table.quickref th:nth-child(1), body.print-quickref-only table.quickref td:nth-child(1){width:4%;} body.print-quickref-only table.quickref col:nth-child(2), body.print-quickref-only table.quickref th:nth-child(2), body.print-quickref-only table.quickref td:nth-child(2){width:19%;} body.print-quickref-only table.quickref col:nth-child(3), body.print-quickref-only table.quickref th:nth-child(3), body.print-quickref-only table.quickref td:nth-child(3){width:24%;} body.print-quickref-only table.quickref col:nth-child(4), body.print-quickref-only table.quickref th:nth-child(4), body.print-quickref-only table.quickref td:nth-child(4){width:29%;} body.print-quickref-only table.quickref col:nth-child(5), body.print-quickref-only table.quickref th:nth-child(5), body.print-quickref-only table.quickref td:nth-child(5){width:24%;} body.print-quickref-only .qr-goal{min-width:0;} body.print-quickref-only .qr-name a, body.print-quickref-only .qr-founders{display:block; white-space:normal !important;} body.print-quickref-only .qr-chip{ display:inline-block; padding:0 4px; margin:0 3px 3px 0; font-size:9.5px; max-width:100%; } body.print-quickref-only .block-actions{display:none !important;} } /* ---------- ma trận so sánh (so-sanh.html) ---------- */ .cmp-controls{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-bottom:10px; } .cmp-filter{ display:flex; flex-wrap:wrap; gap:7px; flex:1; min-width:0; } .cmp-chip{ font-family:var(--sans); font-size:12px; font-weight:600; color:var(--ink-soft); background:var(--card); border:1px solid var(--line); border-radius:999px; padding:6px 13px; cursor:pointer; white-space:nowrap; } .cmp-chip:hover{border-color:var(--gold); color:var(--ink);} .cmp-chip.is-active{background:var(--maroon); border-color:var(--maroon); color:#fff;} .cmp-chip:focus-visible{outline:2px solid var(--maroon); outline-offset:2px;} .cmp-search{flex:none; width:min(320px, 100%);} .cmp-search input{ width:100%; font-family:var(--sans); font-size:13px; color:var(--ink); background:var(--card); border:1px solid var(--line); border-radius:6px; padding:8px 12px; } .cmp-search input:focus-visible{outline:2px solid var(--maroon); outline-offset:1px;} .cmp-count{ font-family:var(--mono); font-size:11.5px; color:var(--ink-faint); margin:0 0 20px; } .cmp-grid{ display:flex; flex-direction:column; gap:18px; margin-bottom:20px; } .cmp-card{ background:var(--card); border:1px solid var(--line); border-radius:8px; padding:22px 24px; } .cmp-card__head{ display:flex; align-items:flex-start; gap:14px; margin-bottom:14px; flex-wrap:wrap; } .cmp-no{ font-family:var(--mono); font-size:12px; font-weight:700; color:var(--maroon-deep); background:var(--paper-dark); border:1px solid var(--line); border-radius:5px; padding:3px 8px; flex:none; margin-top:2px; } .cmp-card__title{flex:1; min-width:200px;} .cmp-card__title h3{ font-family:var(--serif); font-size:19px; font-weight:600; margin:0 0 3px; color:var(--ink); } .cmp-card__title h3 a{color:var(--maroon-deep); text-decoration:none;} .cmp-card__title h3 a:hover{text-decoration:underline;} .cmp-founders{ font-family:var(--mono); font-size:11px; color:var(--ink-faint); margin:0; } .cmp-time-badge{ flex:none; font-family:var(--sans); font-size:11px; font-weight:600; color:var(--ink-soft); background:var(--paper); border:1px solid var(--line); border-radius:999px; padding:5px 12px; white-space:nowrap; align-self:flex-start; } .cmp-bestfor{ display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin-bottom:16px; } .cmp-bestfor__label{ font-family:var(--mono); font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-faint); margin-right:2px; } .cmp-pill{ display:inline-block; font-family:var(--sans); font-size:11.5px; color:var(--maroon-deep); background:#F0E4D2; border:1px solid var(--gold); border-radius:4px; padding:2px 9px; } .cmp-quad{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px; } .cmp-cell{ border-radius:6px; padding:12px 14px; border:1px solid var(--line); } .cmp-cell h4{ font-family:var(--sans); font-weight:600; font-size:11.5px; letter-spacing:.03em; margin:0 0 8px; } .cmp-cell ul{ margin:0; padding-left:18px; font-size:13px; line-height:1.55; color:var(--ink); } .cmp-cell li{margin-bottom:5px;} .cmp-cell li:last-child{margin-bottom:0;} .cmp-cell--pro{background:#E4E9E1; border-color:#CBD6C5;} .cmp-cell--pro h4{color:var(--ok);} .cmp-cell--con{background:#F3DEDE; border-color:#E3C2C2;} .cmp-cell--con h4{color:var(--bad);} .cmp-selffit{ margin:0; padding:12px 14px; background:var(--paper); border:1px solid var(--line); border-radius:5px; font-size:13.5px; color:var(--ink-soft); } .cmp-selffit strong{color:var(--maroon-deep);} @media (max-width: 640px){ .cmp-quad{grid-template-columns:1fr;} .cmp-search{width:100%;} }