/* ===== Thư viện học tập: giao diện trung tính (kiểu Notion / GitBook) ===== */
:root, [data-md-color-scheme="default"] {
  --bg: #ffffff; --bg-soft: #f7f7f5; --bd: #e7e7e4; --tx: #37352f; --tx2: #787774;
  --ac: #2563eb; --ac-soft: #e8f0fe; --ok: #16a34a; --warn: #d97706;
  --md-default-bg-color: #ffffff; --md-default-fg-color: #37352f;
  --md-default-fg-color--light: #787774; --md-typeset-color: #37352f;
  --md-primary-fg-color: #ffffff; --md-primary-bg-color: #37352f;
  --md-accent-fg-color: #2563eb; --md-typeset-a-color: #2563eb;
  --md-code-bg-color: #f7f7f5; --md-code-fg-color: #37352f;
  --md-footer-bg-color: #f7f7f5; --md-footer-fg-color: #37352f;
  --md-footer-fg-color--light: #787774;
}
[data-md-color-scheme="slate"] {
  --bg: #191919; --bg-soft: #202020; --bd: #2f2f2f; --tx: #e6e6e4; --tx2: #9b9a97;
  --ac: #6ea8fe; --ac-soft: #1d2b45; --ok: #4ade80; --warn: #fbbf24;
  --md-default-bg-color: #191919; --md-default-fg-color: #e6e6e4;
  --md-default-fg-color--light: #9b9a97; --md-typeset-color: #e6e6e4;
  --md-primary-fg-color: #191919; --md-primary-bg-color: #e6e6e4;
  --md-accent-fg-color: #6ea8fe; --md-typeset-a-color: #6ea8fe;
  --md-code-bg-color: #202020; --md-code-fg-color: #e6e6e4;
  --md-footer-bg-color: #202020; --md-footer-fg-color: #e6e6e4;
  --md-footer-fg-color--light: #9b9a97;
}
body, .md-main { background: var(--bg); }
.md-typeset { font-size: 0.88rem; line-height: 1.75; color: var(--tx); }
@media (min-width: 600px) { .md-typeset { font-size: 0.92rem; } }

/* Thanh trên */
.md-header { background: var(--bg); color: var(--tx); box-shadow: none; border-bottom: 1px solid var(--bd); }
.md-header__title { font-weight: 700; }
.md-search__form { background: var(--bg-soft); border: 1px solid var(--bd); border-radius: 8px; }
.md-search__input::placeholder { color: var(--tx2); }
.md-search__input, .md-search__icon { color: var(--tx2); }
.md-nav__link--active, .md-nav__item .md-nav__link--active { color: var(--ac); font-weight: 600; }
.md-nav--primary .md-nav__title { font-weight: 700; }
.md-nav__item--section > .md-nav__link { font-weight: 700; color: var(--tx); text-transform: none; }

/* Tiêu đề */
.md-typeset h1 { font-weight: 800; letter-spacing: -.02em; color: var(--tx); }
.md-typeset h2 { font-weight: 700; font-size: 1.35rem; border-bottom: 1px solid var(--bd); padding-bottom: .35em; margin-top: 2.2em; color: var(--tx); }
.md-typeset h3 { font-weight: 700; font-size: 1.15rem; margin-top: 1.8em; color: var(--tx); }
.md-typeset h4 { font-weight: 700; font-size: 1.05rem; margin-top: 2em; padding: .5em .8em; background: var(--bg-soft); border-left: 3px solid var(--ac); border-radius: 0 8px 8px 0; color: var(--tx); }
.md-typeset .headerlink { display: none; }

