/* CO-CHU-0311 */
/* RQX Chinese - giao diện chung */
@import url("https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800&family=Poppins:wght@400;500;600;700;800&family=Noto+Sans+SC:wght@500;700;800&family=Roboto:wght@400;500;700&family=Merriweather:wght@400;700;900&display=swap");
:root {
  --navy: #0B1B3F; --navy2: #13285C; --blue: #1E3A8A; --blue2: #2D5BD7; --sky: #E8EFFF;
  --red: #105DC8; --red2: #3B81E2; --gold: #60A5FA; --gold2: #93C5FD; --green: #12A150;
  --ink: #1F2937; --muted: #64748B; --line: #E2E8F0; --bg: #F6F8FC; --card: #FFFFFF;
  --radius: 16px; --shadow: 0 10px 30px rgba(15, 23, 42, .08); --shadow2: 0 20px 50px rgba(11, 27, 63, .18);
  --zh: "Noto Serif SC", "Songti SC", "SimSun", "KaiTi", serif;
  --nav-h: 46px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-size: 16px; font-family: Arial, "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color: var(--ink); background: var(--bg); line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: var(--blue2); text-decoration: none; }
img { max-width: 100%; display: block; }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 20px; }
.zh { font-family: var(--zh); }
.muted { color: var(--muted); }
.center { text-align: center; }
.hide { display: none !important; }

