/* ========================================================= tlh-lam-sang/style.css — riêng cho môn "Nhập môn Tâm lý học Lâm sàng". 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 các nhánh, bảng so sánh, quiz engine. ========================================================= */ :root{ --ok:#33463B; --ok-bg:#E3EFE6; --bad:#7C2D2D; --bad-bg:#F6E3E0; /* màu nhận diện ba nhánh trị liệu */ --cbt:#1F5673; --cbt-bg:#E3EDF3; --ptam:#6B3E7A; --ptam-bg:#EEE4F1; --httgd:#2F6B45; --httgd-bg:#E3EFE6; } 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;} /* ---------- top bar (dùng cho mọi trang con: quiz, 3 file nhánh) ---------- */ .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 ---------- 980px — cùng một cỡ container với toàn bộ project (cac-tiep-can/, tlh-ton-giao/ và trang hub của môn này). */ .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); } .titlepage h1{ font-family:var(--serif); font-weight:700; font-size:clamp(28px,4.2vw,42px); margin:0 0 14px; 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);} /* ---------- section heads ---------- */ .q-head{display:flex; align-items:baseline; gap:14px; margin-bottom:6px;} .q-head .q-no{ font-family:var(--serif); font-weight:700; font-size:15px; color:var(--card); background:var(--maroon); width:30px;height:30px;border-radius:3px; display:flex;align-items:center;justify-content:center;flex:none; } .q-head h2{font-family:var(--serif); font-size:clamp(21px,2.6vw,27px); font-weight:600; margin:0;} .q-sub{ color:var(--ink-faint); font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; margin:0 0 26px 44px; } .block{margin:0 0 34px;} .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; } .block p{margin:0 0 10px;} .block ul, .block ol{margin:0 0 10px; padding-left:22px;} .block li{margin-bottom:7px;} .block li::marker{color:var(--ink-faint);} /* ô chờ đổ nội dung */ .placeholder{ border:1px dashed var(--line); border-radius:4px; padding:16px 18px; margin:10px 0 18px; background:rgba(247,242,231,.55); color:var(--ink-faint); font-family:var(--sans); font-size:13.5px; } .placeholder::before{ content:"CHỜ ĐỔ NỘI DUNG"; display:block; font-family:var(--mono); font-size:10px; letter-spacing:.14em; color:var(--gold); margin-bottom:6px; } .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; } /* ---------- .pill: biến thể màu theo nhánh & dạng câu ---------- Lớp .pill nền đã có ở theme.css; dưới đây chỉ là các modifier. */ .pill{margin:0 6px 6px 0;} .pill--cbt{background:var(--cbt-bg); color:var(--cbt); border-color:var(--cbt);} .pill--phan-tam{background:var(--ptam-bg); color:var(--ptam); border-color:var(--ptam);} .pill--gia-dinh{background:var(--httgd-bg); color:var(--httgd); border-color:var(--httgd);} .pill--ly-thuyet{background:#EFE6D3; color:var(--gold); border-color:var(--gold);} .pill--thuc-hanh{background:#E9E3D5; color:var(--maroon-deep); border-color:var(--maroon);} .pill--plain{background:var(--paper-dark); color:var(--ink-soft); border-color:var(--line);} /* ---------- hub grid: thẻ 3 nhánh trị liệu ---------- */ .hub-grid{ display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); margin:0 0 34px; } .branch-card{ display:block; text-decoration:none; color:inherit; background:var(--card); border:1px solid var(--line); border-top:4px solid var(--maroon); border-radius:5px; padding:20px 20px 18px; box-shadow:0 8px 22px -18px rgba(42,36,32,.6); transition:transform .16s ease, box-shadow .16s ease; } .branch-card:hover{transform:translateY(-2px); box-shadow:0 16px 30px -20px rgba(42,36,32,.65);} .branch-card[data-branch="cbt"]{border-top-color:var(--cbt);} .branch-card[data-branch="phan-tam"]{border-top-color:var(--ptam);} .branch-card[data-branch="gia-dinh"]{border-top-color:var(--httgd);} .branch-card .tagline{ font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 8px; } .branch-card h3{font-family:var(--serif); font-size:20px; font-weight:700; margin:0 0 4px;} .branch-card .en{font-family:var(--mono); font-size:11px; color:var(--ink-faint); margin:0 0 10px;} .branch-card p{margin:0 0 12px; font-size:14px; color:var(--ink-soft);} .branch-card .cta{font-family:var(--sans); font-size:12.5px; font-weight:600; color:var(--maroon-deep);} .branch-card .count{ display:block; margin-top:10px; font-family:var(--mono); font-size:11px; color:var(--ink-faint); } .branch-card .status{ display:inline-block; font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; border-radius:3px; padding:2px 7px; margin-bottom:10px; } .status--todo{background:#F1E7D2; color:var(--gold); border:1px solid var(--gold);} .status--done{background:var(--ok-bg); color:var(--ok); border:1px solid var(--ok);} /* ---------- bảng ---------- */ .datatable{ width:100%; border-collapse:collapse; font-family:var(--sans); font-size:13.5px; margin-bottom:18px; } .datatable th, .datatable td{ text-align:left; padding:9px 10px; border-bottom:1px solid var(--line); vertical-align:top; } .datatable th{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); font-weight:600; } .datatable td.num{font-family:var(--mono); text-align:right;} /* ---------- nút ---------- */ .btn{ font-family:var(--sans); font-weight:600; font-size:14px; border:1px solid var(--maroon); background:var(--maroon); color:#fff; border-radius:4px; padding:11px 20px; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:8px; } .btn:hover{background:var(--maroon-deep); border-color:var(--maroon-deep);} .btn--ghost{background:transparent; color:var(--maroon-deep);} .btn--ghost:hover{background:var(--card); color:var(--maroon-deep);} .btn:disabled{opacity:.45; cursor:not-allowed;} /* ========================================================= QUIZ ENGINE ========================================================= */ /* cùng cỡ với .reading, chỉ chừa thêm khoảng dưới cho thanh nộp bài cố định */ .quiz-shell{max-width:980px; margin:0 auto; padding:44px clamp(20px,5vw,72px) 150px;} .setup{ background:var(--card); border:1px solid var(--line); border-radius:5px; padding:24px; margin-bottom:28px; } .setup h2{font-family:var(--serif); font-size:20px; margin:0 0 6px;} .setup p{margin:0 0 16px; font-size:14px; color:var(--ink-soft);} .setup__row{display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-bottom:14px;} .setup label{font-family:var(--sans); font-size:13.5px; color:var(--ink-soft); display:flex; align-items:center; gap:7px;} .setup select{ font-family:var(--sans); font-size:13.5px; padding:7px 10px; border:1px solid var(--line); border-radius:4px; background:var(--paper); color:var(--ink); } .progressbar{ position:sticky; top:0; z-index:20; background:var(--paper-dark); border-bottom:1px solid var(--line); padding:10px clamp(18px,4vw,40px); display:flex; align-items:center; gap:16px; flex-wrap:wrap; font-family:var(--sans); font-size:13px; color:var(--ink-soft); } .progressbar .bar{ flex:1; min-width:120px; height:7px; background:var(--paper); border:1px solid var(--line); border-radius:99px; overflow:hidden; } .progressbar .bar span{display:block; height:100%; width:0%; background:var(--maroon); transition:width .2s ease;} .qcard{ background:var(--card); border:1px solid var(--line); border-radius:5px; padding:20px 22px; margin:0 0 18px; scroll-margin-top:80px; } .qcard__meta{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:10px;} .qcard__no{ font-family:var(--mono); font-size:11px; font-weight:600; color:var(--card); background:var(--maroon); border-radius:3px; padding:3px 8px; } .qcard__stem{font-family:var(--serif); font-size:16.5px; margin:0 0 14px; line-height:1.62;} .qcard__stem .vignette{ display:block; font-style:italic; color:var(--ink-soft); margin-bottom:8px; font-size:15.5px; } .opts{list-style:none; margin:0; padding:0;} .opt{ display:flex; gap:11px; align-items:flex-start; border:1px solid var(--line); border-radius:4px; padding:11px 13px; margin-bottom:9px; cursor:pointer; background:var(--paper); font-size:15px; transition:border-color .14s ease, background .14s ease; } .opt:hover{border-color:var(--gold); background:#F3EBD8;} .opt input{margin-top:5px; accent-color:var(--maroon); flex:none;} .opt .letter{font-family:var(--mono); font-weight:600; font-size:13px; color:var(--maroon-deep); flex:none; min-width:16px;} .opt.is-picked{border-color:var(--maroon); background:#F3EBD8;} .opt .mark{margin-left:auto; font-family:var(--mono); font-size:11px; font-weight:600; flex:none;} .graded .opt{cursor:default;} .graded .opt.is-correct{border-color:var(--ok); background:var(--ok-bg);} .graded .opt.is-wrong{border-color:var(--bad); background:var(--bad-bg);} .opt.is-correct{border-color:var(--ok); background:var(--ok-bg);} .opt.is-correct .mark{color:var(--ok);} .opt.is-wrong .mark{color:var(--bad);} .explain{ margin-top:14px; background:var(--paper); border:1px solid var(--line); border-left:3px solid var(--gold); border-radius:4px; padding:13px 15px; font-size:14.5px; } .explain h5{ font-family:var(--sans); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); margin:0 0 7px; font-weight:600; } .explain p{margin:0 0 8px;} .explain p:last-child{margin-bottom:0;} .explain .wrongwhy{font-size:13.5px; color:var(--ink-soft);} .qcard.is-right{border-left:4px solid var(--ok);} .qcard.is-wrong{border-left:4px solid var(--bad);} .qcard.is-blank{border-left:4px solid var(--ink-faint);} /* ---------- kết quả ---------- */ .result{ background:var(--card); border:1px solid var(--line); border-top:4px solid var(--maroon); border-radius:5px; padding:26px; margin-bottom:26px; } .result h2{font-family:var(--serif); font-size:24px; margin:0 0 4px;} .score{ font-family:var(--serif); font-weight:700; font-size:46px; color:var(--maroon-deep); line-height:1.1; margin:8px 0 2px; } .score small{font-size:17px; color:var(--ink-faint); font-weight:400;} .verdict{font-family:var(--sans); font-size:14px; color:var(--ink-soft); margin:0 0 20px;} .result__actions{display:flex; gap:12px; flex-wrap:wrap;} .filters{display:flex; gap:8px; flex-wrap:wrap; margin:0 0 18px;} .filters button{ font-family:var(--sans); font-size:12.5px; font-weight:600; border:1px solid var(--line); background:var(--paper); color:var(--ink-soft); border-radius:99px; padding:6px 14px; cursor:pointer; } .filters button.is-on{background:var(--maroon); color:#fff; border-color:var(--maroon);} .sticky-submit{ position:fixed; left:0; right:0; bottom:0; z-index:30; background:var(--paper-dark); border-top:1px solid var(--line); padding:12px clamp(18px,4vw,40px); display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; box-shadow:0 -10px 24px -20px rgba(42,36,32,.6); } .sticky-submit .note{font-family:var(--sans); font-size:12.5px; color:var(--ink-soft);} .hidden{display:none !important;} /* ---------- responsive ---------- */ @media (max-width:720px){ .reading{padding:28px 18px 100px;} .q-sub{margin-left:0;} .quiz-shell{padding:24px 16px 150px;} .topbar{flex-wrap:wrap; gap:8px;} } @media print{ .topbar, .sticky-submit, .filters, .progressbar, .result__actions{display:none !important;} body{background:#fff;} .qcard{break-inside:avoid;} } /* ========================================================= ĐỀ IN RA GIẤY — khoanh tròn trắc nghiệm Vùng #printArea chỉ hiện khi có class .print-de và đang ở chế độ in. Kiểu chữ tối giản, đen trắng, tiết kiệm giấy. ========================================================= */ #printArea{display:none;} @media print{ body.print-de > *{display:none !important;} body.print-de #printArea{display:block !important;} body.print-de{background:#fff; color:#000;} @page{margin:14mm 12mm;} } .de-head{border-bottom:1.5px solid #000; padding-bottom:8px; margin-bottom:12px;} .de-title{ font-family:var(--serif); font-size:17px; font-weight:700; text-align:center; letter-spacing:.02em; margin:0 0 2px; } .de-sub{font-family:var(--sans); font-size:11px; text-align:center; margin:0 0 10px;} .de-meta{ display:flex; justify-content:space-between; gap:16px; font-family:var(--sans); font-size:11px; margin-bottom:8px; } .de-meta span{flex:1; border-bottom:1px dotted #666; padding-bottom:2px;} .de-huongdan{font-family:var(--sans); font-size:10.5px; font-style:italic;} .de-nhanh{ font-family:var(--sans); font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; border-bottom:1px solid #000; margin:14px 0 8px; padding-bottom:2px; break-after:avoid; } .de-q{break-inside:avoid; margin:0 0 9px; font-size:11.5px; line-height:1.45;} .de-q__stem{margin:0 0 3px;} .de-q__no{font-weight:700;} .de-q__boicanh{display:block; font-style:italic; margin:0 0 2px;} .de-opts{list-style:none; margin:0; padding:0 0 0 14px;} .de-opts--2col{columns:2; column-gap:18px;} .de-opt{display:flex; gap:5px; align-items:flex-start; break-inside:avoid; margin-bottom:1px;} .de-cir{ display:inline-flex; align-items:center; justify-content:center; width:14px; height:14px; flex:none; margin-top:1px; border:1px solid #000; border-radius:50%; font-family:var(--sans); font-size:9px; font-weight:600; line-height:1; } .de-dapan{break-before:page;} .de-dapan h3{ font-family:var(--sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; border-bottom:1.5px solid #000; padding-bottom:4px; margin:0 0 10px; } .de-key{ display:grid; grid-template-columns:repeat(8, 1fr); gap:3px 10px; font-family:var(--mono); font-size:11px; margin-bottom:14px; } .de-key b{font-weight:700;} .de-giai{font-size:10.5px; line-height:1.45; break-inside:avoid; margin:0 0 7px;} .de-giai .n{font-family:var(--mono); font-weight:600;}