/* Code */
.md-typeset pre > code { font-size: .72rem; line-height: 1.55; border-radius: 10px; }
.md-typeset .highlight { border: 1px solid var(--bd); border-radius: 10px; overflow: hidden; background: var(--md-code-bg-color); }
.md-typeset .highlight pre { margin: 0; }
.md-typeset :not(pre) > code { font-size: .82em; background: var(--bg-soft); border: 1px solid var(--bd); color: #c2255c; padding: .05em .4em; border-radius: 6px; }
[data-md-color-scheme="slate"] .md-typeset :not(pre) > code { color: #f783ac; }
.md-typeset img { max-width: min(100%, 420px); border-radius: 10px; border: 1px solid var(--bd); }

/* Bảng đề bài */
.bang { margin: 1em 0; }
.md-typeset .bang table { display: table; margin: 0; max-width: none; overflow: visible; width: 100%; min-width: 0; table-layout: auto; font-size: .88rem; border-collapse: separate; border-spacing: 0; border: 1px solid var(--bd); border-radius: 10px; background: var(--bg); box-shadow: none; }
.md-typeset .bang.de table { table-layout: fixed; }
.md-typeset .bang:not(.de) table { width: auto; min-width: 50%; }
.md-typeset .bang th, .md-typeset .bang td { padding: .6em .9em; line-height: 1.6; text-align: left; vertical-align: top; border-bottom: 1px solid var(--bd); border-right: 1px solid var(--bd); color: var(--tx); }
.md-typeset .bang th { background: var(--bg-soft); font-weight: 700; white-space: nowrap; }
.bang.de th:first-child { width: 6.5rem; }
.md-typeset .bang tr:last-child td, .md-typeset .bang tr:last-child th { border-bottom: 0; }
.md-typeset .bang table code { font-size: .8em; }

/* Đầu bài: thuộc tính kiểu Notion */
.tieu-bai h1 { margin: .2em 0 .6em; }
.tuan-so { display: inline-block; background: var(--ac-soft); color: var(--ac); font-weight: 700; padding: .1em .7em; border-radius: 6px; font-size: .75rem; }
.thuoc-tinh { display: grid; grid-template-columns: 7.5rem 1fr; gap: .35rem 1rem; margin: 0 0 1.5rem; padding: .8rem 0; border-top: 1px solid var(--bd); border-bottom: 1px solid var(--bd); font-size: .85rem; }
.thuoc-tinh dt { color: var(--tx2); }
.thuoc-tinh dd { margin: 0; }
.thuoc-tinh .muted { color: var(--tx2); }
.sao { color: #f59f00; letter-spacing: 1px; }
.nhan-chu { display: inline-block; background: var(--bg-soft); border: 1px solid var(--bd); color: var(--tx2); padding: 0 .6em; border-radius: 99px; font-size: .72rem; margin-right: .35em; }
#trang-thai { font: inherit; padding: .15em .5em; border: 1px solid var(--bd); border-radius: 6px; background: var(--bg); color: var(--tx); }

/* Trang chủ */
.hero { padding: 2.2rem 0 1.4rem; }
.hero-nho { margin: 0; font-size: .72rem; letter-spacing: .12em; color: var(--ac); font-weight: 700; }
.md-typeset .hero h1 { font-size: 2.2rem; margin: .2em 0 .3em; }
.hero-mo-ta { color: var(--tx2); max-width: 36rem; margin: 0 0 1.2rem; }
#hero-search { width: 100%; max-width: 34rem; padding: .8rem 1rem; font: inherit; border: 1px solid var(--bd); border-radius: 12px; background: var(--bg-soft); color: var(--tx); }
#hero-search:focus { outline: 2px solid var(--ac); background: var(--bg); }
.tieu-muc { font-size: 1.1rem !important; border: 0 !important; margin-top: 1.8rem !important; }
.tiep-tuc { display: flex; flex-direction: column; margin: .5rem 0 0; padding: .9rem 1.1rem; max-width: 34rem; background: var(--ac-soft); border-radius: 12px; color: var(--tx) !important; }
.tiep-tuc small { color: var(--tx2); }
.tiep-tuc b { color: var(--ac); }
.luoi-the { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; margin: 1rem 0; }
.the-mon { display: flex; flex-direction: column; background: var(--bg); border: 1px solid var(--bd); border-radius: 14px; overflow: hidden; color: var(--tx) !important; transition: box-shadow .15s, transform .15s; }
.the-mon:hover { box-shadow: 0 6px 20px rgba(0,0,0,.08); transform: translateY(-2px); }
.the-mon .bia { height: 5.5rem; display: grid; place-items: center; background: linear-gradient(135deg, color-mix(in srgb, var(--mau) 18%, var(--bg)), color-mix(in srgb, var(--mau) 40%, var(--bg))); }
.the-mon .bieu-tuong { font-size: 2.3rem; line-height: 1; }
.the-mon .than { display: flex; flex-direction: column; gap: .3rem; padding: .9rem 1rem 1.1rem; }
.the-mon .ten-mon { font-weight: 700; font-size: 1rem; }
.the-mon .tuan { font-size: .75rem; color: var(--tx2); }
.the-mon .mo-ta { font-size: .8rem; color: var(--tx2); line-height: 1.5; }
.the-mon.mo { opacity: .7; }
.hang-chip { display: flex; flex-wrap: wrap; gap: .25rem; }
.nhan { align-self: flex-start; background: var(--ac-soft); color: var(--ac); padding: .05em .7em; border-radius: 6px; font-size: .72rem; font-weight: 700; }
.nhan.sap { background: var(--bg-soft); color: var(--tx2); }
.tien-do { display: block; height: 6px; background: var(--bd); border-radius: 99px; overflow: hidden; margin-top: .5rem; }
.tien-do i { display: block; height: 100%; width: 0; background: var(--ok); border-radius: 99px; transition: width .4s; }
.tien-do-chu { font-size: .72rem; color: var(--tx2); }

/* Danh sách bài */
.loc { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1rem 0 .5rem; align-items: center; }
.loc button { font: inherit; font-size: .8rem; padding: .25em .9em; border: 1px solid var(--bd); background: var(--bg); color: var(--tx); border-radius: 99px; cursor: pointer; }
.loc button.on { background: var(--ac); border-color: var(--ac); color: #fff; }
.ds-bai { display: flex; flex-direction: column; margin: .5rem 0 1rem; border: 1px solid var(--bd); border-radius: 12px; overflow: hidden; }
.dong-bai { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem .8rem; padding: .8rem 1rem; background: var(--bg); border-bottom: 1px solid var(--bd); color: var(--tx) !important; }
.dong-bai:last-child { border-bottom: 0; }
.dong-bai:hover { background: var(--bg-soft); }
.dong-bai[hidden] { display: none; }
.dong-bai .tick { width: 1.4rem; height: 1.4rem; border-radius: 50%; border: 2px solid var(--bd); color: transparent; display: grid; place-items: center; font-size: .75rem; font-weight: 800; flex: none; }
.dong-bai.xong .tick { background: var(--ok); border-color: var(--ok); color: #fff; }
.dong-bai.dang .tick { border-color: var(--warn); background: linear-gradient(90deg, var(--warn) 50%, transparent 50%); }
.dong-bai .tb { font-weight: 600; flex: 1 1 12rem; }
.dong-bai .ct { font-size: .75rem; color: var(--tx2); }
.sap-co { border: 1px dashed var(--bd); border-radius: 12px; padding: 1rem 1.4rem; background: var(--bg-soft); }

/* Cuối bài */
.khung-cuoi { margin-top: 2.5rem; padding: 1.1rem; background: var(--bg-soft); border: 1px solid var(--bd); border-radius: 12px; }
.ghi-chu { display: flex; flex-direction: column; gap: .4rem; }
.ghi-chu label { font-weight: 700; }
.ghi-chu small { font-weight: 400; color: var(--tx2); }
.ghi-chu textarea { width: 100%; font: inherit; padding: .8rem; border-radius: 10px; border: 1px solid var(--bd); background: var(--bg); color: var(--tx); resize: vertical; }
.luu-chu { font-size: .72rem; color: var(--ok); min-height: 1em; }
.nut-chinh { margin-top: .8rem; font: inherit; font-weight: 600; padding: .55em 1.2em; border: 0; border-radius: 8px; background: var(--ac); color: #fff; cursor: pointer; }
.nut-chinh.xong { background: var(--ok); }
.luoi-lq { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .8rem; }
.bai-lq { display: flex; flex-direction: column; gap: .4rem; padding: .8rem 1rem; border: 1px solid var(--bd); border-radius: 10px; color: var(--tx) !important; }
.bai-lq:hover { background: var(--bg-soft); }
.bai-lq .tb { font-weight: 600; }

/* Nút Trước/Sau dạng thẻ */
.md-footer { background: var(--bg); }
.md-footer__inner { padding: 1rem .8rem; gap: 1rem; display: flex; }
.md-footer__link { border: 1px solid var(--bd); border-radius: 10px; padding: .9rem 1rem; margin: 0; color: var(--tx); }
.md-footer__link:hover { background: var(--bg-soft); opacity: 1; }
.md-footer__title { font-size: .95rem; font-weight: 600; }
.md-footer__direction { color: var(--tx2); }
.md-footer-meta { background: var(--bg-soft); }
.md-footer-meta, .md-footer-meta a { color: var(--tx2); }
.md-typeset .admonition, .md-typeset details { border-radius: 10px; font-size: .88rem; }
@media print { .khung-cuoi, .md-footer, .md-header, .md-sidebar { display: none; } }
.md-copyright, .md-copyright a, .md-copyright__highlight, .md-footer-meta__inner { color: var(--tx2) !important; }
.tiep-tuc[hidden] { display: none; }

/* ===== Cân đối cỡ chữ ===== */
.md-typeset { font-size: 0.84rem; }
@media (min-width: 600px) { .md-typeset { font-size: 0.88rem; } }
.md-typeset .tieu-bai h1, .md-typeset h1 { font-size: 1.7rem; text-transform: uppercase; letter-spacing: .01em; line-height: 1.3; }
.md-typeset .hero h1 { text-transform: none; font-size: 2rem; letter-spacing: -.02em; }
.md-typeset h2 { font-size: 1.2rem; text-transform: none; }
.md-typeset h3 { font-size: 1.05rem; }
.md-typeset h4 { font-size: 1rem; }
.md-typeset .bang table { font-size: .84rem; }
.thuoc-tinh { font-size: .82rem; }
/* Nổi bật tên thư viện và "Mục lục" */
.md-header__title { font-weight: 800; font-size: 1.05rem; color: var(--ac); }
.md-header__title .md-ellipsis { color: var(--ac); }
.md-nav--secondary > .md-nav__title, .md-sidebar--secondary .md-nav__title { font-weight: 800; font-size: .85rem; color: var(--ac); text-transform: uppercase; letter-spacing: .06em; background: none; box-shadow: none; }
.md-nav--primary > .md-nav__title { font-weight: 800; font-size: .95rem; color: var(--ac); background: none; box-shadow: none; }

/* ===== Bảng đề bài gọn hơn ===== */
.md-typeset h4 { font-size: .92rem; padding: .4em .8em; }
.md-typeset .bang th { font-weight: 400; }
.md-typeset .bang th, .md-typeset .bang td { padding: .3em .8em; line-height: 1.5; }
.bang td.co-nut { position: relative; padding-right: 4.8rem; }
.sao-chep { position: absolute; top: .3rem; right: .4rem; font: inherit; font-size: .7rem; padding: .1em .6em; border: 1px solid var(--bd); border-radius: 6px; background: var(--bg); color: var(--tx2); cursor: pointer; }
.sao-chep:hover { color: var(--ac); border-color: var(--ac); }
.sao-chep.da { color: var(--ok); border-color: var(--ok); }
.md-typeset .bang table:not([class]) th { font-weight: 400; padding: .3em .8em; line-height: 1.5; }
.md-typeset .bang table:not([class]) td { padding: .3em .8em; line-height: 1.5; }
.md-typeset .bang table:not([class]) td.co-nut { padding-right: 4.8rem; }

/* Nút sao chép dạng biểu tượng (cùng kiểu nút copy của khối code) */
.bang td.co-nut { position: relative; }
.md-typeset .bang table:not([class]) td.co-nut { padding-right: 2.6rem; }
.sao-chep { position: absolute; top: .3rem; right: .4rem; width: 1.7rem; height: 1.7rem; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--tx2); cursor: pointer; font-size: 0; }
.sao-chep::after { content: ""; display: block; width: 1.1rem; height: 1.1rem; margin: auto; background-color: currentcolor; -webkit-mask: var(--md-clipboard-icon) no-repeat center / contain; mask: var(--md-clipboard-icon) no-repeat center / contain; }
.sao-chep:hover { color: var(--ac); background: var(--ac-soft); }
.sao-chep.da { color: var(--ok); }
.sao-chep.da::after { -webkit-mask-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21 7 9 19l-5.5-5.5 1.41-1.41L9 16.17 19.59 5.59z"/></svg>'); mask-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21 7 9 19l-5.5-5.5 1.41-1.41L9 16.17 19.59 5.59z"/></svg>'); }

/* Tiêu đề trang môn / giai đoạn: nhỏ hơn tiêu đề bài */
.md-content__inner > h1 { font-size: 1.25rem; text-transform: none; letter-spacing: 0; }

/* ===== Cỡ tiêu đề: trang bài = trang giai đoạn; nút copy Input mờ, sáng khi rê chuột ===== */
.md-typeset h1, .md-content__inner > h1, .md-typeset .tieu-bai h1 { font-size: 1.25rem; text-transform: uppercase; letter-spacing: .02em; line-height: 1.35; }
.md-typeset .hero h1 { font-size: 2rem; text-transform: none; letter-spacing: -.02em; }
.sao-chep { width: 1.4rem; height: 1.4rem; top: .35rem; right: .45rem; opacity: .3; transition: opacity .15s, color .15s; }
.sao-chep::after { width: .9rem; height: .9rem; }
.bang td.co-nut:hover .sao-chep, .sao-chep:hover, .sao-chep:focus-visible { opacity: 1; }
.sao-chep:hover { background: transparent; color: var(--ac); }
.sao-chep.da { opacity: 1; }
.md-typeset .bang table:not([class]) td.co-nut { padding-right: 2.2rem; }

/* Hai bảng thông tin ở đầu các đề: rộng hết trang */
.md-typeset .bang.full table:not([class]) { width: 100%; table-layout: fixed; }
.md-typeset .bang.full table:not([class]) th, .md-typeset .bang.full table:not([class]) td { white-space: normal; }
.md-typeset .bang th b { font-weight: 400; }
.md-typeset .bang.full table:not([class]) th, .md-typeset .bang.full table:not([class]) td { padding: .35em .9em; }
/* Cột nhãn của bảng đề bài: cho phép xuống dòng, không tràn sang cột bên cạnh */
.md-typeset .bang.de table:not([class]) th { white-space: normal; overflow-wrap: anywhere; }
.bang.de th:first-child { width: 8rem; }