/* Góc thực hành (thuc-hanh.html, scripts/trang/goc-thuc-hanh.py) */
.gth { display: flex; flex-direction: column; gap: 34px; padding-top: 32px; }
.gth-nhom h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font: 800 22px/1.25 var(--f-display); }
.gth-nhom h2 small { padding: 2px 9px; border-radius: 999px; background: var(--bg2); border: 1px solid var(--edge); font: 600 13px var(--f-mono); color: var(--muted); }
.gth-nghe-ds { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.gth-nghe { display: flex; flex-direction: column; gap: 8px; padding: 18px; border-radius: 20px; background: var(--panel); border: 2px solid var(--edge); color: var(--ink); text-decoration: none; transition: border-color .15s, transform .15s; }
.gth-nghe:hover, .gth-the:hover { border-color: #8B5CF6; transform: translateY(-2px); }
.gth-nghe.is-xong { border-color: #10B981; }
.gth-bt { font-size: 34px; line-height: 1; }
.gth-nghe b, .gth-the b { font: 800 17px/1.3 var(--f-display); }
.gth-moi { font-size: 14px; line-height: 1.45; color: var(--muted); }
.gth-dem { margin-top: auto; display: flex; flex-direction: column; gap: 6px; }
.gth-thanh { display: block; height: 8px; border-radius: 999px; background: var(--bg2); overflow: hidden; }
.gth-thanh i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8B5CF6, #10B981); transition: width .4s; }
.gth-so { font: 600 13px var(--f-mono); color: var(--muted); }
.gth-luoi { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.gth-the { position: relative; height: 100%; display: flex; flex-direction: column; gap: 8px; padding: 12px 12px 16px; border-radius: 18px; background: var(--panel); border: 2px solid var(--edge); color: var(--ink); text-decoration: none; transition: border-color .15s, transform .15s; }
.gth-the.is-mo { border-color: color-mix(in srgb, #10B981 60%, var(--edge)); }
.gth-the .ct-hinh { min-height: 110px; }
.gth-video { margin-top: auto; font: 600 12px var(--f-mono); color: var(--muted); }
.gth-da { position: absolute; top: 18px; right: 18px; padding: 3px 9px; border-radius: 999px; background: #10B981; color: #fff; font: 700 12px/1.3 var(--f-body); }
.gth-ghi { margin: 0; font-size: 13px; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .gth-nghe, .gth-the, .gth-thanh i { transition: none; } .gth-nghe:hover, .gth-the:hover { transform: none; } }
@media (max-width: 760px) {
  .gth-nghe-ds { grid-template-columns: 1fr; }
  .gth-luoi { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
  .gth-the .ct-hinh { min-height: 90px; }
}