/* 03/11/2026: khung "Tính năng chính" của mục HỌC VÀ DẠY TIẾNG TRUNG (trang chủ).
   Trong ô mở ra: hiện cho mọi thiết bị. Rê chuột trên máy tính: bản sao nổi ngay dưới thẻ. */
.hd-feat { margin-top: 16px; padding-top: 14px; border-top: 1px dashed #D6E2FF; }
.hd-feat-h { margin: 0 0 10px; font-weight: 800; font-size: 18px; color: #1E3A8A; }
.hd-feat-h span { font-weight: 600; font-size: 15px; color: #64748B; margin-left: 4px; }
.hd-feat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.hd-fi { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 14px; background: #F6F8FC; border: 1px solid #E4E9F3; color: #1E293B; text-decoration: none; text-align: left; font-size: 15px; line-height: 1.45; transition: background .15s, transform .15s, box-shadow .15s; }
a.hd-fi:hover { background: #EEF3FF; transform: translateY(-2px); box-shadow: 0 8px 18px rgba(37, 99, 235, .1); }
.hd-fi b { font-size: 16px; color: #0F1F44; }
.hd-fi em { font-style: normal; font-size: 14px; color: #1D4ED8; font-weight: 600; }
.hd-fi-ct { background: linear-gradient(135deg, #EFF6FF, #FFF7ED); border-color: #93C5FD; }
a.hd-fi-ct:hover { background: #DBEAFE; }
.hd-fi-dh { background: linear-gradient(135deg, #EEF2FF, #F5F3FF); border-color: #C7D2FE; }
.hd-hb { display: flex; flex-wrap: wrap; gap: 5px; margin: 2px 0; }
.hd-hb i { font-style: normal; font-size: 13px; font-weight: 700; color: #3730A3; background: #fff; border: 1px solid #C7D2FE; border-radius: 999px; padding: 2px 9px; }
.hd-fi-links { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 4px; }
.hd-fi-links a { font-weight: 800; font-size: 14.5px; color: #1D4ED8; text-decoration: none; }
.hd-fi-links a:hover { text-decoration: underline; }
.hd-fi-mh { background: linear-gradient(135deg, #ECFDF5, #F0F9FF); border-color: #A7F3D0; }
.hd-mh-play { margin-top: 6px; align-self: flex-start; padding: 8px 14px; border: 0; border-radius: 999px; background: #1056B9; color: #fff; font: inherit; font-weight: 800; font-size: 15px; cursor: pointer; box-shadow: 0 6px 14px rgba(59, 139, 247, .3); animation: hd-pulse 2.2s ease-in-out infinite; }
.hd-mh-play:hover { background: #054196; }
.hd-mh-play[hidden] { display: none; }
@keyframes hd-pulse { 0%, 100% { box-shadow: 0 6px 14px rgba(59, 139, 247, .3); } 50% { box-shadow: 0 6px 22px rgba(59, 139, 247, .6); } }

/* bản nổi khi rê chuột (chỉ máy tính) */
.hd-pop { position: absolute; z-index: 30; width: min(760px, calc(100vw - 32px)); padding: 16px 18px; border-radius: 18px; background: #fff; border-top: 5px solid #2563EB; box-shadow: 0 22px 50px rgba(15, 31, 68, .2); animation: hd-pop-in .18s ease; }
.hd-pop .hd-feat { margin: 0; padding: 0; border: 0; }
.hd-pop::before { content: ""; position: absolute; top: -13px; left: var(--hd-arrow, 60px); border: 8px solid transparent; border-bottom-color: #2563EB; }
@keyframes hd-pop-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* trình phát video Minh Hà */
.hd-vmodal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(8, 15, 35, .78); }
.hd-vmodal video { width: min(960px, 100%); max-height: 86vh; border-radius: 14px; background: #000; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
.hd-vmodal .hd-vx { position: absolute; top: 14px; right: 16px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #fff; font-size: 22px; font-weight: 800; cursor: pointer; }
.hd-vmodal .hd-vback { position: absolute; top: 14px; left: 16px; height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: #fff; color: #0F1F44; font: inherit; font-size: 16px; font-weight: 800; cursor: pointer; box-shadow: 0 6px 18px rgba(0, 0, 0, .3); }
.hd-vmodal .hd-vback:hover, .hd-vmodal .hd-vx:hover { background: #EEF3FF; }
@media (prefers-reduced-motion: reduce) { .hd-mh-play, .hd-pop { animation: none; } }

/* 03/11/2026 (sửa lỗi điện thoại): video-tools.js chèn thanh Lùi/Tới 10s, Tốc độ ngay SAU thẻ video trong khung.
   Khung là flex hàng ngang nên thanh đứng cạnh video: video bị đẩy lệch trái ra ngoài màn hình, chữ nút đè nhau.
   Xếp dọc: video ở trên, thanh công cụ nằm gọn ngay dưới, cùng bề rộng với video. */
.hd-vmodal { flex-direction: column; gap: 10px; padding: 72px 12px 16px; overflow-y: auto; }
.hd-vmodal video { flex: none; max-width: 100%; max-height: calc(100vh - 190px); max-height: calc(100dvh - 190px); }
.hd-vmodal .rqx-video-bar { flex: none; width: min(960px, 100%); max-width: 100%; box-sizing: border-box; margin: 0; }

/* 04/11/2026: "Tính năng chính" hiện cố định ở cuối trang chủ. 8 ô cùng chiều cao: 4 cột máy tính, 2 cột điện thoại. */
.tnc-sec { padding: 10px 0 34px; }
.tnc-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin: 0 0 12px; }
.tnc-head h2 { margin: 0; font-size: 22px; color: #0F1F44; }
.tnc-head h2 span { margin-left: 6px; font-size: 17px; color: #1D4ED8; }
.tnc-head p { margin: 0; font-size: 15px; font-weight: 600; color: #64748B; }
.tnc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 12px; }
.tnc-card { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 14px 15px 13px; border-radius: 16px; background: #fff; border: 1.5px solid #DCE7F5; box-shadow: 0 4px 14px rgba(15, 37, 71, .05); color: #1E293B; text-decoration: none; transition: transform .15s, box-shadow .15s, border-color .15s; }
.tnc-card:hover { transform: translateY(-2px); border-color: #93B4F0; box-shadow: 0 10px 22px rgba(37, 99, 235, .12); }
.tnc-card b { font-size: 16.5px; line-height: 1.3; color: #0F1F44; }
.tnc-card small { font-size: 13px; font-weight: 700; color: #0C58C2; }
.tnc-card span { margin-top: 3px; font-size: 14.5px; line-height: 1.45; color: #475569; }
.tnc-card em { margin-top: auto; padding-top: 8px; font-style: normal; font-size: 13.5px; font-weight: 700; line-height: 1.35; color: #1D4ED8; }
.tnc-card em::before { content: "✓ "; color: #16A34A; }
.tnc-card.t-mh { background: linear-gradient(160deg, #ECFDF5, #fff 70%); border-color: #A7F3D0; }
.tnc-card.t-ct { background: linear-gradient(160deg, #FFF7ED, #fff 70%); border-color: #BFDBFE; }
.tnc-card.t-dh { background: linear-gradient(160deg, #EEF2FF, #fff 70%); border-color: #C7D2FE; }
@media (max-width: 900px) { .tnc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .tnc-sec { padding: 6px 0 26px; }
  .tnc-head h2 { font-size: 19px; } .tnc-head h2 span { font-size: 15px; } .tnc-head p { font-size: 13.5px; }
  .tnc-grid { gap: 8px; }
  .tnc-card { padding: 11px 11px 10px; border-radius: 14px; }
  .tnc-card b { font-size: 14.5px; } .tnc-card small { font-size: 12px; }
  .tnc-card span { font-size: 13px; } .tnc-card em { font-size: 12.5px; padding-top: 6px; }
}
@media (prefers-reduced-motion: reduce) { .tnc-card { transition: 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 .tnc-card em::before { color: #0B6CF3 !important; }
html body .tnc-card.t-mh, html body .tnc-card.t-ct { background: linear-gradient(160deg, #E7F0FE, #fff 70%) !important; border-color: #9CC4FD !important; }