/* Thẻ ghi nhớ (/cong-cu/the-ghi-nho). Tệp nạp ở mọi trang → mọi lớp có tiền tố tg-. */
.chinh:has(> .tg) { max-width: 1200px; }
.tg-an-chu { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tg-giua { justify-content: center; text-align: center; }
.tg-dau { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 12px; }
.tg-dau h1 { margin: 0; }
.tg-dau .phu { margin: 2px 0 0; }
.tg-dau__phai { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.tg-chon { min-width: 260px; }

/* Thống kê */
.tg-tk { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.tg-tk li { background: var(--the); border: 1px solid var(--vien); border-radius: var(--r-nho); padding: 8px 12px; display: flex; flex-direction: column; }
.tg-tk b { font-size: 1.5rem; color: var(--c-dam); line-height: 1.2; }
.tg-tk span { font-size: .8125rem; color: var(--phu); }
.tg-tk .tg-tk--nhan { background: var(--nhan-nhat); border-color: #f3d49b; }
.tg-tk .tg-tk--nhan b { color: var(--nhan-dam); }

/* Tab */
.tg-tab { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 12px; }
.tg-tab [role="tab"] { flex: none; min-height: 46px; padding: 8px 18px; border-radius: 999px; border: 1px solid var(--vien); background: var(--the);
  color: var(--chu); font: inherit; font-weight: 700; cursor: pointer; }
.tg-tab [role="tab"]:hover { border-color: var(--c-vien); color: var(--c-dam); }
.tg-tab [role="tab"][aria-selected="true"] { background: var(--c-dam); border-color: var(--c-dam); color: #fff; }
.tg-p { padding: clamp(16px, 2.2vw, 28px); }
.tg-dem { text-align: center; font-weight: 700; color: var(--phu); margin: 0 0 10px; }
.tg-nut-to { min-height: 54px; padding: 12px 32px; font-size: 1.15rem; }

/* Thẻ lật */
.tg-the { position: relative; display: block; width: 100%; max-width: 860px; min-height: clamp(220px, 38vh, 420px); margin: 0 auto 12px; padding: 0;
  border: 0; background: none; font: inherit; color: var(--chu); cursor: pointer; perspective: 1400px; }
.tg-mat { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 36px 24px 24px;
  border-radius: 20px; border: 2px solid var(--c-vien); background: #fff; box-shadow: var(--bong); backface-visibility: hidden; -webkit-backface-visibility: hidden;
  transition: transform .45s ease; overflow: auto; }
.tg-mat--sau { transform: rotateY(180deg); background: var(--c-dam); border-color: var(--c-dam); color: #fff; }
.tg-da-lat .tg-mat--truoc { transform: rotateY(-180deg); }
.tg-da-lat .tg-mat--sau { transform: rotateY(0); }
.tg-nhan { position: absolute; top: 12px; left: 16px; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--phu); }
.tg-mat--sau .tg-nhan { color: var(--nhan); }
.tg-nd { font-size: clamp(1.6rem, 4vw, 3.2rem); font-weight: 800; line-height: 1.25; text-align: center; word-break: break-word; }
.tg-the:focus-visible .tg-mat { outline: 3px solid var(--c); outline-offset: 3px; }

/* Ôn tập */
.tg-the--on { cursor: default; perspective: none; display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.tg-on-mat { position: relative; display: flex; align-items: center; justify-content: center; min-height: clamp(150px, 24vh, 260px); padding: 36px 20px 20px;
  border-radius: 20px; border: 2px solid var(--c-vien); background: #fff; box-shadow: var(--bong); }
.tg-on-mat--sau { background: var(--c-dam); border-color: var(--c-dam); color: #fff; }
.tg-on-mat--sau .tg-nhan { color: var(--nhan); }
.tg-on-mat[hidden] { display: none; }
.tg-danh-gia[hidden] { display: none; }
.tg-4 { display: grid; gap: 10px; grid-template-columns: repeat(4, 1fr); max-width: 860px; margin: 0 auto; }
.tg-dg { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 64px; padding: 8px; border-radius: var(--r); border: 2px solid; background: #fff;
  font: inherit; font-weight: 800; font-size: 1.1rem; cursor: pointer; }
.tg-dg small { font-weight: 600; font-size: .8125rem; }
.tg-dg--quen { color: var(--do); border-color: #efc2bd; }
.tg-dg--quen:hover { background: var(--do-nhat); }
.tg-dg--kho { color: var(--nhan-dam); border-color: #f3d49b; }
.tg-dg--kho:hover { background: var(--nhan-nhat); }
.tg-dg--duoc { color: var(--xanh-la); border-color: #bfe2c9; }
.tg-dg--duoc:hover { background: var(--xanh-la-nhat); }
.tg-dg--de { color: var(--c-dam); border-color: var(--c-vien); }
.tg-dg--de:hover { background: var(--c-nhat); }
#tg-on-xong p { margin-bottom: 10px; }

/* Soạn */
.tg-p code { background: var(--c-nhat); color: var(--c-dam); padding: 1px 6px; border-radius: 6px; }
.tg-p textarea { min-height: 260px; line-height: 1.6; }
.tg-nut-soan { margin-top: 14px; }
.tg-nhap { cursor: pointer; }
#tg-nhap:focus-visible + .tg-nhap { outline: 3px solid var(--c-vien); }
#tg-bao:empty { display: none; }
#tg-bao { margin: 12px 0 0; }

/* Chiếu lên lớp */
#tg-p-hoc:fullscreen { background: var(--c-dam); display: flex; flex-direction: column; justify-content: center; padding: 24px clamp(16px, 4vw, 60px); }
#tg-p-hoc:fullscreen .tg-dem, #tg-p-hoc:fullscreen #tg-hoc-goi-y { color: #d9e3f2; }
#tg-p-hoc:fullscreen .tg-the { max-width: none; min-height: 68vh; }
#tg-p-hoc:fullscreen .tg-mat--sau { background: #fff; color: var(--c-dam); }
#tg-p-hoc:fullscreen .tg-mat--sau .tg-nhan { color: var(--nhan-dam); }
#tg-p-hoc:fullscreen .tg-nd { font-size: clamp(2.5rem, 7vw, 7rem); }
#tg-p-hoc:fullscreen .nut--vien { color: #fff; border-color: rgba(255,255,255,.55); }
#tg-p-hoc:fullscreen .nut--vien:hover { background: rgba(255,255,255,.12); }
#tg-p-hoc:fullscreen .nut:not(.nut--vien) { background: var(--nhan); border-color: var(--nhan); color: var(--c-dam); }

@media (max-width: 640px) {
  .tg-dau__phai { width: 100%; }
  .tg-chon { flex: 1; min-width: 0; }
  .tg-4 { grid-template-columns: 1fr 1fr; }
  .tg-tk { grid-template-columns: repeat(3, 1fr); }
  .tg-tk li { padding: 6px 8px; }
  .tg-tk b { font-size: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) { .tg-mat { transition: none; } }