/* ---------- thanh menu trên cùng (gọn 46px, nền mờ nhẹ giữ tông navy/gold) ---------- */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(19, 40, 92, .72); backdrop-filter: saturate(150%) blur(14px); -webkit-backdrop-filter: saturate(150%) blur(14px); border-bottom: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 2px 14px rgba(11, 27, 63, .1); color: #fff; }
.nav .wrap { display: flex; align-items: center; gap: 14px; height: var(--nav-h, 46px); max-width: 1400px; }
.logo { display: flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, .95); font-weight: 800; font-size: 15px; letter-spacing: .2px; white-space: nowrap; }
.logo .seal { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: linear-gradient(135deg, rgba(16, 93, 200, .9), rgba(10, 65, 142, .9)); font-family: var(--zh); font-size: 15px; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .18); }
.logo small { display: block; font-size: 10px; font-weight: 500; color: rgba(244, 201, 93, .88); margin-top: -2px; letter-spacing: .2px; }
.nav .menu { display: flex; gap: 2px; margin-left: auto; align-items: center; }
/* Tab menu: font Be Vietnam Pro (chuẩn dấu tiếng Việt đều nét), dễ đọc; tab đang mở có gạch chân vàng */
.nav .menu a { position: relative; color: #fff; text-shadow: 0 1px 2px rgba(5, 12, 32, .45); padding: 5px 9px; border-radius: 8px; font-family: Arial, "Helvetica Neue", sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0; white-space: nowrap; line-height: 1.2; transition: background .15s, color .15s; }
.nav .menu a:hover { color: var(--gold2); background: rgba(255, 255, 255, .12); }
.nav .menu a.on { color: var(--gold2); background: rgba(255, 255, 255, .14); }
.nav .menu a.on::after { content: ""; position: absolute; left: 9px; right: 9px; bottom: 1px; height: 2px; border-radius: 2px; background: var(--gold); }
.nav .menu a.cta { background: rgba(96, 165, 250, .86); color: var(--navy); font-weight: 600; margin-left: 6px; padding: 5px 11px; }
.nav .menu a.cta:hover { background: var(--gold); color: var(--navy); }
.nav .menu a.cta, .nav .menu .sub-pop a, .nav .menu .acct-pop a { text-shadow: none; }
.nav .burger { display: none; margin-left: auto; background: none; border: 0; color: #fff; font-size: 20px; cursor: pointer; }
.ls-nav, .classroom-bar, .xbar, .toc, .preview-bar, .filter-bar { top: var(--nav-h, 46px) !important; }
/* Tên tab dài (có xuống dòng trong site.js) hiện 2 dòng gọn trên máy tính; điện thoại vẫn 1 dòng */
@media (min-width: 1181px) { .nav .menu > a:not(.cta) { white-space: pre-line; text-align: center; line-height: 1.15; padding-top: 4px; padding-bottom: 4px; } }
@media (max-width: 1500px) and (min-width: 1181px) { .nav .menu a { font-size: 11.5px; padding: 5px 7px; } .nav .menu a.on::after { left: 7px; right: 7px; } .logo small { display: none; } }
@media (max-width: 1180px) {
  .nav .burger { display: block; }
  .nav .menu { display: none; position: absolute; top: var(--nav-h, 46px); left: 0; right: 0; flex-direction: column; align-items: stretch; background: rgba(11, 27, 63, .95); backdrop-filter: blur(14px); padding: 10px 16px 16px; border-bottom: 1px solid rgba(255, 255, 255, .14); }
  .nav .menu.open { display: flex; }
  .nav .menu a { padding: 10px 12px; font-size: 13.5px; }
  .nav .menu a.on::after { left: 12px; right: auto; width: 28px; bottom: 4px; }
  .nav .menu a.cta { margin: 6px 0 0; text-align: center; }
}

/* ---------- nút ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 24px; border-radius: 12px; font-weight: 700; font-size: 16px; border: 0; cursor: pointer; transition: transform .15s, box-shadow .15s, background .15s; font-family: inherit; text-align: center; }
.btn:hover { transform: translateY(-1px); }
.btn:disabled { opacity: .6; cursor: default; transform: none; }
.btn-gold { background: var(--gold); color: var(--navy); box-shadow: 0 8px 20px rgba(96, 165, 250, .35); }
.btn-blue { background: var(--blue); color: #fff; box-shadow: 0 8px 20px rgba(30, 58, 138, .25); }
.btn-red { background: var(--red); color: #fff; box-shadow: 0 8px 20px rgba(16, 93, 200, .25); }
.btn-green { background: var(--green); color: #fff; }
.btn-ghost { background: transparent; color: #fff; border: 1.5px solid rgba(255, 255, 255, .45); }
.btn-line { background: #fff; color: var(--blue); border: 1.5px solid #C7D5F5; }
.btn-sm { padding: 8px 14px; font-size: 14px; border-radius: 10px; }
.btn-block { width: 100%; }

/* ---------- khối chung ---------- */
section { padding: 72px 0; }
.eyebrow { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--red); margin-bottom: 8px; }
h1, h2, h3, h4 { line-height: 1.28; margin: 0 0 12px; color: var(--navy); text-wrap: balance; }
h2 { font-size: clamp(22px, 2.92vw, 32.5px); }
/* Đoạn văn: không ngắt chữ mồ côi, dòng không quá dài; khối căn giữa thì đoạn văn cũng nằm giữa */
p { text-wrap: pretty; }
section p, .card p { max-width: 72ch; }
.center p, .sec-head p, .pagehead p, .center > p, [class*=center] > p { margin-left: auto; margin-right: auto; }
.lead { font-size: 18px; color: var(--muted); max-width: 680px; margin-left: auto; margin-right: auto; text-wrap: pretty; }
.pagehead h1 { max-width: 22ch; }
.pagehead h1, .pagehead p { margin-left: auto; margin-right: auto; text-align: center; }
@media (max-width: 640px) { .lead { font-size: 17px; } }
.pagehead { text-align: center; }
.card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 26px; }
.grid { display: grid; gap: 22px; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .g3, .g4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .g2, .g3, .g4 { grid-template-columns: 1fr; } section { padding: 52px 0; } }
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; padding: 4px 12px; border-radius: 999px; background: var(--sky); color: var(--blue); }
.pill.free { background: #DBEAFE; color: #1E40AF; }
.pill.paid { background: #DBEAFE; color: #1E40AF; }
.pill.red { background: #E2EDFD; color: var(--red); }
.price { font-size: 21px; font-weight: 800; color: var(--red); }
.price s { font-size: 15px; color: var(--muted); font-weight: 500; margin-left: 6px; }

/* ---------- đầu trang con ---------- */
.pagehead { background: radial-gradient(1200px 400px at 80% -20%, rgba(45, 91, 215, .55), transparent), linear-gradient(160deg, var(--navy), var(--blue)); color: #fff; padding: 56px 0 64px; position: relative; overflow: hidden; }
.pagehead h1 { color: #fff; font-size: clamp(25.5px, 3.78vw, 39px); }
.pagehead p { color: #D6E2FF; font-size: 18px; max-width: 680px; margin: 0 auto; }
.pagehead .bgzh { position: absolute; right: -20px; bottom: -60px; font-family: var(--zh); font-size: 221px; color: rgba(255, 255, 255, .06); line-height: 1; pointer-events: none; }

/* ---------- khung điện thoại ---------- */
.phone { position: relative; width: 270px; aspect-ratio: 1170 / 2532; border-radius: 42px; padding: 11px; background: linear-gradient(145deg, #1C2333, #0A0F1C); box-shadow: var(--shadow2), inset 0 0 0 2px #2B3447; }
.phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 32px; }
.phone::before { content: ""; position: absolute; top: 18px; left: 50%; transform: translateX(-50%); width: 84px; height: 22px; border-radius: 14px; background: #05070C; z-index: 2; }

/* ---------- chân trang ---------- */
footer.site { background: var(--navy); color: #AFC0E6; padding: 48px 0 28px; font-size: 15px; }
footer.site h4 { color: #fff; margin: 0 0 12px; font-size: 16px; }
footer.site a { color: #D6E2FF; }
footer.site .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 28px; }
footer.site .bottom { border-top: 1px solid rgba(255, 255, 255, .1); margin-top: 32px; padding-top: 18px; font-size: 13px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
@media (max-width: 760px) { footer.site .cols { grid-template-columns: 1fr 1fr; } }

/* ---------- hộp thoại (thu gọn ~80%) ---------- */
.modal { position: fixed; inset: 0; background: rgba(8, 15, 35, .6); z-index: 100; display: none; align-items: flex-start; justify-content: center; padding: 20px 12px; overflow-y: auto; }
.modal.open { display: flex; }
.modal .box { background: #fff; border-radius: 16px; max-width: 416px; width: 100%; padding: 18px 20px; margin: auto; box-shadow: var(--shadow2); position: relative; animation: pop .2s ease; font-size: 13.5px; }
.modal .box h3 { font-size: 17.5px; margin: 0 24px 8px 0; }
.modal .x { position: absolute; top: 8px; right: 11px; background: none; border: 0; font-size: 21px; cursor: pointer; color: var(--muted); line-height: 1; }
@keyframes pop { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
.field { margin-bottom: 12px; }
.field label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 4px; color: var(--navy); }
.field input, .field select, .field textarea { width: 100%; padding: 11px 13px; border: 1.5px solid var(--line); border-radius: 10px; font-size: 16px; font-family: inherit; background: #fff; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 0; border-color: var(--blue2); box-shadow: 0 0 0 3px rgba(45, 91, 215, .15); }
.modal .field { margin-bottom: 7px; }
.modal .field label { font-size: 12.5px; margin-bottom: 2px; }
.modal .field input, .modal .field select, .modal .field textarea { padding: 7px 10px; border-radius: 8px; font-size: 13.5px; }
.msg { padding: 10px 14px; border-radius: 10px; font-size: 14px; margin: 10px 0; }
.modal .msg { padding: 8px 11px; border-radius: 8px; font-size: 12.5px; margin: 8px 0; }
.msg.err { background: #E2EEFE; color: #1B4F99; }
.msg.ok { background: #DBEAFE; color: #1E40AF; }
.msg.info { background: var(--sky); color: var(--blue); }
.qrbox { text-align: center; }
.qrbox img { width: 200px; margin: 6px auto; border-radius: 10px; border: 1px solid var(--line); }
.kv { display: grid; grid-template-columns: 120px 1fr; gap: 6px 10px; font-size: 15px; text-align: left; background: var(--bg); border-radius: 12px; padding: 12px 14px; }
.modal .kv { grid-template-columns: 100px 1fr; gap: 4px 8px; font-size: 13px; border-radius: 10px; padding: 9px 11px; }
.modal .btn-block { padding: 10px 18px; font-size: 14px; border-radius: 10px; }
.kv b { color: var(--navy); }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--navy); color: #fff; padding: 10px 18px; border-radius: 999px; z-index: 200; font-size: 15px; box-shadow: var(--shadow2); }

/* ---------- bảng ---------- */
table.t { width: 100%; border-collapse: collapse; font-size: 15px; }
table.t th, table.t td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
table.t th { background: var(--sky); color: var(--navy); font-weight: 700; }

/* ---------- hiệu ứng xuất hiện ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ---------- pop-up lộ trình học & test trình độ bên trái màn hình ---------- */
.rqx-rm-card { position: fixed; left: 16px; bottom: 16px; z-index: 90; width: 348px; max-width: calc(100vw - 32px); background: linear-gradient(155deg, #FFFDF6 0%, #DBEAFE 100%); backdrop-filter: blur(14px); color: var(--navy); border: 1.5px solid #3B82F6; border-radius: 18px; padding: 14px 15px 13px; box-shadow: 0 18px 42px rgba(11, 27, 63, .24), inset 0 1px 0 rgba(255, 255, 255, .85); animation: pop .25s ease; }
.rqx-rm-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 7px; }
.rqx-rm-badge { display: inline-flex; align-items: center; gap: 5px; background: rgba(59, 130, 246, .16); border: 1px solid rgba(11, 108, 243, .42); color: #1E40AF; font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 999px; }
.rqx-rm-min { background: rgba(15, 23, 42, .07); border: 0; color: #334155; width: 24px; height: 24px; border-radius: 7px; cursor: pointer; font-size: 15px; line-height: 1; display: grid; place-items: center; }
.rqx-rm-min:hover { background: rgba(15, 23, 42, .14); color: var(--navy); }
.rqx-rm-msg { font-size: 14px; line-height: 1.5; color: #1E293B; margin: 0 0 11px; }
.rqx-rm-msg b { color: #1D4ED8; }
.rqx-rm-saved-bar { background: rgba(18, 161, 80, .12); border: 1px solid rgba(18, 161, 80, .35); border-radius: 10px; padding: 6px 9px; font-size: 12.5px; color: #062B5F; margin-bottom: 9px; display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.rqx-rm-saved-bar a { color: #043478; font-weight: 700; white-space: nowrap; }
.rqx-rm-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rqx-rm-btns button { border: 0; border-radius: 10px; padding: 9px 10px; font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 5px; transition: transform .15s, background .15s, border-color .15s; white-space: nowrap; }
.rqx-rm-btns button:hover { transform: translateY(-1px); }
.rqx-rm-btns .b-gold { background: var(--gold); color: var(--navy); border: 1px solid #3B82F6; box-shadow: 0 4px 12px rgba(96, 165, 250, .28); }
.rqx-rm-btns .b-line { background: #FFFFFF; color: var(--navy); border: 1.5px solid #CBD5E1; box-shadow: 0 2px 6px rgba(15, 23, 42, .05); }
.rqx-rm-btns .b-line:hover { border-color: var(--blue2); background: #F8FAFC; }

.rqx-rm-pill { position: fixed; left: 16px; bottom: 16px; z-index: 90; background: linear-gradient(135deg, #FFFDF6, #DBEAFE); color: var(--navy); border: 1.5px solid #3B82F6; border-radius: 999px; padding: 9px 15px; font-family: inherit; font-size: 13.5px; font-weight: 700; box-shadow: 0 12px 28px rgba(11, 27, 63, .22); cursor: pointer; display: inline-flex; align-items: center; gap: 7px; transition: transform .15s; }
.rqx-rm-pill:hover { transform: translateY(-2px); }
.rqx-rm-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: #2563EB; box-shadow: 0 0 0 3px rgba(59, 130, 246, .28); }

.rqx-rm-backdrop { position: fixed; inset: 0; z-index: 120; background: rgba(8, 15, 35, .58); backdrop-filter: blur(3px); display: none; align-items: stretch; justify-content: flex-start; }
.rqx-rm-backdrop.open { display: flex; }
.rqx-rm-drawer { width: 580px; max-width: 96vw; height: 100vh; background: #fff; box-shadow: 20px 0 60px rgba(11, 27, 63, .3); display: flex; flex-direction: column; overflow: hidden; animation: rmSlideIn .22s ease; }
@keyframes rmSlideIn { from { transform: translateX(-28px); opacity: 0; } to { transform: none; opacity: 1; } }
.rqx-rm-head { background: linear-gradient(145deg, var(--navy), var(--blue)); color: #fff; padding: 15px 18px 13px; position: relative; flex-shrink: 0; }
.rqx-rm-head h3 { color: #fff; font-size: 18px; margin: 4px 28px 4px 0; }
.rqx-rm-head p { color: #D6E2FF; font-size: 13px; margin: 0; line-height: 1.45; }
.rqx-rm-close { position: absolute; top: 12px; right: 14px; width: 30px; height: 30px; border-radius: 8px; border: 0; background: rgba(255, 255, 255, .14); color: #fff; font-size: 19px; cursor: pointer; line-height: 1; }
.rqx-rm-tabs { display: flex; background: #F1F5F9; border-bottom: 1px solid var(--line); padding: 6px 12px 0; gap: 6px; flex-shrink: 0; overflow-x: auto; }
.rqx-rm-tabs button { border: 0; background: transparent; padding: 9px 13px; border-radius: 10px 10px 0 0; font-family: inherit; font-size: 13px; font-weight: 700; color: #475569; cursor: pointer; border-bottom: 3px solid transparent; white-space: nowrap; }
.rqx-rm-tabs button.on { background: #fff; color: var(--navy); border-bottom-color: var(--gold); }
.rqx-rm-body { flex: 1; overflow-y: auto; padding: 16px 18px 22px; font-size: 14px; }
.rqx-rm-sec-title { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: var(--blue); margin: 12px 0 8px; display: flex; align-items: center; gap: 6px; }
.rqx-rm-sec-title:first-child { margin-top: 0; }
.rqx-rm-lv-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 12px; }
.rqx-rm-lv-btn { text-align: left; background: #F8FAFC; border: 1.5px solid #CBD5E1; border-radius: 12px; padding: 9px 11px; cursor: pointer; font-family: inherit; transition: border-color .15s, background .15s; }
.rqx-rm-lv-btn:hover { border-color: var(--blue2); background: #EFF6FF; }
.rqx-rm-lv-btn.on { border-color: var(--blue); background: #EFF6FF; box-shadow: 0 0 0 2px rgba(30, 58, 138, .14); }
.rqx-rm-lv-btn b { display: block; font-size: 13.5px; color: var(--navy); }
.rqx-rm-lv-btn span { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.rqx-rm-time-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.rqx-rm-time-btn { border: 1.5px solid #CBD5E1; background: #fff; border-radius: 10px; padding: 8px 6px; font-family: inherit; font-size: 12.5px; font-weight: 700; color: var(--navy); cursor: pointer; text-align: center; }
.rqx-rm-time-btn.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.rqx-rm-step-list { display: grid; gap: 8px; margin: 10px 0 14px; }
.rqx-rm-step { background: #F8FAFC; border: 1px solid var(--line); border-left: 4px solid var(--blue); border-radius: 10px; padding: 9px 12px; font-size: 13px; }
.rqx-rm-step b { color: var(--navy); }
.rqx-rm-lessons { display: grid; gap: 6px; max-height: 290px; overflow-y: auto; border: 1px solid var(--line); border-radius: 12px; padding: 9px; background: #FBFCFE; margin: 8px 0 14px; }
.rqx-rm-lesson-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: #fff; border: 1px solid #E2E8F0; border-radius: 9px; padding: 7px 10px; font-size: 13px; }
.rqx-rm-lesson-row .l-title { font-weight: 600; color: var(--navy); }
.rqx-rm-lesson-row .l-acts { display: flex; gap: 5px; flex-shrink: 0; }
.rqx-rm-lesson-row .l-acts a { font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 7px; border: 1px solid #CBD5E1; background: #F8FAFC; color: var(--blue); white-space: nowrap; }
.rqx-rm-lesson-row .l-acts a.ai { background: #EFF6FF; border-color: #93C5FD; }
.rqx-rm-buy-box { background: linear-gradient(145deg, #EFF6FF, #DBEAFE); border: 2px solid var(--gold); border-radius: 14px; padding: 13px 14px; margin: 12px 0; }
@media (max-width: 640px) {
  .rqx-rm-card { left: 10px; bottom: 10px; width: calc(100vw - 20px); padding: 12px; }
  .rqx-rm-pill { left: 10px; bottom: 10px; padding: 8px 13px; font-size: 12.5px; }
  .rqx-rm-lv-grid { grid-template-columns: 1fr; }
}

/* 26/10/2026: chữ toàn site nhỏ lại khoảng 90% (tiêu đề lớn 85%); ô nhập trên điện thoại giữ 16px để iPhone không tự phóng to khi gõ */
@media (max-width: 640px) { input, select, textarea { font-size: 18px !important; } }

/* menu tài khoản: Tài khoản của tôi, Quản trị, Đổi tài khoản, Đăng xuất */
.nav .acct { position: relative; display: inline-flex; }
.nav .acct-pop { display: none; position: absolute; right: 0; top: calc(100% + 8px); min-width: 230px; background: #fff; border-radius: 12px; box-shadow: var(--shadow2); padding: 8px; z-index: 70; border: 1px solid var(--line); }
.nav .acct.open .acct-pop { display: block; }
.nav .acct-pop .who { padding: 6px 10px 8px; border-bottom: 1px solid var(--line); margin-bottom: 4px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.nav .acct-pop .who b { display: block; color: var(--navy); font-size: 13.5px; }
.nav .menu .acct-pop a, .nav .acct-pop button { display: block; width: 100%; text-align: left; padding: 8px 10px; border-radius: 8px; color: var(--navy); font-family: inherit; font-size: 13.5px; font-weight: 500; background: none; border: 0; cursor: pointer; white-space: nowrap; }
.nav .menu .acct-pop a::after { display: none; }
.nav .menu .acct-pop a:hover, .nav .acct-pop button:hover { background: var(--sky); color: var(--navy); }
.nav .acct-pop button.out { color: var(--red); }
@media (max-width: 1180px) { .nav .menu.open .acct { display: block; } .nav .menu.open .acct-pop { position: static; box-shadow: none; margin-top: 6px; min-width: 0; } }

/* 26/10/2026 sửa nhóm A (rà soát RA-SOAT-2026-10-26): font nút, vùng chạm 44px, nút lộ trình gọn */
button, input, select, textarea { font-family: inherit; }
.nav .burger { width: 44px; height: 44px; display: none; place-items: center; border-radius: 10px; font-size: 22px; padding: 0; }
.nav .burger:hover { background: rgba(255, 255, 255, .1); }
@media (max-width: 1180px) { .nav .burger { display: grid; } .nav .menu a.cta { min-height: 44px; display: flex; align-items: center; justify-content: center; } }
.rqx-rm-min { width: 36px; height: 36px; font-size: 19px; margin: -6px -6px -6px 0; }
.rqx-rm-pill .ic { font-size: 17px; line-height: 1; }
@media (max-width: 640px) {
  .rqx-rm-pill { width: 48px; height: 48px; padding: 0; justify-content: center; font-size: 21px; left: 12px; bottom: 12px; }
  .rqx-rm-pill .tx, .rqx-rm-pill .dot { display: none; }
  .rqx-rm-pill .ic { font-size: 22px; }
  .rqx-rm-card { max-height: 46vh; overflow-y: auto; }
  .rqx-rm-btns button { min-height: 40px; }
}
/* Vùng chạm tối thiểu trên điện thoại (A26, A27) */
@media (max-width: 640px) {
  .btn-sm { min-height: 40px; }
  .spk { min-height: 36px; padding: 6px 12px !important; }
  .card.lvl ol li a { display: inline-block; padding: 8px 0; min-height: 36px; }
  [data-write], a.w-app { display: inline-flex; align-items: center; min-height: 38px; padding-top: 6px; padding-bottom: 6px; }
  .pill { min-height: 24px; }
}

/* Tab có mục con (Tài liệu học tập): máy tính rê chuột hiện danh sách, điện thoại hiện sẵn trong menu */
.nav .has-sub { position: relative; display: inline-flex; }
.nav .sub-pop { display: none; position: absolute; left: 50%; transform: translateX(-50%); top: 100%; padding-top: 8px; z-index: 70; }
.nav .sub-pop::before { content: ""; position: absolute; inset: 8px 0 0; background: #fff; border-radius: 12px; box-shadow: var(--shadow2); border: 1px solid var(--line); z-index: -1; }
.nav .has-sub:hover .sub-pop, .nav .has-sub:focus-within .sub-pop { display: flex; flex-direction: column; }
.nav .menu .sub-pop a { display: block; margin: 0 6px; padding: 8px 12px; border-radius: 8px; color: var(--navy); background: none; font-size: 13.5px; font-weight: 600; white-space: nowrap; text-align: left; line-height: 1.3; }
.nav .menu .sub-pop a:first-child { margin-top: 6px; }
.nav .menu .sub-pop a:last-child { margin-bottom: 6px; }
.nav .menu .sub-pop a:hover { background: var(--sky); color: var(--navy); }
.nav .menu .sub-pop a::after { display: none; }
@media (min-width: 1181px) { .nav .menu > .has-sub > a { white-space: pre-line; text-align: center; line-height: 1.15; padding-top: 4px; padding-bottom: 4px; } }
@media (max-width: 1180px) {
  .nav .has-sub { display: flex; flex-direction: column; }
  .nav .sub-pop, .nav .has-sub:hover .sub-pop { display: flex; flex-direction: column; position: static; transform: none; padding: 0 0 4px 14px; }
  .nav .sub-pop::before { display: none; }
  .nav .menu .sub-pop a, .nav .menu .sub-pop a:first-child, .nav .menu .sub-pop a:last-child { margin: 0; padding: 7px 12px; color: rgba(226, 234, 248, .85); font-size: 12.5px; font-weight: 500; }
  .nav .menu .sub-pop a:hover { background: rgba(255, 255, 255, .1); color: #fff; }
}

/* Menu 7 Tab + Tìm kiếm nhanh + Thanh đáy 5 nút mobile (Khung 7 Tab, 31/10/2026) */
footer.site .cols { grid-template-columns: 1.4fr 1fr 1fr 1.1fr 1fr; }
@media (max-width: 960px) { footer.site .cols { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 760px) { footer.site .cols { grid-template-columns: 1fr 1fr; } }
.nav .menu a { font-size: 12.5px; }
.nav .menu a.hot { background: linear-gradient(90deg, #60A5FA, #FFD54A); color: var(--navy); text-shadow: none; margin-left: 4px; }
.nav .menu a.hot:hover, .nav .menu a.hot.on { background: var(--gold); color: var(--navy); }
.nav .menu a.hot.on::after { display: none; }
.nav .menu a.zh-tab { background: rgba(14, 143, 134, .92); color: #FFF8E7; font-family: var(--zh), Arial, sans-serif; font-weight: 700; border: 1px solid rgba(147, 197, 253, .45); text-shadow: none; }
.nav .menu a.zh-tab:hover, .nav .menu a.zh-tab.on { background: #0A397C; color: var(--gold2); }
.nav .menu a.org { font-size: 11px; font-weight: 500; opacity: .8; margin-left: 10px; border-left: 1px solid rgba(255,255,255,.25); border-radius: 0; padding-left: 12px; white-space: pre-line; text-align: center; line-height: 1.15; }
.nav .menu a.org:hover { opacity: 1; }
.nav .menu a.study { border: 1px solid rgba(96, 165, 250,.7); margin-left: 4px; }
.nav .nav-search-btn { background: rgba(255, 255, 255, .12); color: #fff; border: 1px solid rgba(255, 255, 255, .24); border-radius: 8px; padding: 5px 9px; font-family: Arial, sans-serif; font-size: 12px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; margin-left: 4px; white-space: nowrap; transition: background .15s, border-color .15s; }
.nav .nav-search-btn:hover { background: rgba(255, 255, 255, .22); border-color: var(--gold2); color: var(--gold2); }
@media (max-width: 1440px) and (min-width: 1181px) { .nav .nav-search-btn span { display: none; } }
@media (max-width: 1180px) {
  .nav .menu a.hot, .nav .menu a.zh-tab { margin: 6px 0 0; text-align: center; }
  .nav .menu a.org { margin: 6px 0 0; border-left: 0; border-top: 1px solid rgba(255,255,255,.18); padding-top: 12px; white-space: normal; text-align: left; border-radius: 0; }
  .nav .menu a.study, .nav .nav-search-btn { margin: 6px 0 0; text-align: center; justify-content: center; min-height: 42px; }
}

@media (max-width: 1180px) { .nav .menu.open { background: #0B1B3F; max-height: calc(100vh - var(--nav-h, 46px)); overflow-y: auto; } }

/* Thanh đáy 5 nút trên điện thoại (Cải tiến UX #2: Hôm nay · Khóa học · Luyện · Cô AI · Tôi) */
.rqx-mob-bar { display: none; }
@media (max-width: 900px) {
  body { padding-bottom: 64px; }
  .rqx-mob-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 85; height: 60px; background: rgba(11, 27, 63, .96); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid rgba(255, 255, 255, .14); display: grid; grid-template-columns: repeat(5, 1fr); align-items: stretch; box-shadow: 0 -6px 24px rgba(11, 27, 63, .22); }
  .rqx-mob-bar a { color: #CBD5E1; font-size: 12px; font-weight: 600; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-decoration: none; line-height: 1.15; padding: 4px 2px; }
  .rqx-mob-bar a .ic { font-size: 18px; line-height: 1; }
  .rqx-mob-bar a.on { color: var(--gold2); font-weight: 700; }
  .rqx-mob-bar a.try-cta { background: linear-gradient(135deg, #60A5FA, #93C5FD); color: var(--navy); font-weight: 800; margin: 6px 3px; border-radius: 12px; }
  .rqx-rm-pill, .rqx-rm-card { bottom: 70px; }
}

/* Hệ thống Tab con (Sub-tab Progressive Disclosure), Hero Video Tự Mở & Thẻ Visual Ít Chữ (01/11/2026) */
.pagehead { padding: 22px 0 20px; background: radial-gradient(900px 320px at 85% 0%, rgba(45,91,215,.42), transparent 65%), linear-gradient(135deg, #091736 0%, #163072 100%); border-bottom: 2px solid rgba(96, 165, 250,.45); }
.pagehead h1 { font-size: clamp(21px, 2.6vw, 28px); margin-bottom: 4px; letter-spacing: -.01em; }
.pagehead p { font-size: 15px; color: #D6E2FF; max-width: 680px; margin: 0; line-height: 1.45; }
.ph-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.ph-chip { display: inline-flex; align-items: center; gap: 5px; background: rgba(255, 255, 255, .11); border: 1px solid rgba(255, 255, 255, .22); color: #fff; padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; }
.ph-chip b { color: var(--gold2); }

.rqx-subbar { position: sticky; top: var(--nav-h, 46px); z-index: 48; background: rgba(255, 255, 255, .96); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid #DCE6F7; box-shadow: 0 6px 20px rgba(11, 27, 63, .06); padding: 9px 0; }
.rqx-subbar .wrap { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.rqx-subbar .wrap::-webkit-scrollbar { display: none; }
.rqx-stab { appearance: none; background: #F4F7FC; color: var(--navy); border: 1.5px solid #DCE6F7; border-radius: 999px; padding: 7px 14px; font-family: Arial, sans-serif; font-size: 14px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; text-decoration: none; transition: all .16s ease; line-height: 1.2; flex-shrink: 0; }
.rqx-stab:hover { border-color: var(--blue2); background: #EFF6FF; color: var(--blue); transform: translateY(-1px); }
.rqx-stab .cnt { font-size: 12px; font-weight: 800; padding: 1px 7px; border-radius: 999px; background: #E2E8F0; color: var(--navy); }
.rqx-stab.on { background: linear-gradient(135deg, #0B1B3F, #1E3A8A); color: #fff; border-color: #0B1B3F; box-shadow: 0 6px 16px rgba(11, 27, 63, .22); }
.rqx-stab.on .cnt { background: var(--gold); color: var(--navy); }

.rqx-subpane { display: none; animation: rqxPaneIn .2s ease; }
.rqx-subpane.on { display: block; }
@keyframes rqxPaneIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

/* Hero Video Tự Mở trên Trang chủ */
.hero-modern { background: radial-gradient(960px 440px at 82% 15%, rgba(45,91,215,.48), transparent 62%), radial-gradient(640px 340px at 12% 95%, rgba(16, 93, 200, .28), transparent 62%), linear-gradient(135deg, #07122B 0%, #0E2356 58%, #152E6E 100%); color: #fff; padding: 28px 0 30px; border-bottom: 3px solid var(--gold); position: relative; overflow: hidden; }
.hero-modern-grid { display: grid; grid-template-columns: .96fr 1.14fr; gap: 26px; align-items: center; }
@media (max-width: 980px) { .hero-modern-grid { grid-template-columns: 1fr; gap: 20px; } }
.hero-modern h1 { font-size: clamp(24px, 3.2vw, 38px); line-height: 1.18; margin: 10px 0 10px; color: #fff; letter-spacing: -.015em; }
.hero-modern h1 em { font-style: normal; color: var(--gold2); }
.hero-modern .hero-sub { font-size: 16px; color: #D6E4FF; margin: 0 0 14px; line-height: 1.5; max-width: 520px; }
.hero-kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 16px; max-width: 520px; }
.hero-kpi { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); border-radius: 12px; padding: 9px 12px; display: flex; align-items: center; gap: 10px; backdrop-filter: blur(8px); }
.hero-kpi .k-ic { width: 34px; height: 34px; border-radius: 9px; background: rgba(96, 165, 250, .18); color: var(--gold2); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.hero-kpi b { display: block; font-size: 16px; color: #fff; line-height: 1.15; }
.hero-kpi span { font-size: 13px; color: #BFD2F8; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

.rqx-video-stage { background: rgba(8, 18, 44, .88); border: 1.5px solid rgba(96, 165, 250, .55); border-radius: 20px; padding: 10px; box-shadow: 0 22px 54px rgba(0, 0, 0, .42), 0 0 0 1px rgba(255,255,255,.08) inset; }
.rqx-video-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 6px 8px; }
.rqx-live-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; color: var(--gold2); letter-spacing: .02em; }
.rqx-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 0 4px rgba(34, 197, 94, .25); }
.rqx-video-box { position: relative; border-radius: 14px; overflow: hidden; background: #040B1C; aspect-ratio: 16 / 9; border: 1px solid rgba(255,255,255,.14); }
.rqx-video-box video { width: 100%; height: 100%; object-fit: cover; display: block; background: #040B1C; }
.rqx-unmute-btn { position: absolute; top: 12px; right: 12px; z-index: 4; background: linear-gradient(135deg, #60A5FA, #93C5FD); color: #0B1B3F; border: 0; border-radius: 999px; padding: 7px 13px; font-family: Arial, sans-serif; font-size: 13.5px; font-weight: 800; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; box-shadow: 0 8px 22px rgba(0,0,0,.38); transition: transform .15s; }
.rqx-unmute-btn:hover { transform: scale(1.04); }
.rqx-unmute-btn.unmuted { background: rgba(11, 27, 63, .85); color: #fff; border: 1px solid rgba(255,255,255,.3); }
.rqx-vcaption { position: absolute; left: 12px; bottom: 12px; right: 12px; z-index: 3; pointer-events: none; background: linear-gradient(90deg, rgba(7,18,43,.92), rgba(14,35,86,.78)); border: 1px solid rgba(255,255,255,.18); border-radius: 11px; padding: 7px 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; backdrop-filter: blur(8px); }
.rqx-vcaption b { font-size: 14.5px; color: #fff; display: block; }
.rqx-vcaption span { font-size: 13px; color: var(--gold2); font-weight: 700; white-space: nowrap; }
.rqx-vchap-bar { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 9px; }
@media (max-width: 640px) { .rqx-vchap-bar { grid-template-columns: repeat(2, 1fr); } }
.rqx-vchap { appearance: none; background: rgba(255, 255, 255, .07); color: #D6E4FF; border: 1px solid rgba(255, 255, 255, .15); border-radius: 10px; padding: 7px 6px; font-family: Arial, sans-serif; font-size: 12.5px; font-weight: 700; cursor: pointer; text-align: center; transition: all .15s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rqx-vchap:hover { background: rgba(255, 255, 255, .15); color: #fff; }
.rqx-vchap.on { background: linear-gradient(135deg, #2563EB, #1D4ED8); color: #fff; border-color: var(--gold); box-shadow: 0 4px 12px rgba(37, 99, 235, .35); }

/* Lưới thẻ Visual gọn đẹp, ít chữ */
.rqx-vgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.rqx-vgrid.g2 { grid-template-columns: repeat(2, 1fr); }
.rqx-vgrid.g4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .rqx-vgrid, .rqx-vgrid.g4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .rqx-vgrid, .rqx-vgrid.g2, .rqx-vgrid.g4 { grid-template-columns: 1fr; } }

.rqx-vcard { background: #fff; border: 1.5px solid #E2E8F0; border-top: 4px solid var(--blue2); border-radius: 18px; padding: 18px; display: flex; flex-direction: column; gap: 9px; box-shadow: 0 8px 24px rgba(11, 27, 63, .05); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.rqx-vcard:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(11, 27, 63, .11); }
.rqx-vcard.gold { border-top-color: var(--gold); background: linear-gradient(180deg, #FFFDF4 0%, #FFFFFF 48%); }
.rqx-vcard.red { border-top-color: var(--red); }
.rqx-vcard.navy { border-top-color: var(--navy); }
.rqx-vcard.green { border-top-color: var(--green); }
.rqx-vcard .vc-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rqx-vcard .vc-ic { width: 42px; height: 42px; border-radius: 12px; background: linear-gradient(135deg, #EFF6FF, #DBEAFE); display: inline-flex; align-items: center; justify-content: center; font-size: 21px; flex-shrink: 0; }
.rqx-vcard.gold .vc-ic { background: linear-gradient(135deg, #DBEAFE, #BFDBFE); }
.rqx-vcard.red .vc-ic { background: linear-gradient(135deg, #E2EEFE, #CAE0FE); }
.rqx-vcard.green .vc-ic { background: linear-gradient(135deg, #DBEAFE, #BBF7D0); }
.rqx-vcard h3 { font-size: 17.5px; margin: 2px 0 0; color: var(--navy); line-height: 1.28; font-weight: 800; }
.rqx-vcard p { font-size: 14.5px; color: var(--ink2); margin: 0; line-height: 1.45; }
.rqx-vcard .vc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.rqx-vcard .vc-chip { font-size: 13px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: #F1F5F9; color: #1E3A8A; border: 1px solid #E2E8F0; }
.rqx-vcard ul { margin: 2px 0 4px; padding-left: 16px; font-size: 14px; color: var(--ink2); line-height: 1.45; }
.rqx-vcard li { margin-bottom: 2px; }
.rqx-vcard .vc-acts { margin-top: auto; padding-top: 8px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.hold-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: #DBEAFE; border: 1px solid #BFDBFE; color: #1E40AF; font-size: 13px; font-weight: 700; white-space: nowrap; }
@media (max-width: 640px) { .hold-badge { white-space: normal; max-width: 100%; line-height: 1.35; border-radius: 12px; } }
.rqx-fold { background: #fff; border: 1.5px solid #DCE6F7; border-radius: 14px; padding: 10px 16px; margin-bottom: 16px; box-shadow: 0 4px 14px rgba(11,27,63,.04); }
.rqx-fold > summary { cursor: pointer; font-family: Arial, sans-serif; font-weight: 700; font-size: 15.5px; color: var(--navy); display: flex; align-items: center; justify-content: space-between; gap: 10px; list-style: none; }
.rqx-fold > summary::-webkit-details-marker { display: none; }
.rqx-fold > summary::after { content: "▼ Mở xem"; font-size: 13px; font-weight: 700; color: var(--blue2); background: #EFF6FF; padding: 4px 10px; border-radius: 999px; }
.rqx-fold[open] > summary::after { content: "▲ Thu gọn"; }




/* Bổ sung nút & nhãn cho Trang chủ mới (01/11/2026) */
.kicker { display: inline-flex; align-items: center; gap: 6px; background: rgba(96, 165, 250, .18); border: 1px solid rgba(96, 165, 250, .45); color: var(--gold2); padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 800; letter-spacing: .03em; }
.btn-ghost { background: rgba(255, 255, 255, .12); color: #fff; border: 1.5px solid rgba(255, 255, 255, .28); }
.btn-ghost:hover { background: rgba(255, 255, 255, .22); color: var(--gold2); border-color: var(--gold2); }
.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--blue); color: #fff; }
.btn-outline { background: #fff; color: var(--navy); border: 1.5px solid #CBD5E1; }
.btn-outline:hover { border-color: var(--blue2); color: var(--blue2); background: #EFF6FF; }
.badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 800; letter-spacing: .02em; }
.badge-green { background: #DBEAFE; color: #1E40AF; }
.badge-blue { background: #DBEAFE; color: #1E40AF; }
.badge-red { background: #E2EEFE; color: #1B4F99; }
.badge-gold { background: #DBEAFE; color: #1E40AF; }
.q-step { font-size: 13.5px; font-weight: 700; color: var(--blue2); margin-top: 6px; }
.q-text { font-size: 18px; font-weight: 800; color: var(--navy); margin: 6px 0 10px; }
.q-opts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.q-opt { appearance: none; background: #F8FAFC; border: 1.5px solid #E2E8F0; border-radius: 10px; padding: 9px 12px; font: inherit; font-size: 14.5px; font-weight: 600; color: var(--navy); cursor: pointer; text-align: left; }
.q-opt:hover { border-color: var(--blue2); background: #EFF6FF; }
.q-opt.correct { background: #DBEAFE; border-color: #16A34A; color: #14532D; }
.q-opt.wrong { background: #E2EEFE; border-color: #2672DC; color: #1D467F; }


/* ==== GIAO DIỆN MIX (02/11/2026): HIỆN ĐẠI (KHOAHOC12) + NÉT TƯƠI TẮN CARTOON (NỔI 3D MỀM, MÀU SẮC CÓ ĐIỂM NHẤN, RIÊNG YCT GIỮ FULL CARTOON) ==== */
:root {
  --bd: #0B1B3F;
  --teal: #0B6CF3; --emerald: #1056B9; --emerald-dk: #054196;
  --p-blue: #EFF6FF; --p-gold: #EFF6FF; --p-red: #F1F7FF; --p-green: #ECFDF5; --p-peach: #FFF7ED; --p-purple: #F5F3FF;
  --pg: #F4F8FB;
  --fx-head: Arial, "Helvetica Neue", "Noto Sans SC", system-ui, sans-serif;
  --fx-body: Arial, "Helvetica Neue", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --pop: cubic-bezier(.34, 1.56, .64, 1);
}
body {
  font-family: var(--fx-body);
  font-size: 17px;
  line-height: 1.6;
  background-color: var(--pg);
  background-image: radial-gradient(rgba(148, 163, 184, .22) 1.4px, transparent 1.4px);
  background-size: 26px 26px;
  color: #0F172A;
}
h1, h2, h3, h4 { font-family: var(--fx-head); font-weight: 800; letter-spacing: -.01em; }
p { color: #334155; }

/* Thanh menu trên cùng: nền Navy đậm + viền vàng ấm + nút đang chọn nổi bật */
.nav { background: var(--navy); border-bottom: 2.5px solid var(--gold); box-shadow: 0 4px 14px rgba(11, 27, 63, .16); }
.nav .menu a { font-family: var(--fx-head); font-weight: 700; border-radius: 999px; transition: transform .18s var(--pop), background .15s, color .15s; }
.nav .menu a:hover { transform: translateY(-1.5px); background: rgba(255, 255, 255, .14); color: var(--gold2); }
.nav .menu a.on { background: linear-gradient(135deg, #93C5FD, #3B82F6); color: var(--navy); border: 1.5px solid #BFDBFE; box-shadow: 0 2px 0 #1D4ED8; text-shadow: none; font-weight: 800; }
.nav .menu a.on::after { display: none; }
.nav .menu a.study { background: rgba(59, 139, 247, .2); color: #A7F3D0; border: 1.5px solid rgba(52, 211, 153, .55); }
.nav .menu a.study:hover { background: #1056B9; color: #FFFFFF; }
.nav .menu a.cta { background: linear-gradient(135deg, #93C5FD, #3B82F6); color: var(--navy) !important; border: 1.5px solid #BFDBFE; box-shadow: 0 2px 0 #1D4ED8; font-weight: 800; }
.nav-search-btn { background: rgba(255, 255, 255, .12) !important; border: 1.5px solid rgba(255, 255, 255, .28) !important; color: #FFFFFF !important; border-radius: 999px !important; }
.logo { font-family: var(--fx-head); font-size: 16.5px; }
.logo .seal { border: 2px solid rgba(255, 255, 255, .85); border-radius: 50%; transition: transform .35s var(--pop); }
.logo:hover .seal { transform: rotate(15deg) scale(1.08); }

/* Nút bấm Soft-Cartoon 3D: bo tròn, màu tươi tắn, có gờ nổi đáy 3px cùng tông (không viền đen thô) */
.btn {
  font-family: var(--fx-head);
  font-weight: 800;
  font-size: 16px;
  border: 1.5px solid transparent;
  border-radius: 13px;
  padding: 9px 20px;
  letter-spacing: .1px;
  transition: transform .18s var(--pop), box-shadow .18s, background .15s, border-color .15s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(2px); }
.btn-sm { padding: 6px 14px; font-size: 15px; border-radius: 11px; }
.btn-gold { background: linear-gradient(180deg, #93C5FD 0%, #3B82F6 100%); color: #0B1B3F; border-color: #2563EB; box-shadow: 0 3px 0 #1D4ED8, 0 6px 14px rgba(59, 130, 246, .22); }
.btn-gold:hover { background: linear-gradient(180deg, #FDE047 0%, #3B82F6 100%); color: #0B1B3F; box-shadow: 0 5px 0 #1D4ED8, 0 8px 18px rgba(59, 130, 246, .3); }
.btn-blue { background: linear-gradient(180deg, #3B82F6 0%, #2563EB 100%); color: #FFFFFF; border-color: #1D4ED8; box-shadow: 0 3px 0 #1E3A8A, 0 6px 14px rgba(37, 99, 235, .2); }
.btn-blue:hover { background: linear-gradient(180deg, #60A5FA 0%, #2563EB 100%); color: #FFFFFF; box-shadow: 0 5px 0 #1E3A8A, 0 8px 18px rgba(37, 99, 235, .28); }
.btn-green { background: linear-gradient(180deg, #1056B9 0%, #054196 100%); color: #FFFFFF; border-color: #043478; box-shadow: 0 3px 0 #062B5F, 0 6px 14px rgba(59, 139, 247, .22); }
.btn-green:hover { background: linear-gradient(180deg, #34D399 0%, #054196 100%); color: #FFFFFF; box-shadow: 0 5px 0 #062B5F; }
.btn-red { background: linear-gradient(180deg, #3F8AF4 0%, #1D6FE1 100%); color: #FFFFFF; border-color: #125ABE; box-shadow: 0 3px 0 #124D9F, 0 6px 14px rgba(29, 111, 225, .2); }
.btn-red:hover { background: linear-gradient(180deg, #71AAFB 0%, #1D6FE1 100%); color: #FFFFFF; box-shadow: 0 5px 0 #124D9F; }
.btn-navy { background: linear-gradient(180deg, #1E3A8A 0%, #0B1B3F 100%); color: #FFFFFF; border-color: #0B1B3F; box-shadow: 0 3px 0 #061029, 0 6px 14px rgba(11, 27, 63, .18); }
.btn-navy:hover { background: linear-gradient(180deg, #2563EB 0%, #1E3A8A 100%); color: #FFFFFF; box-shadow: 0 5px 0 #0B1B3F; }
.btn-outline, .btn-line { background: #FFFFFF; color: #0B1B3F; border: 1.5px solid #93C5FD; box-shadow: 0 3px 0 #BFDBFE; }
.btn-outline:hover, .btn-line:hover { background: #EFF6FF; color: #0B1B3F; border-color: #3B82F6; box-shadow: 0 4px 0 #93C5FD; }
.btn-ghost { background: rgba(255, 255, 255, .14); color: #fff; border: 1.5px solid rgba(255, 255, 255, .45); box-shadow: 0 3px 0 rgba(0, 0, 0, .25); }
.btn-ghost:hover { background: #fff; color: var(--navy); border-color: #fff; }

/* Thẻ, nhãn, chip: có sắc độ pastel tươi sáng và gờ đáy mềm */
.card { border: 1.5px solid #CBD5E1; border-radius: 20px; box-shadow: 0 4px 0 #E2E8F0, 0 10px 24px rgba(15, 23, 42, .05); background: #FFFFFF; }
.pill, .badge, .vc-chip, .ph-chip { border: 1.5px solid #BFDBFE; font-weight: 700; box-shadow: 0 1.5px 0 rgba(15, 23, 42, .06); }
.pill.free, .badge-green { background: #DBEAFE; color: #1E40AF; border-color: #86EFAC; }
.pill.paid, .badge-gold { background: #DBEAFE; color: #1E40AF; border-color: #93C5FD; }
.badge-blue { background: #DBEAFE; color: #1E40AF; border-color: #93C5FD; }
.badge-red, .pill.red { background: #E4EFFF; color: #124D9F; border-color: #A4C9FD; }
.eyebrow { background: linear-gradient(135deg, #DBEAFE, #BFDBFE); color: #1E40AF; border: 1.5px solid #3B82F6; border-radius: 999px; padding: 3px 13px; box-shadow: 0 2px 0 #3B82F6; font-family: var(--fx-head); font-weight: 800; letter-spacing: .6px; }
/* Gạch chân trang trí tiêu đề học hỏi khoahoc12 + cartoon */
.sec-head h2::after, .center > h2::after {
  content: "";
  display: block;
  width: 68px;
  height: 5px;
  border-radius: 999px;
  margin: 8px auto 0;
  background: linear-gradient(90deg, #1056B9 0%, #3B82F6 100%);
}
table.t th { background: #DBEAFE; color: #0B1B3F; }
.field input, .field select, .field textarea { border: 1.5px solid #94A3B8; border-radius: 12px; box-shadow: inset 0 1px 2px rgba(15, 23, 42, .04); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: #2563EB; box-shadow: 0 0 0 3px rgba(37, 99, 235, .16); }

/* Thẻ Visual (rqx-vcard): kết hợp bố cục thẳng hiện đại + nền pastel chuyển sắc nhẹ & icon cartoon nổi */
.rqx-vcard {
  transform: none;
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #EFF6FF 0%, #FFFFFF 46%);
  border: 1.5px solid #BFDBFE;
  border-top: 4px solid #2563EB;
  border-radius: 20px;
  box-shadow: 0 4px 0 #BFDBFE, 0 10px 24px rgba(15, 23, 42, .05);
  padding: 20px;
  gap: 10px;
  transition: transform .22s var(--pop), box-shadow .22s, border-color .18s;
}
.rqx-vcard::before {
  content: "";
  position: absolute;
  right: -24px;
  top: -24px;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .8) 0%, rgba(255, 255, 255, 0) 70%);
  pointer-events: none;
}
.rqx-vcard.gold {
  background: linear-gradient(180deg, #EFF6FF 0%, #FFFFFF 48%);
  border-color: #BFDBFE;
  border-top: 4px solid #3B82F6;
  box-shadow: 0 4px 0 #BFDBFE, 0 10px 24px rgba(59, 130, 246, .07);
}
.rqx-vcard.green {
  background: linear-gradient(180deg, #ECFDF5 0%, #FFFFFF 48%);
  border-color: #A7F3D0;
  border-top: 4px solid #1056B9;
  box-shadow: 0 4px 0 #A7F3D0, 0 10px 24px rgba(59, 139, 247, .07);
}
.rqx-vcard.red {
  background: linear-gradient(180deg, #F1F7FF 0%, #FFFFFF 48%);
  border-color: #CDE1FE;
  border-top: 4px solid #1D6FE1;
  box-shadow: 0 4px 0 #CDE1FE, 0 10px 24px rgba(29, 111, 225, .06);
}
.rqx-vcard.navy {
  background: linear-gradient(180deg, #EEF2FF 0%, #FFFFFF 48%);
  border-color: #C7D2FE;
  border-top: 4px solid #1E3A8A;
  box-shadow: 0 4px 0 #C7D2FE, 0 10px 24px rgba(30, 58, 138, .06);
}
/* Tự động phối màu xen kẽ cho lưới thẻ không gắn class màu riêng */
.rqx-vgrid > .rqx-vcard:not(.gold):not(.red):not(.green):not(.navy):nth-child(3n+2) {
  background: linear-gradient(180deg, #ECFDF5 0%, #FFFFFF 48%);
  border-color: #A7F3D0;
  border-top-color: #1056B9;
  box-shadow: 0 4px 0 #A7F3D0, 0 10px 24px rgba(59, 139, 247, .06);
}
.rqx-vgrid > .rqx-vcard:not(.gold):not(.red):not(.green):not(.navy):nth-child(3n) {
  background: linear-gradient(180deg, #FFF7ED 0%, #FFFFFF 48%);
  border-color: #BFDBFE;
  border-top-color: #0B6CF3;
  box-shadow: 0 4px 0 #BFDBFE, 0 10px 24px rgba(249, 115, 22, .06);
}
.rqx-vcard:hover, .rqx-vgrid > .rqx-vcard:hover {
  transform: translateY(-4px);
  box-shadow: 0 7px 0 #93C5FD, 0 16px 32px rgba(15, 23, 42, .1);
}
.rqx-vcard.gold:hover { box-shadow: 0 7px 0 #93C5FD, 0 16px 32px rgba(59, 130, 246, .12); }
.rqx-vcard.green:hover { box-shadow: 0 7px 0 #6EE7B7, 0 16px 32px rgba(59, 139, 247, .12); }
.rqx-vcard.red:hover { box-shadow: 0 7px 0 #A4C9FD, 0 16px 32px rgba(29, 111, 225, .12); }

.rqx-vcard .vc-ic {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, #DBEAFE, #EFF6FF);
  border: 1.5px solid #93C5FD;
  box-shadow: 0 3px 0 #BFDBFE;
  font-size: 24px;
  transform: rotate(-3deg);
  transition: transform .25s var(--pop);
}
.rqx-vcard.gold .vc-ic { background: linear-gradient(135deg, #DBEAFE, #EFF6FF); border-color: #3B82F6; box-shadow: 0 3px 0 #BFDBFE; }
.rqx-vcard.green .vc-ic { background: linear-gradient(135deg, #D1FAE5, #ECFDF5); border-color: #1056B9; box-shadow: 0 3px 0 #A7F3D0; }
.rqx-vcard.red .vc-ic { background: linear-gradient(135deg, #E4EFFF, #F1F7FF); border-color: #3F8AF4; box-shadow: 0 3px 0 #CDE1FE; }
.rqx-vcard:hover .vc-ic { transform: rotate(4deg) scale(1.08); }
.rqx-vcard h3 { font-size: 19px; line-height: 1.28; font-weight: 800; color: #0B1B3F; }
.rqx-vcard p { font-size: 15.5px; color: #334155; line-height: 1.55; }
.rqx-vcard .vc-chip { background: #FFFFFF; color: #1E3A8A; font-size: 13.5px; border: 1.5px solid #BFDBFE; }
.cx-clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; }
.cx-clamp.cx-open { display: block; -webkit-line-clamp: unset; }

/* Thanh Tab con (rqx-subbar): nút viên thuốc có gờ 3D nhẹ, tab đang mở nổi bật màu Ngọc lục bảo / Vàng */
.rqx-subbar { background: rgba(255, 255, 255, .95); border-bottom: 2px solid #DCE6F7; box-shadow: 0 4px 14px rgba(15, 23, 42, .05); padding: 8px 0; }
.rqx-subbar .wrap { padding-top: 3px; padding-bottom: 5px; }
.rqx-stab {
  font-family: var(--fx-head);
  font-size: 15.5px;
  font-weight: 800;
  background: #FFFFFF;
  color: #1E293B;
  border: 1.5px solid #CBD5E1;
  border-radius: 999px;
  box-shadow: 0 3px 0 #CBD5E1;
  padding: 6px 15px;
  transition: transform .18s var(--pop), box-shadow .18s, background .15s, border-color .15s;
}
.rqx-stab:hover { transform: translateY(-2px); background: #EFF6FF; color: #0B1B3F; border-color: #3B82F6; box-shadow: 0 4px 0 #93C5FD; }
.rqx-stab.on {
  background: linear-gradient(135deg, #0B6CF3 0%, #0957C3 100%);
  color: #FFFFFF;
  border-color: #062B5F;
  box-shadow: 0 3px 0 #06244E, 0 6px 14px rgba(11, 108, 243, .22);
  transform: none;
}
.rqx-stab .cnt { background: #E2E8F0; color: #0B1B3F; font-weight: 800; }
.rqx-stab.on .cnt { background: #93C5FD; color: #0B1B3F; }
/* Riêng nút tab YCT Kids luôn có điểm nhấn Cartoon vàng cam dễ nhận diện */
.rqx-stab[data-target="yct"] {
  background: #EFF6FF;
  border: 2px solid #3B82F6;
  box-shadow: 0 3px 0 #2563EB;
  color: #1E40AF;
}
.rqx-stab[data-target="yct"].on {
  background: linear-gradient(135deg, #93C5FD 0%, #3B82F6 100%);
  color: #0B1B3F;
  border: 2.5px solid #0B1B3F;
  box-shadow: 0 4px 0 #0B1B3F;
}
.rqx-stab[data-target="yct"].on .cnt { background: #0B1B3F; color: #93C5FD; }
.rqx-subpane { animation: cxPaneIn .3s ease; }
@keyframes cxPaneIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Đầu trang con (pagehead): chuyển sắc Navy - Xanh ngọc hiện đại (như khoahoc12) + lượn sóng mềm ở đáy */
.pagehead {
  padding: 28px 0 42px;
  background: radial-gradient(900px 320px at 85% 0%, rgba(59, 139, 247, .35), transparent 65%),
              radial-gradient(650px 260px at 12% 100%, rgba(59, 130, 246, .22), transparent 60%),
              linear-gradient(135deg, #0B1B3F 0%, #163A70 52%, #0D3A7A 100%);
  border-bottom: 0;
  position: relative;
}
.pagehead::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 24px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0 24 C240 52 480 0 720 22 S1140 48 1440 18 V48 H0Z' fill='%23F4F8FB'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat;
  pointer-events: none;
}
.pagehead h1 { max-width: 32ch; font-size: clamp(25px, 3.2vw, 36px); font-weight: 800; }
.ph-chip { background: rgba(255, 255, 255, .14); color: #FFFFFF; border: 1.5px solid rgba(255, 255, 255, .28); box-shadow: 0 2px 0 rgba(0, 0, 0, .18); }
.ph-chip b { color: #93C5FD; }

/* Ẩn icon bay lơ lửng gây rối ở các trang thường, nhưng giữ lại bộ 3 Linh vật đáng yêu ở Hero */
.cx-deco { display: none !important; }
.cx-mascots { display: flex; align-items: stretch; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.cx-mas, .cx-mas-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  position: relative;
  text-decoration: none;
  padding: 14px 12px 10px;
  border-radius: 18px;
  border: 2px solid #0B1B3F;
  background: linear-gradient(180deg, #FFFFFF 0%, #EFF6FF 100%);
  box-shadow: 0 4px 0 #0B1B3F, 0 8px 18px rgba(15, 23, 42, .08);
  transition: transform .22s var(--pop), box-shadow .22s;
}
.cx-t2.cx-mas-link { background: linear-gradient(180deg, #FFFFFF 0%, #ECFDF5 100%); }
.cx-t3.cx-mas-link { background: linear-gradient(180deg, #FFFFFF 0%, #EFF6FF 100%); }
.cx-mas-link:hover { transform: translateY(-4px) rotate(-1deg); box-shadow: 0 7px 0 #0B1B3F, 0 12px 24px rgba(15, 23, 42, .14); }
.cx-mas svg, .cx-mas-link svg { width: 78px; height: auto; animation: cxBob 3.6s ease-in-out infinite; transform-origin: 50% 100%; }
.cx-t2 svg { animation-delay: -1.2s; }
.cx-t3 svg { animation-delay: -2.4s; }
@keyframes cxBob { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-5px) rotate(1deg); } }
.cx-eye { transform-box: fill-box; transform-origin: center; animation: cxBlink 4.5s infinite; }
@keyframes cxBlink { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }
.cx-mas span, .cx-mas-link span {
  font-family: var(--fx-head);
  font-size: 14px;
  font-weight: 800;
  background: #FFFFFF;
  color: #0B1B3F;
  border: 1.5px solid #0B1B3F;
  border-radius: 999px;
  padding: 1px 10px;
  box-shadow: 0 2px 0 rgba(11, 27, 63, .18);
  white-space: nowrap;
}
.cx-tag {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  font-style: normal;
  font-family: var(--fx-head);
  font-weight: 800;
  font-size: 12.5px;
  line-height: 1.2;
  text-align: center;
  background: linear-gradient(135deg, #93C5FD, #3B82F6);
  color: #0B1B3F;
  border: 1.5px solid #0B1B3F;
  border-radius: 999px;
  padding: 2px 9px;
  box-shadow: 0 2px 0 #0B1B3F;
  white-space: nowrap;
}
.cx-t3 .cx-tag { background: linear-gradient(135deg, #1056B9, #054196); color: #fff; }

/* Hộp thoại, lịch gợi ý, chân trang */
.modal .box { border: 2px solid #0B1B3F; border-radius: 22px; box-shadow: 0 6px 0 #0B1B3F, 0 20px 50px rgba(15, 23, 42, .25); }
.rqx-mob-bar { background: var(--navy); border-top: 2.5px solid var(--gold); }
.rqx-fold { background: linear-gradient(90deg, #EFF6FF 0%, #DBEAFE 100%); border: 1.5px solid #3B82F6; border-radius: 16px; padding: 11px 16px; box-shadow: 0 3px 0 #BFDBFE; }
.rqx-fold > summary { font-family: var(--fx-head); font-size: 17px; font-weight: 800; color: #1E3A8A; }
.rqx-fold > summary::after { background: #3B82F6; color: #FFFFFF; border: 1.5px solid #1D4ED8; font-weight: 800; box-shadow: 0 2px 0 #1D4ED8; }
footer.site { border-top: 4px solid var(--gold); }
footer.site h4 { font-family: var(--fx-head); font-size: 18px; }

/* Câu hỏi trắc nghiệm */
.q-text { font-family: var(--fx-head); font-size: 19px; }
.q-opt { background: #FFFFFF; border: 1.5px solid #93C5FD; border-radius: 12px; box-shadow: 0 3px 0 #BFDBFE; transition: transform .15s var(--pop), box-shadow .15s, background .15s; }
.q-opt:hover { background: #EFF6FF; border-color: #3B82F6; transform: translateY(-2px); box-shadow: 0 4px 0 #93C5FD; }

/* Thẻ danh sách bài học, thư viện, phòng thi (Mix Style: có màu sắc phân biệt + gờ nổi mềm) */
body .lc, body .level, body .course-panel, body .portal-card, body .cpanel, body .yt-free-card {
  background: #FFFFFF;
  border: 1.5px solid #CBD5E1;
  border-radius: 20px;
  box-shadow: 0 4px 0 #DCE6F7, 0 10px 24px rgba(15, 23, 42, .05);
}
body .lib-grid .lc:nth-child(3n+1) { background: linear-gradient(180deg, #EFF6FF 0%, #FFFFFF 42%); border-top: 4px solid #2563EB; border-color: #BFDBFE; box-shadow: 0 4px 0 #BFDBFE, 0 8px 20px rgba(37, 99, 235, .05); }
body .lib-grid .lc:nth-child(3n+2) { background: linear-gradient(180deg, #EFF6FF 0%, #FFFFFF 42%); border-top: 4px solid #3B82F6; border-color: #BFDBFE; box-shadow: 0 4px 0 #BFDBFE, 0 8px 20px rgba(59, 130, 246, .05); }
body .lib-grid .lc:nth-child(3n) { background: linear-gradient(180deg, #ECFDF5 0%, #FFFFFF 42%); border-top: 4px solid #1056B9; border-color: #A7F3D0; box-shadow: 0 4px 0 #A7F3D0, 0 8px 20px rgba(59, 139, 247, .05); }
body .lc { transition: transform .2s var(--pop), box-shadow .2s; }
body .lc:hover { transform: translateY(-4px); box-shadow: 0 7px 0 #93C5FD, 0 14px 28px rgba(15, 23, 42, .1); }
body .lc-em {
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  border: 1.5px solid #93C5FD;
  border-radius: 14px;
  box-shadow: 0 3px 0 #BFDBFE;
  font-size: 23px;
  transform: rotate(-3deg);
  transition: transform .25s var(--pop);
}
body .lc:hover .lc-em { transform: rotate(5deg) scale(1.08); }
body .lc h3 { font-size: 18px; line-height: 1.3; }

body .l-card, body .ex, body .job-row, body .citem, body .lv-guide-box {
  background: #FFFFFF;
  border: 1.5px solid #CBD5E1;
  border-radius: 15px;
  box-shadow: 0 3px 0 #E2E8F0;
  transition: transform .18s var(--pop), border-color .15s, box-shadow .18s, background .15s;
}
body .l-card:hover, body .ex:hover, body .job-row:hover, body .citem:hover {
  background: #FFFDF7;
  border-color: #3B82F6;
  transform: translateY(-2px);
  box-shadow: 0 5px 0 #BFDBFE, 0 8px 18px rgba(15, 23, 42, .06);
}
body .l-no {
  background: linear-gradient(135deg, #DBEAFE, #BFDBFE);
  color: #1E3A8A;
  border: 1.5px solid #3B82F6;
  font-weight: 800;
  border-radius: 999px;
  padding: 2px 10px;
  box-shadow: 0 1.5px 0 #2563EB;
}
body .l-title { font-family: var(--fx-head); font-size: 17.5px; color: #0B1B3F; }
body .l-title .zh { color: #105DC8; font-weight: 900; }

/* Các chip trong bài học có màu phân biệt rõ ràng + gờ nổi mềm */
body .l-chip, body .chip {
  border: 1.5px solid #6EE7B7;
  background: #ECFDF5;
  color: #062B5F;
  font-weight: 700;
  box-shadow: 0 2px 0 #A7F3D0;
  border-radius: 999px;
  transition: transform .15s var(--pop), box-shadow .15s, background .15s;
}
body .l-chip.slide {
  background: #EFF6FF;
  border-color: #93C5FD;
  color: #1E40AF;
  box-shadow: 0 2px 0 #BFDBFE;
}
body .l-chip.ex {
  background: #DBEAFE;
  border-color: #60A5FA;
  color: #1E40AF;
  box-shadow: 0 2px 0 #BFDBFE;
}
body .l-chip:hover, body .chip:hover {
  transform: translateY(-2px);
  filter: brightness(.97);
}
body .l-chip.hold {
  box-shadow: none;
  border-color: #E2E8F0;
  background: #F8FAFC;
  color: #94A3B8;
  transform: none;
}

body .sub-tabs button, body .lv-btn, body .lvtabs button, body .jtabs button, body .vcat-tabs button {
  font-family: var(--fx-head);
  font-weight: 800;
  background: #FFFFFF;
  color: #0B1B3F;
  border: 1.5px solid #CBD5E1;
  box-shadow: 0 3px 0 #CBD5E1;
  border-radius: 13px;
  transition: transform .18s var(--pop), box-shadow .18s, background .15s, border-color .15s;
}
body .sub-tabs button:hover, body .lv-btn:hover, body .lvtabs button:hover, body .jtabs button:hover, body .vcat-tabs button:hover {
  background: #EFF6FF;
  border-color: #3B82F6;
  transform: translateY(-2px);
  box-shadow: 0 4px 0 #93C5FD;
}
body .sub-tabs button.on, body .lv-btn.on, body .jtabs button.on, body .vcat-tabs button.on {
  background: linear-gradient(135deg, #0B1B3F 0%, #1E3A8A 100%);
  color: #FFFFFF;
  border-color: #0B1B3F;
  box-shadow: 0 3px 0 #3B82F6;
  transform: none;
}
body .lvtabs button.on {
  background: linear-gradient(135deg, #0B6CF3 0%, #054196 100%);
  color: #FFFFFF;
  border-color: #062B5F;
  box-shadow: 0 3px 0 #06244E;
}
body .sub-tabs button.on .ti, body .sub-tabs button.on .ds { color: #FFFFFF; }
body .sub-tabs .n, body .lv-btn .n, body .lv-btn .cnt { background: #EFF6FF; color: #1E3A8A; font-weight: 800; }
body .sub-tabs button.on .n, body .lv-btn.on span:not(.z) { background: #93C5FD; color: #0B1B3F; }
body .lv-btn .z { color: #2563EB; font-weight: 900; }
body .lv-btn.on .z { color: #93C5FD; }
body .filter-bar { background: rgba(255, 255, 255, .96); border-top: 0; border-bottom: 2px solid #E2E8F0; }
body .fsearch, body .fsel, body .jsearch-row input, body .jsearch-row select { border: 1.5px solid #93C5FD; background: #FFFFFF; box-shadow: 0 2px 0 #DBEAFE; }
body .tab-intro { background: #EFF6FF; border: 1.5px dashed #3B82F6; border-radius: 14px; color: #1E3A8A; }
body .notice-bar { border: 1.5px solid #3B82F6; border-radius: 14px; box-shadow: 0 3px 0 #BFDBFE; background: linear-gradient(90deg, #EFF6FF, #DBEAFE); color: #1E3A8A; }

.vc-price { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; text-align: right; flex: 0 0 auto; }
.vc-price s { font-size: 13px; font-weight: 600; color: #64748B; white-space: nowrap; }
.vc-price em { font-style: normal; font-size: 15.5px; font-weight: 800; color: var(--red); white-space: nowrap; }
.vc-top .badge { white-space: nowrap; }
.cn-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.cn-chip { appearance: none; cursor: pointer; font-family: var(--fx-head); font-weight: 700; font-size: 15px; color: #0B1B3F; background: #FFFFFF; border: 1.5px solid #CBD5E1; border-radius: 999px; padding: 6px 14px; box-shadow: 0 2px 0 #CBD5E1; transition: transform .15s var(--pop), background .15s; }
.cn-chip:hover { transform: translateY(-2px); background: #EFF6FF; border-color: #3B82F6; }
.cn-chip.on { background: linear-gradient(135deg, #93C5FD, #3B82F6); color: #0B1B3F; border-color: #2563EB; box-shadow: 0 2px 0 #1D4ED8; }

/* Nút & thẻ Tư vấn lộ trình góc trái: tươi tắn, gọn gàng, không đè lên nút Góp ý */
.rqx-rm-pill {
  padding: 8px 15px;
  font-size: 14px;
  font-family: var(--fx-head);
  font-weight: 800;
  color: #0B1B3F;
  background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
  border: 1.5px solid #3B82F6;
  border-radius: 999px;
  box-shadow: 0 3px 0 #2563EB, 0 6px 16px rgba(15, 23, 42, .12);
  animation: none !important;
  left: 14px;
  bottom: 14px;
}
.rqx-rm-pill:hover { transform: translateY(-2px); background: #DBEAFE; border-color: #2563EB; color: #0B1B3F; box-shadow: 0 5px 0 #1D4ED8; }
.rqx-rm-pill .ic { font-size: 18px; animation: none !important; }
.rqx-rm-pill .dot { width: 8px; height: 8px; background: #1056B9; border: 0; box-shadow: 0 0 0 3px rgba(59, 139, 247, .25); animation: none !important; }
.rqx-rm-pill::before, .rqx-rm-pill::after { display: none !important; }

.rqx-rm-card {
  width: 268px; padding: 14px 16px; min-height: 0;
  display: flex; flex-direction: column; align-items: stretch;
  background: linear-gradient(180deg, #EFF6FF 0%, #FFFFFF 45%);
  color: #0F172A; border: 2px solid #3B82F6; border-radius: 20px; box-shadow: 0 5px 0 #2563EB, 0 14px 32px rgba(15, 23, 42, .16);
  animation: none !important;
}
.rqx-rm-card .rqx-rm-badge { background: #DBEAFE; color: #1E40AF; border: 1px solid #3B82F6; animation: none !important; }
.rqx-rm-card .rqx-rm-min { background: #DBEAFE; color: #1E3A8A; }
.rqx-rm-card .rqx-rm-min:hover { background: #BFDBFE; color: #0F172A; }
.rqx-rm-mascot { width: 50px; height: 50px; margin: 2px auto 6px; display: grid; place-items: center; font-size: 27px; background: #DBEAFE; border: 2px solid #3B82F6; border-radius: 50%; box-shadow: 0 3px 0 #2563EB; animation: none !important; }
.rqx-rm-title { margin: 0 0 8px; text-align: center; color: #0B1B3F; font-family: var(--fx-head); font-size: 17.5px; line-height: 1.3; font-weight: 800; text-shadow: none; }
.rqx-rm-points { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }
.rqx-rm-points li { display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 1.35; font-weight: 600; color: #334155; background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 10px; padding: 6px 10px; }
.rqx-rm-points li span { font-size: 17px; flex: 0 0 auto; }
.rqx-rm-card .rqx-rm-btns { grid-template-columns: 1fr; margin-top: auto; gap: 7px; }
.rqx-rm-card .rqx-rm-btns button { padding: 8px 10px; font-size: 14.5px; border-radius: 10px; }
.rqx-rm-card .rqx-rm-btns .b-gold { background: linear-gradient(180deg, #93C5FD, #3B82F6); color: #0B1B3F; border: 1.5px solid #2563EB; box-shadow: 0 3px 0 #1D4ED8; animation: none !important; }
.rqx-rm-card .rqx-rm-btns .b-line { background: #FFFFFF; color: #1E293B; border: 1.5px solid #CBD5E1; box-shadow: 0 2px 0 #CBD5E1; }

.rqx-rm-ticker { overflow: hidden; border-radius: 999px; margin: 8px 0 0; border: 1px solid #BFDBFE; background: #EFF6FF; color: #1E40AF; font-weight: 700; font-size: 13.5px; line-height: 1; box-shadow: none; }
.rqx-rm-ticker-track { display: flex; width: max-content; animation: rmTicker 28s linear infinite; }
.rqx-rm-ticker-track span { flex: 0 0 auto; white-space: nowrap; padding: 7px 0; }
.rqx-rm-ticker.head { margin: 8px 0 2px; background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .25); color: #DBEAFE; }
.rqx-rm-ticker.card { margin: 0 0 10px; font-size: 13px; }
@keyframes rmTicker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.rqx-rm-flex { display: flex; align-items: center; gap: 10px; margin: -4px 0 12px; padding: 9px 12px; border-radius: 12px; border: 1.5px solid #86EFAC; background: #F0FDF4; color: #1E40AF; }
.rqx-rm-flex > span { font-size: 21px; display: inline-block; }
.rqx-rm-flex b { display: block; font-size: 14.5px; }
.rqx-rm-flex i { display: block; font-style: normal; font-size: 13.5px; }

@media (max-width: 640px) {
  .rqx-rm-pill { padding: 0; width: 44px; height: 44px; justify-content: center; bottom: 72px; }
  .rqx-rm-pill .tx, .rqx-rm-pill .dot { display: none; }
}

/* ==========================================================================
   NHÁNH YCT KIDS (#yct), 04/11/2026 22:13: bỏ chất hoạt hình (viền dày, bóng khối cứng, nền chấm bi, chữ nghiêng lệch).
   Giao diện gọn theo quy ước màu site: trung tính + xanh thương hiệu #0B6CF3 + điểm nhấn đỏ #105DC8 (tối đa 3 màu).
   Hai cổng Trẻ nhỏ / Trẻ lớn: .yct2-*.
   ========================================================================== */
#yct { background: #F7F9FC; }
#yct h2 { font-size: clamp(22px, 2.6vw, 28px); color: #0B1B3F; margin: 0 0 6px; }
.yct2-head p { margin: 0 0 16px; color: #475569; font-size: 15.5px; }
.yct2-gates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 14px; }
.yct2-gate { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left; padding: 18px 20px; background: #FFFFFF; border: 1px solid #D5E3FA; border-radius: 16px; box-shadow: 0 1px 3px rgba(11, 27, 63, .06); cursor: pointer; font-family: inherit; color: #0B1B3F; transition: border-color .15s, box-shadow .15s; min-width: 0; }
.yct2-gate:hover { border-color: #9CC4FD; box-shadow: 0 6px 18px rgba(11, 108, 243, .10); }
.yct2-gate:focus-visible { outline: 3px solid #9CC4FD; outline-offset: 2px; }
.yct2-gate.on { border: 2px solid #0B6CF3; padding: 17px 19px; background: #F5F9FF; }
.yct2-ic { width: 64px; height: 64px; border-radius: 14px; background: #E7F0FE; display: grid; place-items: center; margin-bottom: 4px; }
.yct2-age { font-size: 12.5px; font-weight: 700; color: #0450C2; background: #E7F0FE; border-radius: 999px; padding: 2px 10px; }
.yct2-name { font-size: 18.5px; font-weight: 800; color: #0B1B3F; line-height: 1.3; }
.yct2-desc { font-size: 14.5px; color: #475569; line-height: 1.5; }
.yct2-go { margin-top: 6px; font-size: 14px; font-weight: 700; color: #0B6CF3; border: 1px solid #9CC4FD; border-radius: 999px; padding: 6px 14px; background: #FFFFFF; }
.yct2-gate.on .yct2-go { background: #0B6CF3; color: #FFFFFF; border-color: #0B6CF3; }
.yct2-gates.da-chon .yct2-gate:not(.on) { opacity: .88; }
.yct2-unify { margin: 0 0 14px; padding: 10px 14px; border-left: 3px solid #0B6CF3; background: #FFFFFF; border-radius: 0 10px 10px 0; color: #334155; font-size: 14.5px; line-height: 1.55; }
.yct2-cur { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; font-size: 14.5px; color: #334155; }
.yct2-cur[hidden] { display: none; }
.yct2-swap { border: 1px solid #0B6CF3; background: #FFFFFF; color: #0B6CF3; font-weight: 700; font-size: 13.5px; padding: 7px 14px; border-radius: 999px; cursor: pointer; font-family: inherit; }
.yct2-swap:hover { background: #0B6CF3; color: #FFFFFF; }
#yct #kidLvBar .lv-btn { background: #FFFFFF; color: #0B1B3F; border: 1px solid #D5E3FA; border-radius: 12px; box-shadow: none; transform: none; font-weight: 700; }
#yct #kidLvBar .lv-btn:hover { border-color: #9CC4FD; transform: none; box-shadow: none; }
#yct #kidLvBar .lv-btn.on { background: #E7F0FE; border-color: #0B6CF3; color: #0B1B3F; transform: none; box-shadow: none; }
#yct #kidLvBar .lv-btn .z { color: #105DC8; }
#yct #kidLvBar .lv-btn .pill { font-size: 12px; padding: 1px 7px; background: #F1F5F9; color: #475569; border: 0; }
#yct #kidLvBar .lv-btn.on .pill { background: #FFFFFF; color: #0450C2; }
#yct #kidPanel { background: #FFFFFF; border: 1px solid #D5E3FA; border-radius: 16px; box-shadow: 0 1px 3px rgba(11, 27, 63, .06); padding: 20px; }
#yct #kidPanel .rqx-fold { background: #F7F9FC; border: 1px solid #E2E8F0; border-radius: 12px; box-shadow: none; }
#yct #kidPanel .l-card { background: #FFFFFF; border: 1px solid #E2E8F0; border-radius: 12px; box-shadow: none; transform: none; }
#yct #kidPanel .l-card:hover { border-color: #9CC4FD; transform: none; box-shadow: 0 4px 12px rgba(11, 108, 243, .08); }
#yct #kidPanel .l-card.dang { border-color: #0B6CF3; background: #F5F9FF; }
#yct #kidPanel .l-no { background: #E7F0FE; color: #0450C2; border: 0; box-shadow: none; }
#yct #kidPanel .l-title { color: #0B1B3F; font-weight: 700; }
#yct #kidPanel .l-chip { border: 1px solid #D5E3FA; border-radius: 999px; box-shadow: none; transform: none; background: #FFFFFF; color: #0B1B3F; font-weight: 600; }
#yct #kidPanel .l-chip:hover { border-color: #0B6CF3; transform: none; box-shadow: none; }
#yct #kidPanel .l-chip.vao { background: #0B6CF3; border-color: #0B6CF3; color: #FFFFFF; font-weight: 700; }
#yct #kidPanel .l-chip.vao:hover { background: #0450C2; }
#yct #kidPanel .l-chip.cho { background: #F7F9FC; color: #64748B; border-style: dashed; cursor: default; }
#yct #kidPanel .btn { box-shadow: none; transform: none; }
@media (max-width: 720px) {
  .yct2-gates { grid-template-columns: 1fr; gap: 12px; }
  .yct2-gate { padding: 14px 16px; }
  .yct2-gate.on { padding: 13px 15px; }
  .yct2-ic { width: 52px; height: 52px; }
  .yct2-ic svg { width: 44px; height: 44px; }
  #yct #kidPanel { padding: 14px; }
}

/* Nút 在越华人 đứng riêng bên trái cạnh logo: rõ ràng cho người TQ, bỏ mũi tên trùng */
.nav .zh-solo { position: relative; overflow: hidden; isolation: isolate; display: inline-flex; flex-direction: column; justify-content: center; margin-left: 12px; padding: 4px 16px !important; border-radius: 10px; background: linear-gradient(135deg, #0B6CF3, #0957C3); color: #FFF8E7; border: 1.5px solid #BFDBFE; font-family: var(--zh), Arial, sans-serif; text-decoration: none; line-height: 1.15; }
.nav .zh-solo b { font-size: 18px !important; letter-spacing: 1.5px; }
.nav .zh-solo small { display: block !important; font-size: 11.5px !important; color: #BFDBFE !important; font-weight: 600; white-space: nowrap; }
.nav .zh-solo:hover { background: linear-gradient(135deg, #0957C3, #0846A0); }
@media (max-width: 1180px) { .nav .zh-solo { margin-left: auto; margin-right: 8px; padding: 4px 10px !important; } .nav .zh-solo b { font-size: 16px !important; } .nav .zh-solo small { font-size: 10.5px !important; } }
@media (max-width: 480px) { .nav .zh-solo small { font-size: 9.5px !important; } .nav .zh-solo { padding: 3px 8px !important; } }

/* ===== Thanh 2 nút điều hướng nhanh ở mọi trang: kết hợp gờ nổi 3D mềm + điểm nhấn vàng/ngọc ấm áp (02/11/2026) ===== */
:root { --backbar-h: 38px; }
.ls-nav, .classroom-bar, .xbar, .toc, .preview-bar, .filter-bar, .rqx-subbar {
  top: calc(var(--nav-h, 46px) + var(--backbar-h, 38px)) !important;
}
.rqx-backbar {
  position: sticky;
  top: var(--nav-h, 46px);
  z-index: 49;
  min-height: var(--backbar-h, 38px);
  background: linear-gradient(90deg, #F8FAFC 0%, #EFF6FF 50%, #ECFDF5 100%);
  border-bottom: 1.5px solid #CBD5E1;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .04);
  display: flex;
  align-items: center;
}
.rqx-bb-wrap {
  width: 100%;
  max-width: 1400px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 4px;
  padding-bottom: 4px;
}
.rqx-bb-btns {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}
.rqx-bb-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: 999px;
  font-family: var(--fx-head);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.25;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  background: #FFFFFF;
  color: #0B1B3F;
  border: 1.5px solid #94A3B8;
  box-shadow: 0 2px 0 #CBD5E1;
  transition: transform .15s var(--pop), background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.rqx-bb-btn:hover {
  background: #EFF6FF;
  color: #1E3A8A;
  border-color: #3B82F6;
  transform: translateY(-1px);
  box-shadow: 0 3px 0 #93C5FD;
}
.rqx-bb-home {
  background: linear-gradient(135deg, #DBEAFE 0%, #BFDBFE 100%);
  color: #0B1B3F;
  border-color: #3B82F6;
  box-shadow: 0 2px 0 #2563EB;
}
.rqx-bb-home:hover {
  background: linear-gradient(135deg, #BFDBFE 0%, #93C5FD 100%);
  color: #0B1B3F;
  border-color: #2563EB;
  box-shadow: 0 3px 0 #1D4ED8;
}
.rqx-bb-subhome {
  background: #DBEAFE;
  color: #1E40AF;
  border: 1.5px solid #4ADE80;
  box-shadow: 0 2px 0 #86EFAC;
}
.rqx-bb-subhome:hover {
  background: #BBF7D0;
  color: #14532D !important;
}
.rqx-bb-loc {
  font-size: 13.5px;
  font-weight: 600;
  color: #64748B;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 48%;
}
.rqx-bb-loc span {
  color: #0B1B3F;
  font-weight: 700;
}
@media (max-width: 720px) {
  :root { --backbar-h: 36px; }
  .rqx-bb-loc { display: none; }
  .rqx-bb-wrap { justify-content: flex-start; padding-left: 12px; padding-right: 12px; }
  .rqx-bb-btn { font-size: 13px; padding: 3px 10px; }
}

/* ===== Thanh Tab con nổi bật hơn (rqx-subbar / rqx-stab), 03/11/2026 =====
   Dùng chung mọi trang có thanh Tab con. Nút to hơn, rõ dáng nút bấm, nổi lên khi rê chuột,
   tab đang mở có mũi tên chỉ xuống. Gợi ý "Bấm để xem từng mục" là phần tử tuỳ chọn .rqx-subhint
   (trang nào muốn hiện thì thêm <span class="rqx-subhint"> vào đầu .wrap). Không đổi màu riêng của tab YCT. */
.rqx-subbar { padding: 8px 0 6px; }
.rqx-subbar .wrap { gap: 10px; padding-top: 4px; padding-bottom: 10px; scroll-padding-left: 20px; }
.rqx-stab { font-size: 16px; padding: 10px 18px; min-height: 46px; border-width: 2px; box-shadow: 0 4px 0 #CBD5E1, 0 6px 14px rgba(15, 23, 42, .06); position: relative; }
.rqx-stab:not(.on):not([data-target="yct"]) { background: linear-gradient(180deg, #FFFFFF 0%, #F1F5FF 100%); border-color: #93C5FD; color: #0B1B3F; }
.rqx-stab:not(.on):not([data-target="yct"]):hover { background: #EFF6FF; border-color: #3B82F6; box-shadow: 0 6px 0 #93C5FD, 0 10px 20px rgba(59, 130, 246, .18); }
.rqx-stab:hover { transform: translateY(-3px); }
.rqx-stab:active { transform: translateY(1px); box-shadow: 0 1px 0 #CBD5E1; }
.rqx-stab:focus-visible { outline: 3px solid #3B82F6; outline-offset: 2px; }
.rqx-stab.on { box-shadow: 0 4px 0 #06244E, 0 8px 18px rgba(11, 108, 243, .3); }
.rqx-stab.on::after { content: ""; position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); border: 7px solid transparent; border-top-color: #0957C3; border-bottom: 0; }
.rqx-stab[data-target="yct"].on::after { border-top-color: #0B1B3F; }
.rqx-stab .cnt { font-size: 12.5px; padding: 2px 8px; }
.rqx-subhint { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; font-family: var(--fx-head, Arial, sans-serif); font-size: 14px; font-weight: 800; color: #1E40AF; background: #DBEAFE; border: 1.5px dashed #3B82F6; border-radius: 999px; padding: 6px 12px; white-space: nowrap; }
.rqx-subhint .arr { display: inline-block; animation: rqxHintNudge 1.4s ease-in-out infinite; }
@keyframes rqxHintNudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .rqx-subhint .arr { animation: none; } }
@media (max-width: 720px) {
  .rqx-subbar .wrap { padding-left: 12px; padding-right: 12px; gap: 8px; }
  .rqx-stab { font-size: 14.5px; padding: 8px 14px; min-height: 42px; }
  .rqx-subhint { font-size: 12.5px; padding: 5px 10px; }
}
/* 04/11/2026: thanh Tab con không được cắt mất tab cuối trên máy tính. Từ 721px trở lên cho xuống dòng, căn giữa;
   điện thoại vẫn cuộn ngang như cũ. */
@media (min-width: 721px) {
  /* 05/11/2026 anh Hạnh: thanh tab về 1 hàng. Thu gọn chữ và khoảng đệm cho vừa 1 hàng, quá hẹp thì cuộn ngang. */
  .rqx-subbar .wrap { flex-wrap: nowrap; overflow-x: auto; justify-content: safe center; gap: 6px; max-width: 1400px; }
  .rqx-stab { font-size: 13px; padding: 6px 11px; gap: 5px; }
  .rqx-stab .cnt, .rqx-subbar .rqx-subhint { display: none; }
}
/* ===== Hết khối Thanh Tab con nổi bật ===== */

/* 03/11/2026: chữ menu trên cùng to lên khoảng 120% cho dễ đọc (anh Hạnh yêu cầu). Thanh menu cao thêm để chữ 2 dòng không bị chật. */
:root { --nav-h: 58px; }
@media (min-width: 1181px) {
  .nav .menu a { font-size: 15px; padding: 5px 8px; }
  .nav .menu > a:not(.cta), .nav .menu > .has-sub > a { line-height: 1.12; }
  .nav .nav-search-btn { font-size: 14.5px; padding: 6px 11px; }
  .nav .menu a.cta, .nav .menu a.study { font-size: 14.5px; }
  .nav .menu .sub-pop a, .nav .menu .acct-pop a, .nav .acct-pop button { font-size: 15.5px; }
}
@media (max-width: 1180px) {
  .nav .menu a { font-size: 16px; }
  .nav .menu .sub-pop a, .nav .menu .sub-pop a:first-child, .nav .menu .sub-pop a:last-child { font-size: 15px; }
  .nav .nav-search-btn { font-size: 15px; }
}

/* 03/11/2026: logo đổi chữ 学 thành RQX (toàn site). Chân trang: bỏ đoạn mô tả dưới logo, cột logo gọn lại,
   khung Đại diện phía Nam lên thành cột riêng ngang hàng với các cột khác. */
.logo .seal.seal-rqx { width: auto; min-width: 40px; height: 28px; padding: 0 8px; border-radius: 999px; font-family: Arial, sans-serif; font-size: 12.5px; font-weight: 900; letter-spacing: .6px; color: #fff; }
.logo:hover .seal.seal-rqx { transform: rotate(-6deg) scale(1.08); }
footer.site .cols { grid-template-columns: auto 1.15fr 1fr 1fr 1fr 1.1fr; gap: 24px; }
footer.site .ft-brand .logo { white-space: nowrap; }
@media (max-width: 1100px) { footer.site .cols { grid-template-columns: 1fr 1fr 1fr; } footer.site .ft-brand { grid-column: 1 / -1; } }
@media (max-width: 760px) { footer.site .cols { grid-template-columns: 1fr 1fr; } }
/* 03/11/2026: nút 在越华人 trên điện thoại không bị xuống dòng, cắt chữ */
.nav .zh-solo b { white-space: nowrap; }
@media (max-width: 640px) { .nav .zh-solo small { display: none !important; } .nav .zh-solo { flex: 0 0 auto; padding: 6px 10px !important; } .nav .zh-solo b { font-size: 15px !important; letter-spacing: .5px; } }
@media (max-width: 360px) { .nav .logo small { display: none; } }
/* 03/11/2026: menu trang 在越华人 (/zh/) không tràn ở màn 1181-1400px */
@media (min-width: 1181px) and (max-width: 1400px) { .nav:has(.zh-home) .menu { gap: 2px; min-width: 0; } .nav:has(.zh-home) .menu a { font-size: 13.5px !important; padding-left: 6px !important; padding-right: 6px !important; } }

/* 04/11/2026: cỡ chữ toàn site còn 90% (thu cả khoảng cách cho cân), trừ Buổi học GV AI (không dùng file này) */
html { zoom: .9; }
.rqx-rm-drawer { height: 100%; }
/* ghi chú nhỏ trên tab Giao thương & Tuyển dụng */
.nav .menu a .nav-note { position: absolute; left: 50%; top: -8px; transform: translateX(-50%); font-size: 9.5px; font-weight: 700; line-height: 1; padding: 2px 6px; border-radius: 6px; background: var(--red); color: #fff; white-space: nowrap; text-shadow: none; pointer-events: none; letter-spacing: 0; }
@media (max-width: 1180px) { .nav .menu a .nav-note { position: static; transform: none; display: inline-block; margin-left: 8px; vertical-align: middle; } }
/* trang chủ: thanh vị trí chỉ còn dòng chữ, điện thoại thì ẩn hẳn */
.rqx-backbar.is-home .rqx-bb-wrap { justify-content: flex-start; }
@media (max-width: 720px) { .rqx-backbar.is-home { display: none; } }
footer.site .ft-rep { line-height: 1.6; }

.pagehead { overflow-x: clip; }
/* 04/11/2026: chữ Trung đi kèm popup Lộ trình (song ngữ Việt - Trung) */

/* 04/11/2026: nút và thẻ Lộ trình nền trong mờ, vẫn nhìn được chữ phía sau */
.rqx-rm-pill { background: rgba(239, 246, 255, 0.76); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.rqx-rm-pill:hover { background: rgba(219, 234, 254, 0.9); }
.rqx-rm-card { background: rgba(255, 255, 255, 0.74); -webkit-backdrop-filter: blur(3px) saturate(1.1); backdrop-filter: blur(3px) saturate(1.1); }
.rqx-rm-points li { background: rgba(248, 250, 252, 0.7); }
.rqx-rm-zhmode .rqx-rm-points a { color: #0B1B3F; text-decoration: none; }
.rqx-rm-zhmode .rqx-rm-points a:hover { color: #1D4ED8; text-decoration: underline; }
.rqx-rm-zhmode .rqx-rm-btns a.b-gold { display: block; text-align: center; padding: 8px 10px; font-size: 14.5px; font-weight: 800; border-radius: 10px; text-decoration: none; background: linear-gradient(180deg, #93C5FD, #3B82F6); color: #0B1B3F; border: 1.5px solid #2563EB; box-shadow: 0 3px 0 #1D4ED8; }

/* 04/11/2026 (anh Hạnh): nút Lộ trình thu thành nút tròn chỉ còn biểu tượng 🧭, xếp dọc với nút Góp ý ở mép trái, rê chuột mới hiện chữ, khỏi che chữ trang */
.rqx-rm-pill { width: 44px; height: 44px; padding: 0; justify-content: center; gap: 0; left: 14px; bottom: 14px; overflow: hidden; white-space: nowrap; transition: width .2s ease, padding .2s ease, background .15s; }
.rqx-rm-pill .dot { position: absolute; top: 4px; right: 4px; width: 7px; height: 7px; }
.rqx-rm-pill .tx { display: none; }
@media (hover: hover) and (min-width: 641px) {
  .rqx-rm-pill:hover, .rqx-rm-pill:focus-visible { width: auto; padding: 0 14px 0 11px; gap: 7px; }
  .rqx-rm-pill:hover .tx, .rqx-rm-pill:focus-visible .tx { display: inline; }
}
@media (max-width: 900px) { .rqx-rm-pill { bottom: 72px; left: 10px; } }

/* 04/11/2026: thanh tab thu gọn (data-collapse) - vào một tab xong chỉ còn tab đó và nút quay lại */
.rqx-subbar .stab-all { display: none; }
.rqx-subbar.collapsed .stab-all { display: inline-flex; background: #fff; color: #1E3A8A; }
.rqx-subbar.collapsed .rqx-stab[data-target]:not(.on) { display: none; }

/* 04/11/2026: trang Khóa học bớt màu - bỏ xanh lá, ngọc và cam, chỉ giữ xanh dương (đỏ chỉ cho thẻ đỏ riêng) */
body.courses-page .rqx-vcard:not(.red) {
  background: linear-gradient(180deg, #EFF6FF 0%, #FFFFFF 48%) !important;
  border-color: #BFDBFE !important;
  border-top-color: var(--brand) !important;
  box-shadow: 0 4px 0 #BFDBFE, 0 10px 24px rgba(37, 99, 235, .06) !important;
}
body.courses-page .rqx-vcard:not(.red):hover { box-shadow: 0 7px 0 #93C5FD, 0 16px 32px rgba(59, 130, 246, .12) !important; }
body.courses-page .rqx-vcard:not(.red) .vc-ic { background: linear-gradient(135deg, #DBEAFE, #EFF6FF) !important; border-color: #3B82F6; box-shadow: 0 3px 0 #BFDBFE; }
body.courses-page .l-chip:not(.slide):not(.ex):not(.hold):not(.vao):not(.cho) {
  background: #F1F5F9;
  border-color: #CBD5E1;
  color: #1E3A8A;
  box-shadow: 0 2px 0 #E2E8F0;
}
body.courses-page .pill.free { background: #DBEAFE; color: #1E3A8A; border-color: #93C5FD; }

/* ===== 04/11/2026: MÀU CHỦ ĐẠO TOÀN SITE = xanh dương tươi #0B6CF3 (chuyển sắc #0565EE -> #2B82FB) =====
   Gom ở cuối file để đổi một chỗ. Navy #0B1B3F giữ cho chữ và nền tối, đỏ chỉ cho điểm nhấn. */
:root {
  --brand: #0B6CF3; --brand-dk: #0450C2; --brand-dk2: #033F9A; --brand-lt: #2B82FB; --brand-sky: #E7F0FE;
  --brand-grad: linear-gradient(135deg, #0565EE 0%, #2B82FB 100%);
  --blue2: #0B6CF3; --gold: #2B82FB; --gold2: #9CC4FD; --sky: #E7F0FE;
}
a { color: var(--brand); }
.btn-blue, .btn-gold {
  background: var(--brand-grad); color: #FFFFFF; border-color: #0565EE;
  box-shadow: 0 3px 0 var(--brand-dk), 0 6px 14px rgba(11, 108, 243, .24);
}
.btn-blue:hover, .btn-gold:hover {
  background: linear-gradient(135deg, #1772F3 0%, #4A93FC 100%); color: #FFFFFF;
  box-shadow: 0 5px 0 var(--brand-dk), 0 8px 18px rgba(11, 108, 243, .32);
}
.rqx-stab.on, body .sub-tabs button.on, body .lv-btn.on, body .jtabs button.on, body .vcat-tabs button.on, body .lvtabs button.on {
  background: var(--brand-grad); color: #FFFFFF; border-color: #0565EE;
  box-shadow: 0 4px 0 var(--brand-dk2), 0 8px 18px rgba(11, 108, 243, .28);
}
.rqx-stab.on::after { border-top-color: #0565EE; }
.rqx-stab.on .cnt, body .sub-tabs button.on .n, body .lv-btn.on span:not(.z) { background: rgba(255, 255, 255, .22); color: #FFFFFF; }
body .lv-btn.on .z { color: #FFFFFF; }
body .lv-btn .z { color: var(--brand); }
.rqx-stab:not(.on):not([data-target="yct"]):hover, body .lv-btn:hover, body .vcat-tabs button:hover, body .sub-tabs button:hover {
  border-color: var(--brand-lt); background: var(--brand-sky);
}
.rqx-stab:focus-visible { outline-color: var(--brand); }
.rqx-vcard, .rqx-vcard.gold, .rqx-vcard.navy { border-top-color: var(--brand); }

/* ===== 04/11/2026: thanh Tab con toàn site - bớt màu, không ghim khi cuộn, nhỏ 1 cỡ chữ =====
   Chỉ 1 màu nhấn #0B6CF3 cho tab đang mở, còn lại trắng/xám nhạt. Giao diện .zh-pro giữ thiết kế riêng (độ ưu tiên cao hơn). */
html body .rqx-subbar { position: static !important; top: auto !important; background: #F7F9FC !important; border-bottom: 1px solid #E3E8EF !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
html body .rqx-stab, html body .rqx-stab:not(.on):not([data-target="yct"]), html body .rqx-stab[data-target="yct"] { background: #fff !important; color: #1E293B !important; border: 1px solid #D5DCE6 !important; box-shadow: none !important; font-size: 15px !important; min-height: 42px; }
html body .rqx-stab:hover, html body .rqx-stab:not(.on):not([data-target="yct"]):hover { background: #F1F5F9 !important; border-color: #B8C2D0 !important; box-shadow: none !important; transform: none !important; }
html body .rqx-stab.on, html body .rqx-stab[data-target="yct"].on { background: #EAF2FE !important; color: #0B1B3F !important; border-color: #0B6CF3 !important; box-shadow: none !important; }
html body .rqx-stab.on::after { border-top-color: #0B6CF3 !important; }
html body .rqx-stab .cnt, html body .rqx-stab.on .cnt, html body .rqx-stab[data-target="yct"].on .cnt { background: #F1F5F9 !important; color: #475569 !important; font-size: 11.5px !important; }
html body .rqx-subhint { color: #475569 !important; background: transparent !important; border: 1px dashed #CBD5E1 !important; font-size: 13px !important; }
@media (max-width: 720px) { html body .rqx-stab, html body .rqx-stab:not(.on):not([data-target="yct"]), html body .rqx-stab[data-target="yct"] { font-size: 13.5px !important; min-height: 38px; } }

/* ===== 04/11/2026: RÀ SOÁT MÀU TOÀN SITE - mỗi trang tối đa 3 màu =====
   Bảng màu: (1) trắng / xám nhạt / chữ đậm, (2) xanh dương #0B6CF3 cùng dải đậm nhạt (gồm navy #0B1B3F),
   (3) đỏ #105DC8 chỉ làm điểm nhấn (dấu RQX, cảnh báo, nút 在越华人). Không dùng xanh lá, ngọc, cam, vàng, tím.
   Báo cáo: du-an/rqxchinese.com/bao-cao/ra-soat-mau-2026-11-04.md */
html body #rqx-beta { background: linear-gradient(90deg, #1C5DB9 0%, #105DC8 35%, #0B6CF3 100%) !important; }
html body .rqx-beta-in { background: linear-gradient(135deg, #105DC8, #0B6CF3) !important; }
html body .nav .zh-solo { background: linear-gradient(135deg, #105DC8, #0A418E) !important; color: #FFFFFF !important; border-color: rgba(255, 255, 255, .55) !important; }
html body .nav .zh-solo:hover { background: linear-gradient(135deg, #1C5DB9, #1D467F) !important; }
html body .nav .zh-solo small, html body .nav .zh-solo b { color: #FFFFFF !important; }
html body .nav .menu a.study { background: rgba(11, 108, 243, .35) !important; color: #FFFFFF !important; border-color: rgba(156, 196, 253, .8) !important; }
html body .nav .menu a.study:hover { background: #0B6CF3 !important; }
html body .rqx-rm-pill .dot { background: #2B82FB !important; box-shadow: 0 0 0 3px rgba(43, 130, 251, .25) !important; }
html body .pill.free, html body .badge-green, html body .badge.badge-green { background: #E7F0FE !important; color: #0450C2 !important; border-color: #9CC4FD !important; }
html body .pagehead { background: radial-gradient(1200px 400px at 80% -20%, rgba(43, 130, 251, .45), transparent), linear-gradient(160deg, #0B1B3F, #0450C2); }
/* 04/11/2026: trang YCT dùng chung đầu trang với các nhánh khác, không đổi nền riêng */
html body.tt-light .pagehead { background: linear-gradient(135deg, #F7F9FC 0%, #E7F0FE 100%); }
html body .btn-green, html body .btn.btn-green { background: linear-gradient(135deg, #0565EE 0%, #2B82FB 100%) !important; color: #FFFFFF !important; border-color: #0565EE !important; }
/* Biến màu cũ (xanh lá / ngọc) trỏ về dải xanh dương */
:root { --green: #0B6CF3; --teal: #0B6CF3; --emerald: #2B82FB; --emerald-dk: #0450C2; --p-green: #E7F0FE; --p-peach: #F7F9FC; --p-purple: #F7F9FC; }
html body .sec-head h2::after, html body .center > h2::after { background: linear-gradient(90deg, #0B6CF3 0%, #9CC4FD 100%) !important; }
html body .rqx-vcard.green, html body .rqx-vcard.gold,
html body .rqx-vgrid > .rqx-vcard:not(.gold):not(.red):not(.green):not(.navy):nth-child(3n+2),
html body .rqx-vgrid > .rqx-vcard:not(.gold):not(.red):not(.green):not(.navy):nth-child(3n) { background: linear-gradient(180deg, #F2F7FF 0%, #FFFFFF 48%) !important; border-color: #D5E3FA !important; border-top-color: #0B6CF3 !important; box-shadow: 0 4px 0 #D5E3FA, 0 10px 24px rgba(11, 108, 243, .06) !important; }
html body .rqx-vcard.green .vc-ic, html body .rqx-vcard.gold .vc-ic { background: linear-gradient(135deg, #E7F0FE, #F7F9FC) !important; border-color: #9CC4FD !important; box-shadow: 0 3px 0 #D5E3FA !important; }
html body .rqx-vcard.green:hover { box-shadow: 0 7px 0 #9CC4FD, 0 16px 32px rgba(11, 108, 243, .12) !important; }
html body .lib-grid .lc, html body .lib-grid .lc:nth-child(3n), html body .lib-grid .lc:nth-child(3n+1), html body .lib-grid .lc:nth-child(3n+2) { background: linear-gradient(180deg, #F2F7FF 0%, #FFFFFF 42%) !important; border-color: #D5E3FA !important; border-top-color: #0B6CF3 !important; box-shadow: 0 4px 0 #D5E3FA, 0 8px 20px rgba(11, 108, 243, .05) !important; }
html body .l-chip, html body .chip { border-color: #9CC4FD !important; background: #E7F0FE !important; box-shadow: 0 2px 0 #D5E3FA !important; }
html body .rqx-bb-subhome { background: #E7F0FE !important; color: #0450C2 !important; border-color: #9CC4FD !important; box-shadow: 0 2px 0 #D5E3FA !important; }
html body .cx-t3 .cx-tag { background: linear-gradient(135deg, #0565EE, #2B82FB) !important; }
html body .q-opt.correct { background: #E7F0FE !important; border-color: #0B6CF3 !important; color: #0B1B3F !important; }
html body .eyebrow { border-color: #9CC4FD !important; box-shadow: 0 2px 0 #9CC4FD !important; }
/* Trang Hướng dẫn, Tài liệu, HSK 3.0, App HSK (CSS riêng nằm trong HTML) */
html body .chip2 { border-color: #D5E3FA !important; color: #0B1B3F !important; }
html body .map-root .node, html body .bundle { background: linear-gradient(135deg, #F2F7FF, #FFFFFF) !important; border-color: #D5E3FA !important; }
html body .bundle .row + .bn { border-top-color: #D5E3FA !important; }
html body .tip.ok, html body .tier .lv.g, html body .callout.ok { background: #E7F0FE !important; color: #0450C2 !important; border-color: #9CC4FD !important; }
html body .kids div { background: linear-gradient(160deg, #F2F7FF, #fff) !important; border-color: #D5E3FA !important; }
html body .kids .y { background: #E7F0FE !important; color: #0450C2 !important; }
html body .mh .ic { background: #E7F0FE !important; }
html body .badge-lv[style*="DCFCE7"] { background: #E7F0FE !important; color: #0450C2 !important; }
html body .cgrp .sep { color: #0450C2 !important; }
html body .freebar > b { color: #0450C2 !important; }
html body [style*="BBF7D0"], html body [style*="F0FDF4"] { background: #F2F7FF !important; border-color: #D5E3FA !important; color: #0B1B3F !important; }
html body [style*="#14532D"], html body [style*="#1E40AF"] { color: #0450C2 !important; }
html body .cpp-card[style*="1B7A20"] { border-left-color: #0B6CF3 !important; background: #F2F7FF !important; }
html body .cpp-code[style*="1B7A20"] { background: #0B6CF3 !important; }
/* Lịch học (thoi-khoa-bieu.js): mã màu ô ngày gom về xanh dương / đỏ / xám, chú thích đổi theo */
html body .tkb-c.k-start { --b: #CBD5E1 !important; --bg: #F7F9FC !important; }
html body .tkb-c.k-lesson { --b: #BFD0F5 !important; --bg: #FFFFFF !important; }
html body .tkb-c.k-review { --b: #2B82FB !important; --bg: #E7F0FE !important; }
html body .tkb-c.k-exam { --b: #A3C5F4 !important; --bg: #F1F7FF !important; }
html body .tkb-c.ok { --b: #0B6CF3 !important; --bg: #D5E3FA !important; }
html body .tkb-c.ok::after { color: #0450C2 !important; }
html body .tkb-pg .tb i { background: linear-gradient(90deg, #0450C2, #2B82FB) !important; }
html body .tkb-legend span[style*="8FD6DE"] { --c: #CBD5E1 !important; }
html body .tkb-legend span[style*="F6C76B"] { --c: #2B82FB !important; }
html body .tkb-legend span[style*="12A150"] { --c: #0B6CF3 !important; }

/* ==========================================================================
   05/11/2026, anh Hạnh: bớt mảng xanh nhạt (chip nền xanh, viền xanh, chữ xanh lặp khắp trang).
   Phần lớn mảng dùng NỀN TRẮNG CHỮ ĐEN, viền xám nhẹ; xanh thương hiệu chỉ giữ cho nút hành động chính (Vào học).
   Không áp vào khu Trẻ nhỏ YCT (#yct.pc-nho) vốn có phong cách hoạt hình riêng.
   ========================================================================== */
html body .l-chip:not(.vao):not(.hold):not(.cho), html body .chip {
  background: #FFFFFF !important; border: 1px solid #D9DEE7 !important; color: #111827 !important;
  box-shadow: 0 1px 0 #E5E7EB !important; font-weight: 600;
}
html body .l-chip:not(.vao):not(.hold):not(.cho):hover, html body .chip:hover { border-color: #0B6CF3 !important; color: #0B1B3F !important; filter: none; }
html body .l-no { background: #F3F4F6 !important; color: #111827 !important; border-color: #E5E7EB !important; box-shadow: none !important; }
html body .rqx-vcard.green, html body .rqx-vcard.gold,
html body .rqx-vgrid > .rqx-vcard:not(.gold):not(.red):not(.green):not(.navy):nth-child(3n+2),
html body .rqx-vgrid > .rqx-vcard:not(.gold):not(.red):not(.green):not(.navy):nth-child(3n),
html body .lib-grid .lc, html body .lib-grid .lc:nth-child(3n), html body .lib-grid .lc:nth-child(3n+1), html body .lib-grid .lc:nth-child(3n+2),
html body .kids div, html body .map-root .node, html body .bundle { background: #FFFFFF !important; }
html body .rqx-bb-subhome { background: #FFFFFF !important; color: #111827 !important; border-color: #D9DEE7 !important; box-shadow: 0 1px 0 #E5E7EB !important; }
html body .l-chip.cho { background: #F9FAFB !important; border: 1px dashed #D1D5DB !important; color: #6B7280 !important; box-shadow: none !important; }

/* 05/11/2026, anh Hạnh: tab cấp 1 (thanh menu) và tab cấp 2 (menu xổ xuống) dùng font Roboto; tab cấp 2 nhỏ hơn 1 cỡ.
   Chữ "Cập nhật hàng ngày" trên tab Giao thương & Tuyển dụng: chữ đỏ thường, bỏ nền. */
.nav .menu a, .nav .nav-search-btn { font-family: Arial, system-ui, -apple-system, "Segoe UI", Arial, sans-serif; }
.nav .menu .sub-pop a { font-weight: 500; }
@media (min-width: 1181px) { .nav .menu .sub-pop a { font-size: 14.5px; } }
@media (max-width: 1180px) { .nav .menu .sub-pop a, .nav .menu .sub-pop a:first-child, .nav .menu .sub-pop a:last-child { font-size: 14px; } }
.nav .menu a .nav-note { background: none; color: #FF5252; padding: 0; border-radius: 0; font-family: Arial, system-ui, sans-serif; font-size: 10.5px; font-weight: 700; }

/* 06/11/2026 21:30 anh dặn: nút 4 Cổng nằm sát logo; các tab luôn hiện ngang (không gập ☰ ở màn 961-1180px) */
.nav .zh-solo { margin-left: 12px !important; margin-right: 0 !important; }
@media (max-width: 1180px) and (min-width: 961px) {
  .nav .wrap { flex-wrap: wrap; height: auto; min-height: var(--nav-h, 46px); padding-top: 4px; padding-bottom: 4px; row-gap: 2px; }
  .nav .burger { display: none !important; }
  .nav .menu { display: flex !important; position: static; flex-direction: row; flex-wrap: wrap; flex-basis: 100%; margin-left: 0; padding: 0 0 4px; background: none !important; border: 0; backdrop-filter: none; max-height: none; overflow: visible; align-items: center; justify-content: flex-start; gap: 3px; }
  .nav .menu a, .nav .menu .nav-search-btn { margin: 0 !important; padding: 5px 9px; font-size: 12.5px !important; min-height: 0; display: inline-flex; width: auto; }
  .nav .menu a.on::after { display: none; }
  .nav .menu a .nav-note { position: absolute; left: 50%; top: -8px; transform: translateX(-50%); margin: 0; }
  .nav .has-sub { display: inline-flex; flex-direction: row; position: relative; }
  .nav .sub-pop { display: none; position: absolute; left: 50%; transform: translateX(-50%); top: 100%; padding: 8px 0 0; }
  .nav .has-sub:hover .sub-pop, .nav .has-sub:focus-within .sub-pop { position: absolute; left: 50%; transform: translateX(-50%); top: 100%; padding: 8px 0 0; z-index: 80; }
  .nav .sub-pop::before { display: block; }
  .nav .has-sub:hover .sub-pop, .nav .has-sub:focus-within .sub-pop { display: flex; flex-direction: column; }
  .nav .menu .sub-pop a, .nav .menu .sub-pop a:first-child, .nav .menu .sub-pop a:last-child { font-size: 13.5px !important; padding: 8px 12px; color: var(--navy); margin: 0 6px !important; }
  .nav .menu .sub-pop a:hover { background: var(--sky); color: var(--navy); }
}

/* 06/11/2026 21:55 sửa lỗi hiển thị header: popup tab đầu không tràn mép trái; Tìm nhanh chỉ còn biểu tượng khi hẹp để tab không gập dòng */
.nav .menu > .has-sub:first-child .sub-pop { left: 0 !important; transform: none !important; }
@media (min-width: 1181px) and (max-width: 1760px) { .nav .nav-search-btn span { display: none; } .nav .wrap { gap: 10px; } }
@media (min-width: 1181px) and (max-width: 1760px) { .nav .menu > a:not(.cta), .nav .menu > .has-sub > a { white-space: nowrap; } }

/* 06/11/2026 22:10 anh dặn: font theo vnexpress.net (nội dung Arial 15px, tiêu đề Merriweather có serif). 22:40: đã khôi phục cỡ chữ như cũ, không giảm 1px nữa */
:root { --fx-head: Arial, "Helvetica Neue", "Noto Sans SC", sans-serif; --fx-body: Arial, "Helvetica Neue", "Noto Sans SC", sans-serif; }
body { font-family: Arial, "Helvetica Neue", "Noto Sans SC", sans-serif; }
h1, h2, h3, .l-title, .q-text, .rqx-rm-title { font-family: Merriweather, Georgia, "Noto Sans SC", serif; letter-spacing: 0; }
h1, h2, h3, .hero h1 { font-family: Merriweather, Georgia, "Noto Sans SC", serif !important; }

/* 06/11/2026 22:30 anh dặn: cụm đầu trang tô màu đậm ở trên, nhạt dần xuống dưới (xanh #2670DB của nút liên hệ) */
.nav { background: #0B1B3F !important; }
.rqx-backbar { background: linear-gradient(180deg, #123A86 0%, #1B58B8 100%) !important; border-bottom: 0 !important; }
.rqx-backbar, .rqx-backbar * { color: #fff; }
.rqx-backbar a, .rqx-backbar button { color: #0B1B3F; }
.prep-quick-strip { background: linear-gradient(180deg, #2670DB 0%, #4786E2 55%, #689DE9 100%) !important; }
.rqx-fast-band { background: linear-gradient(180deg, #A9C7F3 0%, #DCEAFD 100%) !important; }
.rqx-backbar .rqx-bb-where, .rqx-backbar .rqx-bb-wrap > span:not(.rqx-bb-btn) { color: #fff !important; opacity: 1 !important; }
.rqx-backbar .rqx-bb-loc, .rqx-backbar .rqx-bb-loc * { color: #fff !important; opacity: 1 !important; }

/* 06/11/2026 22:50 rà soát: nhãn "Cập nhật hàng ngày" không đè chữ menu; menu Hợp tác không tràn mép phải ở 1181-1600px */
.nav .menu a .nav-note { top: -11px; }
@media (min-width: 1181px) and (max-width: 1600px) { html.rqx-coop .nav .menu a { padding: 5px 6px; } html.rqx-coop .logo small { display: none; } }
@media (min-width: 1181px) and (max-width: 1439px) { html.rqx-coop .nav .menu { flex-wrap: wrap; justify-content: flex-end; row-gap: 2px; min-width: 0; flex: 1 1 auto; } }

/* 07/11/2026 01:50 lỗi hiển thị: ở 1181-1440px (hoặc khi phóng to trình duyệt) hàng tab tràn mép phải. Thu gọn chữ và khoảng đệm để cả hàng nằm gọn 1 dòng. */
@media (min-width: 1181px) and (max-width: 1440px) {
  html:not(.rqx-coop) .nav .menu { min-width: 0; gap: 0; }
  html:not(.rqx-coop) .nav .menu > .has-sub > a,
  html:not(.rqx-coop) .nav .menu > a:not(.cta) { font-size: 13px !important; padding: 4px 6px !important; }
  html:not(.rqx-coop) .nav .menu .nav-search-btn { padding: 5px 8px !important; }
  html:not(.rqx-coop) .nav .menu a.cta { font-size: 13px !important; padding: 5px 9px !important; margin-left: 4px; }
  html:not(.rqx-coop) .logo small { display: none; }
}
@media (min-width: 1181px) and (max-width: 1280px) {
  html:not(.rqx-coop) .nav .menu > .has-sub > a,
  html:not(.rqx-coop) .nav .menu > a:not(.cta) { font-size: 12.5px !important; padding: 4px 5px !important; }
}

/* 07/11/2026: Cổng 3 đổi tên thành "Hợp tác Giao thương Việt - Trung" (dài hơn tên cũ) nên tên ở logo xuống 2 dòng, menu gọn lại để không tràn ngang */
@media (min-width: 1181px) {
  html.rqx-coop .nav .logo > span:last-child { white-space: normal; max-width: 175px; line-height: 1.15; }
  html.rqx-coop .nav .menu a { font-size: 13px; }
}
@media (max-width: 1180px) {
  html.rqx-coop .nav .logo { min-width: 0; }
  html.rqx-coop .nav .logo > span:last-child { white-space: normal; max-width: 200px; line-height: 1.15; }
}
@media (max-width: 480px) { html.rqx-coop .nav .logo small { display: none; } }

/* 07/11/2026 (V3 rà soát): bỏ tab "Khám phá RQX", ô "Góc học tập" cân chữ giữa ô, không xuống dòng */
@media (min-width: 1181px) {
  html body .nav .menu > a.study { display: inline-flex; align-items: center; justify-content: center; text-align: center; white-space: nowrap; line-height: 1.2; padding: 6px 12px !important; min-height: 32px; box-sizing: border-box; }
}

/* ===== Đợt 4 rà soát 07/11/2026 (V12-V16). Bản sao trước khi sửa: site/_bak-ngoai-public/2026-11-07-dot4/ ===== */
/* V13: thẻ "27 Chuyên ngành" ở hero, số và chữ cùng một dòng */
html body.rqx-home .hero-kpi b span, html body .hero-kpi b span[data-cn-count] { display: inline !important; font: inherit !important; color: inherit !important; margin: 0 !important; }
/* V12: nút bật tiếng nằm trong khung chú thích, không che hình video */
.rqx-vcaption .rqx-unmute-btn { position: static !important; pointer-events: auto; box-shadow: none; align-self: flex-start; flex: 0 0 auto; white-space: nowrap; font-size: 13px; padding: 6px 12px; }
html body.rqx-home .rqx-vcaption .rqx-unmute-btn { color: #0B1B3F !important; background: linear-gradient(135deg, #60A5FA, #93C5FD) !important; }
html body.rqx-home .rqx-vcaption .rqx-unmute-btn.unmuted { background: #0B1B3F !important; color: #fff !important; }
/* V14: thanh đáy điện thoại, nhãn không xuống dòng; nút "⋯" gộp Góp ý và Lộ trình */
@media (max-width: 900px) { .rqx-mob-bar a span:not(.ic) { white-space: nowrap; } }
#rqxFabMore { display: none; }
@media (max-width: 640px) {
  body.rqx-fab-col #rqxFabMore { display: flex; position: fixed; left: 10px; bottom: 72px; z-index: 97; width: 40px; height: 40px; border-radius: 50%; align-items: center; justify-content: center; background: #FFFFFF; color: #0B1B3F; border: 1.5px solid #3B82F6; font: 800 20px/1 Arial, sans-serif; box-shadow: 0 6px 16px rgba(11, 27, 63, .22); cursor: pointer; padding: 0; }
  body.rqx-fab-col:not(.rqx-fab-open) #gyBtn, body.rqx-fab-col:not(.rqx-fab-open) .rqx-rm-pill { display: none !important; }
  body.rqx-fab-col.rqx-fab-open #gyBtn { left: 10px !important; bottom: 172px !important; }
  body.rqx-fab-col.rqx-fab-open .rqx-rm-pill { left: 10px !important; bottom: 120px !important; }
  body.rqx-fab-col.rqx-fab-open #gyBox { bottom: 222px !important; }
}
/* V15: khổ 1000-1180px, menu chung một hàng với logo (header không còn 2-3 dòng) */
@media (max-width: 1180px) and (min-width: 1000px) {
  html:not(.rqx-coop) .nav .wrap { flex-wrap: nowrap !important; gap: 6px; width: auto !important; min-width: 0 !important; max-width: 100% !important; padding-left: 10px !important; padding-right: 10px !important; box-sizing: border-box; }
  html:not(.rqx-coop) .nav .logo { flex: 0 0 auto; }
  html:not(.rqx-coop) .nav .logo small { display: none; }
  html:not(.rqx-coop) .nav .menu { flex-basis: auto !important; flex: 1 1 auto; min-width: 0; flex-wrap: nowrap !important; justify-content: flex-end !important; padding: 0 !important; gap: 0 !important; }
  html:not(.rqx-coop) .nav .menu > a:not(.cta), html:not(.rqx-coop) .nav .menu > .has-sub > a { padding: 5px 5px !important; font-size: 12.5px !important; white-space: nowrap; }
  html:not(.rqx-coop) .nav .menu .nav-search-btn { padding: 5px 7px !important; }
  html:not(.rqx-coop) .nav .menu .nav-search-btn span { display: none; }
  html:not(.rqx-coop) .nav .menu a.study, html:not(.rqx-coop) .nav .menu a.cta { padding: 5px 8px !important; white-space: nowrap; font-size: 12.5px !important; margin-left: 3px !important; }
}
/* V16: chữ nhỏ hơn 12px nâng lên 12px, chữ Hán 13px (không đổi cỡ chữ chung) */
html body .rqx-beta { font-size: 12px !important; padding: 1px 6px !important; }
html body .nav-note, html body .gv2-name, html body .gv2-name small, html body .tn2-tag, html body .vk-thumb .vk-cat, html body .vk-thumb small, html body .vk-item .vk-src, html body .rqx-stab .cnt { font-size: 12px !important; }
html body .tn2-zalo .zh i, html body .tn2-zalo .zh span, html body .tn2-zalo small, html body .tn2-zalo .zb .m { font-size: 12px !important; }
html body .zh-auto .l-zh { font-size: max(13px, 1em) !important; }
html body .zh-auto-lg { font-size: 13px !important; }
html body .rqx-stab.on .cnt, html body .rqx-stab[data-target="yct"].on .cnt { font-size: 12px !important; }
html body .nav .logo small { font-size: 12px !important; white-space: nowrap; }

/* 07/11/2026 anh Hạnh: nút ☰ góc trên bên phải thành nút viên thuốc có chữ, để người đọc biết ấn vào xem danh mục.
   Lần đầu vào trang: chữ chạy dọc qua 4 mục chính trong ~6 giây rồi dừng hẳn ở "Menu" (những lần sau chỉ hiện "Menu"). */
@media (max-width: 960px) {
  .nav .burger {
    width: auto; min-width: 44px; height: 34px; padding: 0 11px 0 9px;
    display: inline-flex; align-items: center; gap: 6px;
    border: 1px solid rgba(255, 255, 255, .34); border-radius: 999px;
    background: rgba(255, 255, 255, .1); color: #fff;
    box-shadow: 0 1px 6px rgba(5, 12, 32, .25);
    transition: background .18s, border-color .18s, color .18s;
  }
  .nav .burger .bg-ic { font-size: 16px; line-height: 1; }
  .nav .burger .bg-roll {
    display: block; overflow: hidden; height: 1.5em;
    font-family: Arial, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 12.5px; font-weight: 700; letter-spacing: .2px; text-align: left;
  }
  .nav .burger .bg-stack { display: block; transform: translateY(-7.5em); }
  .nav .burger .bg-roll b { display: block; height: 1.5em; line-height: 1.5em; white-space: nowrap; font-weight: 700; }
  .nav .burger.hint .bg-stack { animation: rqx-menu-roll 6.4s cubic-bezier(.65, 0, .35, 1) both; }
  .nav:has(.menu.open) .burger { background: rgba(255, 255, 255, .22); border-color: var(--gold); color: var(--gold2); }
}
@keyframes rqx-menu-roll {
  0%, 11%   { transform: translateY(0); }
  16%, 27%  { transform: translateY(-1.5em); }
  32%, 43%  { transform: translateY(-3em); }
  48%, 59%  { transform: translateY(-4.5em); }
  64%, 75%  { transform: translateY(-6em); }
  80%, 100% { transform: translateY(-7.5em); }
}
@media (prefers-reduced-motion: reduce) {
  .nav .burger.hint .bg-stack { animation: none; }
}
@media (max-width: 360px) {
  .nav .burger { padding: 0 9px 0 7px; gap: 5px; }
  .nav .burger .bg-ic { font-size: 15px; }
  .nav .burger .bg-roll { font-size: 11.5px; }
}

/* 07/11/2026 12:20 anh Hạnh: chữ menu hơi nhỏ, cần to và nổi hơn để người xem nhận ra đây là các tab.
   Máy tính (>=1181px): mỗi tab có viền + nền mờ dạng viên thuốc, chữ to hơn; tab đang mở nền xanh sáng. Vẫn giữ 1 hàng, không dùng màu vàng. */
@media (min-width: 1181px) {
  html:not(.rqx-coop) .nav .menu { gap: 6px !important; }
  html:not(.rqx-coop) .nav .menu > a:not(.cta):not(.study),
  html:not(.rqx-coop) .nav .menu > .has-sub > a {
    font-size: 15px !important; font-weight: 700; letter-spacing: 0;
    padding: 6px 12px !important; min-height: 34px; box-sizing: border-box;
    display: inline-flex; align-items: center;
    color: #fff; background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px;
    transition: background .15s, border-color .15s;
  }
  html:not(.rqx-coop) .nav .menu > a:not(.cta):not(.study):hover,
  html:not(.rqx-coop) .nav .menu > .has-sub > a:hover { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .6); color: #fff; }
  html:not(.rqx-coop) .nav .menu > a.on:not(.cta):not(.study),
  html:not(.rqx-coop) .nav .menu > .has-sub > a.on { background: #DBEAFE; border-color: #fff; color: #0A1B3D; box-shadow: none; }
  html:not(.rqx-coop) .nav .menu a.study,
  html:not(.rqx-coop) .nav .menu a.cta { font-size: 15px !important; min-height: 34px; }
}
@media (min-width: 1181px) and (max-width: 1440px) {
  html:not(.rqx-coop) .nav .menu { gap: 4px !important; }
  html:not(.rqx-coop) .nav .menu > a:not(.cta):not(.study),
  html:not(.rqx-coop) .nav .menu > .has-sub > a { font-size: 14px !important; padding: 5px 9px !important; }
  html:not(.rqx-coop) .nav .menu a.study,
  html:not(.rqx-coop) .nav .menu a.cta { font-size: 14px !important; padding: 5px 10px !important; }
}
@media (min-width: 1181px) and (max-width: 1300px) {
  html:not(.rqx-coop) .nav .menu { gap: 3px !important; }
  html:not(.rqx-coop) .nav .menu > a:not(.cta):not(.study),
  html:not(.rqx-coop) .nav .menu > .has-sub > a { font-size: 13.5px !important; padding: 5px 7px !important; }
  html:not(.rqx-coop) .nav .menu a.study,
  html:not(.rqx-coop) .nav .menu a.cta { font-size: 13.5px !important; padding: 5px 8px !important; }
}

/* 07/11/2026 logo chốt (anh Hạnh): mọi logo dùng 1 ảnh /img/logo-rqx-chinese.png, giữ link cũ */
.logo-img { display: inline-flex !important; align-items: center; gap: 0 !important; padding: 0 !important; background: none !important; box-shadow: none !important; border: 0 !important; line-height: 0 !important; flex: 0 0 auto; min-width: 0; }
.logo-img .rqx-logo-img { display: block; height: 42px; width: auto; max-width: none; border-radius: 0; object-fit: contain; }
.logo-img:hover .rqx-logo-img { filter: brightness(1.03); }
footer .logo-img .rqx-logo-img, .ft-brand .logo-img .rqx-logo-img { height: 50px; }
@media (max-width: 1300px) { .logo-img .rqx-logo-img { height: 38px; } }
@media (max-width: 640px) { .logo-img .rqx-logo-img { height: 36px; } footer .logo-img .rqx-logo-img, .ft-brand .logo-img .rqx-logo-img { height: 44px; } }
@media (max-width: 360px) { .logo-img .rqx-logo-img { height: 32px; } }