/* Các khối riêng của màn hình trong app */
.dau-trang a[href="#"] { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; width: fit-content; }
.cum { display: flex; flex-direction: column; gap: 14px; }
.lon { font-size: 1.125rem; line-height: 1.65; }
select, input[type="search"] { background: var(--mat); border: 1px solid var(--vien); border-radius: var(--bo-nut); min-height: 40px; padding: 0 10px; font-size: 1rem; }
.o-tim { display: flex; flex-direction: column; gap: 4px; max-width: 420px; }

.mo-dau { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 32px; align-items: center; padding-block: 8px 12px; }
.mo-dau-chu { display: flex; flex-direction: column; gap: 14px; }
.mau-so { box-shadow: 8px 8px 0 var(--nhat-chinh); }
.mau-so .gio { cursor: default; padding-top: 14px; }
.mau-so .dong:last-child .gio { color: var(--chu-nhan); padding-right: 12px; }
.mau-so .loi { padding-block: 14px; }

.ds-bai { border: 1px solid var(--vien); border-radius: var(--bo-the); background: var(--mat); overflow: hidden; }
.bai-hang { display: grid; grid-template-columns: 44px minmax(0, 1fr) 150px; align-items: center; gap: 12px; padding: 12px 16px 12px 0; color: inherit; text-decoration: none; border-bottom: 1px solid var(--vien); }
.bai-hang:last-child { border-bottom: 0; }
a.bai-hang:hover { background: var(--mat-2); }
.bai-so { text-align: right; color: var(--chu-phu); font-weight: 600; }
.bai-ten { display: flex; flex-direction: column; min-width: 0; }
.bai-td { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.bai-cho { color: var(--chu-phu); }
.bai-cho .chip { justify-self: end; }

.luyen { background: var(--mat); border: 1px solid var(--vien); border-radius: var(--bo-the); padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.buoc { list-style: none; padding: 0; counter-reset: b; display: flex; flex-direction: column; }
.buoc li { counter-increment: b; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 6px 10px; align-items: center; padding-block: 12px; border-top: 1px solid var(--vien); }
.buoc li::before { content: counter(b); grid-row: 1; font-weight: 700; color: var(--chu-nhan); font-variant-numeric: tabular-nums; }
.buoc li > p { grid-column: 2 / -1; }
.buoc audio { height: 40px; max-width: 260px; }
.mau { display: flex; flex-direction: column; gap: 14px; padding-top: 14px; border-top: 2px solid var(--chinh); }
.nghi-dau { font-family: var(--phong-chu); color: var(--chu-nhan); font-weight: 700; }
.cham { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.cham legend { font-weight: 600; padding: 0 0 6px; }
.cham label { display: inline-flex; gap: 6px; align-items: center; min-height: 32px; }
.cham input { width: 18px; height: 18px; accent-color: var(--chinh); }
.luyen-dieu { margin-bottom: 4px; }
.dich-hang { margin-top: 4px; font-family: var(--phong-chu); }

.the-on { max-width: 560px; }
.the-chu { font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 700; line-height: 1.25; }
.the ul { margin: 0; }
.lua-chon { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 8px; }
.lua-chon .nut { justify-content: flex-start; text-align: left; padding-block: 8px; }

.ds-cam { display: flex; flex-direction: column; }
.cam { display: flex; flex-direction: column; gap: 8px; padding-block: 22px; border-top: 1px solid var(--vien); }
.cam:first-child { border-top: 0; padding-top: 0; }
.cam-dau { display: flex; align-items: center; gap: 10px; color: var(--sai); }
.cam-dau h2 { color: var(--chu); font-size: 1.25rem; }
.doi { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 8px; }

@media (max-width: 820px) {
  .mo-dau { grid-template-columns: minmax(0, 1fr); }
  .bai-hang { grid-template-columns: 34px minmax(0, 1fr) 92px; }
  .buoc li { grid-template-columns: 26px minmax(0, 1fr); }
  .buoc li > .nut, .buoc li > .hang { grid-column: 2; }
}