/* THẺ TỪ VỰNG + ÔN NGẮT QUÃNG (6/10/2026) — tuvung/. Màu hổ phách #b45309 (chữ trắng trên nền đạt độ tương phản ~5:1). Ưu tiên điện thoại. */
.tv-headbox { background: linear-gradient(135deg, #b45309, #f59e0b); }
.tv-today { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.tv-big { font-size: 2.3rem; font-weight: 800; color: #b45309; line-height: 1; }
.tv-big-t { font-weight: 700; color: #4a5568; }
.tv-none { font-weight: 700; color: #2f855a; }
.tv-stats { display: flex; flex-wrap: wrap; gap: .2rem .9rem; font-size: .82rem; color: #4a5568; margin-top: .35rem; }
.tv-stats b { color: #2d3748; }
.tv-prog { height: 7px; border-radius: 4px; background: #edf2f7; overflow: hidden; margin: .45rem 0 .2rem; }
.tv-prog div { height: 100%; border-radius: 4px; background: linear-gradient(90deg, #b45309, #f59e0b); transition: width .25s; }
/* Nút chính — to, cả bề ngang (điện thoại) */
.tv-go { display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; min-height: 56px; margin-top: .8rem; border: 0;
         border-radius: .9rem; font-weight: 800; font-size: 1.08rem; color: #fff; background: #b45309; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.tv-go:hover, .tv-go:focus { color: #fff; background: #92400e; }
.tv-go:active { transform: scale(.985); }
.tv-go.alt { background: #fff; color: #b45309; border: 2px solid #b45309; }
.tv-go.alt:hover, .tv-go.alt:focus { background: #fffbeb; color: #92400e; }
/* 3 ô: Xem thẻ · Nghe chọn nghĩa · Nhìn chữ chọn cách đọc */
.tv-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin-top: .8rem; }
.tv-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; min-height: 82px; padding: .5rem .3rem;
           border-radius: .8rem; border: 1.5px solid rgba(180, 83, 9, .35); background: rgba(180, 83, 9, .06); color: #2d3748; text-decoration: none; text-align: center;
           -webkit-tap-highlight-color: transparent; transition: background .15s, color .15s; }
.tv-tile i { font-size: 1.5rem; color: #b45309; line-height: 1; }
.tv-tile span { font-size: .8rem; font-weight: 700; line-height: 1.15; }
.tv-tile small { font-size: .72rem; color: #4a5568; }
.tv-tile.is-zero { opacity: .55; border-style: dashed; }
a.tv-tile:active { transform: scale(.96); }
@media (hover: hover) {
  a.tv-tile:hover { background: #b45309; border-color: #b45309; color: #fff; }
  a.tv-tile:hover i, a.tv-tile:hover small { color: #fff; }
}
.tv-flow { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .35rem; font-size: .76rem; color: #4a5568; }
.tv-flow span { background: #edf2f7; border-radius: 1rem; padding: .1rem .55rem; font-weight: 700; white-space: nowrap; }
.tv-flow span.new { background: #fef3c7; color: #92400e; }
.tv-flow span.ok { background: #c6f6d5; color: #22543d; }
/* Danh sách từ */
.tv-tabs { display: flex; gap: .3rem; margin: .9rem 0 .6rem; flex-wrap: wrap; }
.tv-tabs a { flex: 1 1 0; min-width: 0; text-align: center; padding: .5rem .2rem; border-radius: .7rem; border: 1px solid #e2e8f0; background: #fff; color: #4a5568;
             font-weight: 700; font-size: .8rem; text-decoration: none; white-space: nowrap; }
.tv-tabs a.on { background: #b45309; border-color: #b45309; color: #fff; }
.tv-part { font-size: .74rem; font-weight: 700; color: #92400e; text-transform: uppercase; letter-spacing: .02em; margin: .8rem .2rem .35rem; }
.tv-item { display: flex; gap: .6rem; align-items: center; padding: .55rem .7rem; margin-bottom: .45rem; border-radius: .8rem; background: #fff;
           border: 1px solid #e2e8f0; color: #2d3748; text-decoration: none; }
a.tv-item:hover { border-color: #b45309; color: #2d3748; background: #fffbeb; }
.tv-ic { flex: 0 0 38px; width: 38px; height: 38px; border-radius: .6rem; display: flex; align-items: center; justify-content: center; background: #fef3c7; color: #b45309; font-size: 1.15rem; }
.tv-main { flex: 1; min-width: 0; color: inherit; text-decoration: none; }
.tv-main:hover { color: inherit; }
.tv-w { font-size: 1.15rem; font-weight: 700; line-height: 1.55; word-break: break-word; }
.tv-w ruby rt, .tv-vd-jp ruby rt, .tv-front-w ruby rt, .tv-hintbox ruby rt { font-size: .5em; color: #718096; font-weight: 500; }
.tv-vi { font-size: .82rem; color: #4a5568; }
.tv-hv { font-size: .68rem; font-weight: 700; color: #92400e; background: #fef3c7; border-radius: .3rem; padding: 0 .3rem; white-space: nowrap; }
.tv-when { flex: 0 0 auto; text-align: right; font-size: .76rem; font-weight: 700; color: #4a5568; line-height: 1.35; max-width: 34%; }
.tv-when.due { color: #c53030; }
.tv-when.thuoc { color: #2f855a; }
.tv-when.moi { color: #a0aec0; font-weight: 600; }
.tv-sub { display: block; font-weight: 500; color: #718096; font-size: .7rem; }
.tv-play { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; border: 0; background: #fef3c7; color: #b45309; font-size: 1.2rem;
           display: inline-flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; }
.tv-play:hover { background: #fde68a; }
.tv-play:active { transform: scale(.92); }
/* Thẻ (xem thẻ / thẻ mới / kết quả câu) */
.tv-the-top, .tv-qtop { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; font-size: .85rem; color: #4a5568; }
.tv-the-part { font-size: .74rem; font-weight: 700; color: #92400e; background: #fef3c7; border-radius: 1rem; padding: .05rem .55rem; }
.tv-st { font-size: .74rem; font-weight: 700; border-radius: 1rem; padding: .05rem .55rem; background: #edf2f7; }
.tv-st.due { background: #fed7d7; color: #9b2c2c; } .tv-st.thuoc { background: #c6f6d5; color: #22543d; } .tv-st.sap { background: #fefcbf; color: #744210; }
.tv-card { position: relative; background: #fff; border: 2px solid #f6ad55; border-radius: 1.1rem; padding: 1.2rem 1rem; margin-top: .6rem; min-height: 230px;
           box-shadow: 0 4px 14px rgba(180, 83, 9, .1); cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none; }
.tv-card.is-static { cursor: default; }
.tv-card:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }
.tv-front { display: flex; align-items: center; justify-content: center; gap: .7rem; flex-wrap: wrap; text-align: center; }
.tv-front-w { font-size: 2.3rem; font-weight: 700; line-height: 1.5; color: #1a202c; word-break: break-word; }
.tv-front-w.sm { font-size: 1.5rem; }
.tv-hint { text-align: center; color: #a0aec0; font-size: .82rem; margin-top: 2.2rem; }
.tv-back { border-top: 1px dashed #fbd38d; margin-top: .8rem; padding-top: .7rem; }
.tv-b-r { text-align: center; font-size: 1.25rem; color: #92400e; font-weight: 600; }
.tv-b-vi { text-align: center; font-size: 1.1rem; font-weight: 700; color: #1a202c; margin-top: .15rem; }
.tv-loai { font-size: .7rem; font-weight: 600; color: #718096; background: #edf2f7; border-radius: .3rem; padding: 0 .35rem; vertical-align: 2px; }
.tv-b-hv { text-align: center; font-size: .78rem; color: #92400e; margin-top: .15rem; }
.tv-b-note { text-align: center; font-size: .8rem; color: #4a5568; margin-top: .2rem; }
.tv-vd { background: #fffbeb; border-radius: .8rem; padding: .6rem .7rem; margin-top: .7rem; text-align: left; }
.tv-vd-jp { font-size: 1.05rem; line-height: 1.85; }
.tv-vd-jp b { color: #b45309; }
.tv-vd-vi { font-size: .8rem; color: #4a5568; }
.tv-nav { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: .45rem; margin-top: .7rem; }
.tv-btn { min-height: 50px; border-radius: .8rem; border: 1.5px solid #e2e8f0; background: #fff; color: #2d3748; font-weight: 700; font-size: .92rem; }
.tv-btn.main { background: #b45309; border-color: #b45309; color: #fff; }
.tv-btn:disabled { opacity: .4; }
.tv-btn:active:not(:disabled) { transform: scale(.97); }
/* 1 câu hỏi */
.tv-mode { font-size: .78rem; font-weight: 700; color: #92400e; background: #fef3c7; border-radius: 1rem; padding: .1rem .6rem; }
.tv-q { text-align: center; margin-top: .6rem; }
.tv-bigplay { width: 92px; height: 92px; border-radius: 50%; border: 0; background: linear-gradient(135deg, #b45309, #f59e0b); color: #fff; font-size: 2.4rem;
              box-shadow: 0 6px 16px rgba(180, 83, 9, .3); -webkit-tap-highlight-color: transparent; }
.tv-bigplay:active { transform: scale(.94); }
.tv-hoi { font-size: 2.6rem; font-weight: 700; line-height: 1.3; color: #1a202c; padding: .3rem 0; }
.tv-ask { font-size: .9rem; color: #4a5568; margin: .5rem 0 .2rem; }
.tv-link { border: 0; background: none; color: #718096; font-size: .8rem; text-decoration: underline; padding: .25rem .4rem; }
.tv-hintbox { font-size: 1.3rem; font-weight: 700; min-height: 0; }
.tv-hintbox:empty { display: none; }
.tv-opts { display: grid; grid-template-columns: 1fr; gap: .5rem; margin-top: .7rem; text-align: left; }
.tv-opts.ja { grid-template-columns: 1fr 1fr; }
@media (min-width: 576px) { .tv-opts { grid-template-columns: 1fr 1fr; } }
.tv-opt { display: flex; align-items: center; gap: .55rem; min-height: 58px; padding: .5rem .7rem; border-radius: .8rem; border: 2px solid #e2e8f0; background: #fff;
          color: #1a202c; font-size: 1rem; font-weight: 600; line-height: 1.3; text-align: left; -webkit-tap-highlight-color: transparent; }
.tv-opts.ja .tv-opt { font-size: 1.2rem; justify-content: center; }
.tv-opt .lt { flex: 0 0 26px; height: 26px; border-radius: 50%; background: #edf2f7; color: #4a5568; font-size: .78rem; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.tv-opts.ja .tv-opt .lt { display: none; }
@media (hover: hover) { .tv-opt:hover:not(:disabled) { border-color: #f6ad55; background: #fffbeb; } }
.tv-opt:active:not(:disabled) { transform: scale(.98); }
.tv-opt:disabled { cursor: default; }
.tv-opt.picked { border-color: #a0aec0; }
.tv-opt.ok { border-color: #38a169; background: #f0fff4; }
.tv-opt.ok .lt { background: #38a169; color: #fff; }
.tv-opt.bad { border-color: #e53e3e; background: #fff5f5; }
.tv-opt.bad .lt { background: #e53e3e; color: #fff; }
.tv-res { border-radius: .8rem; padding: .55rem .8rem; margin-top: .8rem; font-size: .9rem; text-align: left; }
.tv-res.ok { background: #f0fff4; color: #22543d; border: 1px solid #c6f6d5; }
.tv-res.bad { background: #fff5f5; color: #9b2c2c; border: 1px solid #fed7d7; }
.tv-mini { border: 1px solid #fbd38d; border-radius: .9rem; padding: .6rem .7rem; margin-top: .6rem; text-align: left; }
.tv-mini .tv-b-r, .tv-mini .tv-b-vi, .tv-mini .tv-b-hv, .tv-mini .tv-b-note { text-align: left; }
.tv-start-ic { width: 64px; height: 64px; border-radius: 50%; margin: 0 auto .6rem; display: flex; align-items: center; justify-content: center;
               background: #fef3c7; color: #b45309; font-size: 1.9rem; }
.tv-start-ic.ok { background: #fefcbf; color: #d69e2e; }
@media (max-width: 575.98px) {
  .tv-tiles { gap: .4rem; }
  .tv-tile { min-height: 86px; }
  .tv-tile span { font-size: .78rem; }
  .tv-front-w { font-size: 2rem; }
  .tv-hoi { font-size: 2.3rem; }
  .tv-when { max-width: 30%; font-size: .72rem; }
  .tv-tabs a { font-size: .74rem; padding: .45rem .1rem; }
}