/* Khối "Học thử" trang chủ (mục 12, 03/11). File riêng, không sửa home.css. Xoá link CSS + section #hoc-thu = hoàn tác. */
.ht-hero-link{display:flex;width:fit-content;max-width:100%;margin-inline:auto;font-size:.95rem;align-items:center;gap:.45rem;min-height:44px;margin-top:.9rem;padding:.35rem .2rem;
  font-weight:600;color:var(--ink,#143352);text-decoration:none;border-bottom:2px solid transparent}
.ht-hero-link .ht-play{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;
  background:var(--red,#e31e25);color:#fff;font-size:.75rem}
.ht-hero-link:hover,.ht-hero-link:focus-visible{border-bottom-color:currentColor}

.hoc-thu{padding:clamp(2.5rem,6vw,4.5rem) 0}
.hoc-thu .ht-head{text-align:center;max-width:640px;margin:0 auto 1.6rem}
.hoc-thu .ht-head h2{margin:.3rem 0 .5rem;font-size:clamp(1.6rem,4.2vw,2.4rem);line-height:1.2;color:var(--ink,#143352)}
.hoc-thu .ht-head .sub{margin:0;color:var(--muted,#5a6a86)}
.ht-grid{list-style:none;margin:0;padding:0;display:grid;gap:clamp(.75rem,2vw,1.25rem);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr))}
@media (min-width:900px){.ht-grid{grid-template-columns:repeat(4,1fr)}}
.ht-card{display:flex;flex-direction:column;height:100%;background:#fff;border-radius:var(--r-sm,14px);overflow:hidden;
  text-decoration:none;color:var(--ink,#143352);box-shadow:var(--sh-float,0 2px 10px rgba(20,51,82,.08));
  transition:transform .2s var(--ease,ease),box-shadow .2s}
.ht-card:hover,.ht-card:focus-visible{transform:translateY(-3px);box-shadow:0 10px 26px rgba(20,51,82,.14)}
.ht-card:focus-visible{outline:3px solid var(--violet,#7c3aed);outline-offset:2px}
.ht-cover{display:block;aspect-ratio:4/3;background:#eef2fb;overflow:hidden}
.ht-cover img{display:block;width:100%;height:100%;object-fit:cover}
.ht-cover.fit img{object-fit:contain;padding:8%;background:#fff8ef}
.ht-cover.emoji{display:grid;place-items:center;font-size:clamp(2.6rem,9vw,3.6rem);
  background:linear-gradient(135deg,#8b5cf6 0%,#f0508f 100%)}
.ht-body{display:flex;flex-direction:column;gap:.25rem;padding:.75rem .85rem .9rem;flex:1}
.ht-body small{font-size:.78rem;font-weight:600;color:var(--violet,#7c3aed)}
.ht-body b{font-size:1rem;line-height:1.3}
.ht-body .ht-kind{font-size:.85rem;color:var(--muted,#5a6a86)}
.ht-go{margin-top:auto;padding-top:.45rem;font-weight:700;font-size:.9rem;color:var(--red,#e31e25)}
.hoc-thu .ht-note{text-align:center;margin:1.2rem 0 0;font-size:.9rem;color:var(--muted,#5a6a86)}
@media (prefers-reduced-motion:reduce){.ht-card{transition:none}.ht-card:hover{transform:none}}
.hoc-thu .ht-note a{display:inline-flex;align-items:center;min-height:44px;padding:0 .2rem;font-weight:700;color:var(--red,#e31e25)}