/* 04/11/2026: Trang chủ, cột phải khu giữa: "Tôi cần tư vấn" + "Tìm kiếm nhanh" (song ngữ) */
.tvq-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
/* Ô tư vấn thu gọn thành một dải nhỏ */
.tvq-card { appearance: none; display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 10px 14px; border-radius: 16px; border: 0; background: linear-gradient(135deg, #1D4ED8, #2563EB 60%, #3B82F6); color: #fff; font: inherit; cursor: pointer; box-shadow: 0 8px 20px rgba(29, 78, 216, .22); transition: transform .15s, box-shadow .15s; }
.tvq-card:hover { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(29, 78, 216, .3); }
.tvq-card:focus-visible { outline: 3px solid #FDE68A; outline-offset: 3px; }
.tvq-ic { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: rgba(255, 255, 255, .16); font-size: 20px; }
.tvq-txt { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.tvq-txt b { font-size: 17px; line-height: 1.25; color: #fff; }
.tvq-txt b.tvq-zh { font-size: 15.5px; color: #FDE68A; }
.tvq-go { flex: none; padding: 6px 12px; border-radius: 999px; background: #fff; color: #1D4ED8; font-size: 13px; font-weight: 800; white-space: nowrap; }

/* Điện thoại đang chạy App HSK 3.0 */
.tvq-app { display: flex; align-items: center; gap: 22px; padding: 20px 22px; border-radius: 20px; background: linear-gradient(160deg, #EEF4FF, #F8FBFF 55%, #FFF8E6); border: 1.5px solid #DCE7F5; box-shadow: 0 6px 20px rgba(15, 37, 71, .05); }
.tvq-phone { position: relative; flex: none; display: block; width: 190px; aspect-ratio: 9 / 18.5; padding: 9px; border-radius: 34px; background: #0F172A; box-shadow: 0 0 0 2px #334155 inset, 0 18px 36px rgba(15, 23, 42, .28); transform: rotate(-3deg); transition: transform .25s; }
.tvq-phone:hover { transform: rotate(0deg) translateY(-3px); }
.tvq-notch { position: absolute; z-index: 2; top: 15px; left: 50%; width: 62px; height: 16px; margin-left: -31px; border-radius: 999px; background: #0F172A; }
.tvq-screen { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; border-radius: 26px; background: #fff; }
.tvq-screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; transition: opacity .7s ease; }
.tvq-screen img.on { opacity: 1; }
.tvq-app-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.tvq-app-tag { align-self: flex-start; padding: 4px 10px; border-radius: 999px; background: #DBEAFE; color: #1D4ED8; font-size: 12.5px; font-weight: 800; }
.tvq-app-tag span { color: #B45309; }
.tvq-app-txt > b { margin-top: 6px; font-size: 21px; line-height: 1.25; color: #0F2547; }
.tvq-app-txt > b.tvq-zh { margin-top: 0; font-size: 17px; color: #0C58C2; }
.tvq-app-txt ul { margin: 8px 0 4px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.tvq-app-txt li { position: relative; padding-left: 20px; font-size: 14px; line-height: 1.35; color: #334155; }
.tvq-app-txt li::before { content: "✓"; position: absolute; left: 0; top: 0; color: #16A34A; font-weight: 900; }
.tvq-app-txt li span { display: block; font-size: 12.5px; color: #1D4ED8; }
.tvq-app-go { align-self: flex-start; margin-top: 8px; padding: 9px 14px; border-radius: 999px; background: #F59E0B; color: #1F1300; font-size: 14px; font-weight: 800; text-decoration: none; box-shadow: 0 6px 14px rgba(245, 158, 11, .3); }
.tvq-app-go:hover { background: #FBBF24; }

.tvq-search { position: relative; background: #fff; border: 1.5px solid #DCE7F5; border-radius: 20px; padding: 18px 20px 16px; box-shadow: 0 6px 20px rgba(15, 37, 71, .05); }
.tvq-lb { display: block; margin: 0 0 10px; font-size: 18px; font-weight: 800; color: #0F2547; }
.tvq-lb span { margin-left: 6px; font-size: 16px; color: #1D4ED8; }
.tvq-form { position: relative; display: flex; gap: 8px; }
.tvq-form input { flex: 1; min-width: 0; height: 46px; padding: 0 14px; border: 1.5px solid #BFD0EE; border-radius: 12px; font: inherit; font-size: 15.5px; color: #0F2547; background: #F8FAFF; }
.tvq-form input:focus { outline: none; border-color: #2563EB; background: #fff; box-shadow: 0 0 0 3px rgba(37, 99, 235, .15); }
.tvq-form button { flex: none; height: 46px; padding: 0 16px; border: 0; border-radius: 12px; background: #1D4ED8; color: #fff; font: inherit; font-size: 15px; font-weight: 800; cursor: pointer; }
.tvq-form button:hover { background: #1E40AF; }
.tvq-out { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30; margin: 0; padding: 6px; list-style: none; background: #fff; border: 1.5px solid #BFD0EE; border-radius: 14px; box-shadow: 0 16px 36px rgba(15, 37, 71, .18); max-height: 360px; overflow-y: auto; }
.tvq-out[hidden] { display: none; }
.tvq-out a { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; border-radius: 10px; text-decoration: none; }
.tvq-out a b { font-size: 15px; color: #0F2547; }
.tvq-out a span { font-size: 13px; color: #1D4ED8; }
.tvq-out li.on a, .tvq-out a:hover { background: #EEF3FF; }
.tvq-out li.tvq-vocab { border-top: 1px dashed #DCE7F5; margin-top: 4px; padding-top: 4px; }
.tvq-hot { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.tvq-hot a { padding: 6px 11px; border-radius: 999px; background: #EEF3FF; border: 1px solid #D6E2FA; color: #1E3A8A; font-size: 13.5px; font-weight: 700; text-decoration: none; }
.tvq-hot a:hover { background: #DCE7FF; }

/* Cửa sổ tư vấn */
.tvq-modal-wrap .box { max-width: 520px; width: 100%; }
.tvq-modal h3 { margin: 0 34px 6px 0; font-size: 21px; color: #0F2547; }
.tvq-modal h3 span { font-size: 17px; color: #1D4ED8; margin-left: 4px; }
.tvq-m-lead { margin: 0 0 12px; font-size: 14.5px; line-height: 1.5; color: #475569; }
.tvq-m-main { appearance: none; display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; border: 0; border-radius: 14px; background: linear-gradient(135deg, #1D4ED8, #2563EB); color: #fff; font: inherit; font-size: 28px; text-align: left; cursor: pointer; }
.tvq-m-main span { display: flex; flex-direction: column; gap: 1px; }
.tvq-m-main b { font-size: 16.5px; } .tvq-m-main b[lang] { font-size: 15px; color: #FDE68A; }
.tvq-m-main small { font-size: 12.5px; color: rgba(255, 255, 255, .85); }
.tvq-m-lb { margin: 14px 0 7px; font-size: 13px; font-weight: 800; color: #64748B; text-transform: uppercase; letter-spacing: .02em; }
.tvq-m-faq { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.tvq-m-faq button { appearance: none; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 9px 11px; border: 1.5px solid #D6E2FA; border-radius: 12px; background: #F8FAFF; color: #0F2547; font: inherit; font-size: 14px; font-weight: 700; text-align: left; cursor: pointer; }
.tvq-m-faq button span { font-size: 12.5px; font-weight: 600; color: #1D4ED8; }
.tvq-m-faq button:hover { background: #EEF3FF; border-color: #93B4F0; }
.tvq-m-zalo { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.tvq-m-zalo a { display: flex; flex-direction: column; gap: 1px; padding: 10px 12px; border-radius: 12px; background: #ECFDF5; border: 1.5px solid #A7F3D0; text-decoration: none; }
.tvq-m-zalo a b { font-size: 14px; color: #062B5F; } .tvq-m-zalo a span { font-size: 12.5px; color: #043478; } .tvq-m-zalo a small { font-size: 12.5px; color: #0F2547; font-weight: 700; margin-top: 2px; }
.tvq-m-zh { display: block; margin-top: 12px; font-size: 13.5px; font-weight: 700; color: #1C5DB9; text-decoration: none; }

@media (min-width: 1061px) { .tvq-app { flex: 1; } }
@media (max-width: 640px) {
  .tvq-app { gap: 14px; padding: 14px; }
  .tvq-phone { width: 132px; padding: 6px; border-radius: 24px; }
  .tvq-notch { top: 10px; width: 44px; height: 11px; margin-left: -22px; }
  .tvq-screen { border-radius: 19px; }
  .tvq-app-txt > b { font-size: 17px; } .tvq-app-txt > b.tvq-zh { font-size: 15px; }
  .tvq-app-txt li { font-size: 13px; padding-left: 16px; } .tvq-app-txt li span { font-size: 12px; }
  .tvq-app-go { padding: 8px 11px; font-size: 13px; }
  .tvq-card { padding: 9px 12px; gap: 10px; }
  .tvq-txt b { font-size: 16px; } .tvq-txt b.tvq-zh { font-size: 14.5px; }
  .tvq-search { padding: 14px 14px 12px; }
  .tvq-lb { font-size: 16.5px; } .tvq-lb span { font-size: 15px; }
  .tvq-form button { padding: 0 12px; font-size: 14px; }
  .tvq-m-zalo { grid-template-columns: 1fr; }
  .tvq-m-faq button { padding: 8px 9px; font-size: 13.5px; }
}
@media (max-width: 370px) { .tvq-phone { width: 116px; } .tvq-app-txt li span { display: none; } }
@media (prefers-reduced-motion: reduce) { .tvq-screen img { transition: none; } .tvq-phone { transform: none; } }

/* ===== 04/11/2026: RÀ SOÁT MÀU - tối đa 3 màu/trang (trắng-xám, xanh dương #0B6CF3, đỏ nhấn) ===== */
html body .tvq-card:focus-visible { outline-color: #9CC4FD !important; }
html body .tvq-txt b.tvq-zh, html body .tvq-m-main b[lang] { color: #E7F0FE !important; }
html body .tvq-app { background: linear-gradient(160deg, #EEF4FF, #F8FBFF 55%, #F7F9FC) !important; }
html body .tvq-app-tag span { color: #105DC8 !important; }
html body .tvq-app-txt > b.tvq-zh { color: #105DC8 !important; }
html body .tvq-app-txt li::before { color: #0B6CF3 !important; }
html body .tvq-app-go { background: #0B6CF3 !important; color: #FFFFFF !important; }