/* 02/11/2026: giao diện điện thoại kiểu ứng dụng — thanh tab dưới đáy, đầu trang gọn, thẻ trượt ngang, lưới 2 cột.
 * Chỉ tác động màn hình ≤ 760px; máy tính giữ nguyên. Thanh tab do mobile-app.js dựng. */
.vhv-tabbar { display: none; }
.m-sk, .m-only { display: none; }

@media (max-width: 760px) {
  html { -webkit-tap-highlight-color: transparent; }
  body { font-size: 15px; line-height: 1.55; padding-bottom: calc(64px + env(safe-area-inset-bottom)); overflow-x: hidden; }
  img, video, iframe { max-width: 100%; }
  .container { width: calc(100% - 32px); }

  /* đầu trang gọn như thanh ứng dụng */
  .hdr { box-shadow: 0 1px 0 var(--line); border-bottom: 0; }
  .hdr-in { min-height: 56px; gap: 10px; }
  .logo .logo-mark { width: 36px; height: 36px; font-size: 18px; border-radius: 10px; }
  .logo-txt b { font-size: 15px; }
  .logo-txt small { display: none; }
  .hdr-cta { gap: 8px; }
  .pill-cta { padding: 7px 14px !important; font-size: 13px !important; line-height: 20px !important; }
  .burger { width: 38px; height: 38px; }
  .menu { top: 56px !important; max-height: calc(100vh - 56px - 64px - env(safe-area-inset-bottom)) !important; padding: 6px 16px 16px !important; border-radius: 0 0 18px 18px; }
  .menu > a, .dd > a { padding: 13px 4px !important; font-size: 14px !important; }
  .dd-menu a { padding: 9px 12px; font-size: 14px; }
  .float-ct { display: none !important; }

  /* khoảng cách & chữ */
  .section, .h-sec { padding: 28px 0; }
  .section-sm { padding: 20px 0; }
  .h-band { padding: 20px 0; }
  h1 { font-size: 1.6rem; line-height: 1.25; }
  h2, .section-title h2, .h-head h2, .card h2, .h-form .box h2 { font-size: 1.3rem !important; line-height: 1.3; }
  h3 { font-size: 1.08rem; }
  .section-title { margin-bottom: 14px; }
  .eyebrow { font-size: 11px; letter-spacing: .06em; }
  .muted, .lead { font-size: .94rem; }

  /* đầu trang con */
  .page-banner .container { padding: 16px 0 18px !important; }
  .page-banner h1 { font-size: 1.55rem !important; margin-bottom: 6px; }
  .page-banner p { font-size: .92rem; line-height: 1.5; }
  .crumbs { font-size: 12px; margin-bottom: 4px; }

  /* nút */
  .btn { border-radius: 12px; }
  .btn.lg { padding: 12px 20px; font-size: 15px; }
  .flex:has(> .btn) { flex-wrap: wrap; gap: 10px; }
  .flex:has(> .btn) > .btn { flex: 1 1 140px; justify-content: center; text-align: center; }

  /* thẻ */
  .card { border-radius: 16px; padding: 16px; }
  .grid { gap: 12px; }

  /* tab & bộ lọc: một hàng, trượt ngang */
  .tabs, .dm-filter, .pills, .tv-chips { display: flex; flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; margin-inline: -16px; padding-inline: 16px; }
  .tabs::-webkit-scrollbar, .dm-filter::-webkit-scrollbar, .pills::-webkit-scrollbar, .tv-chips::-webkit-scrollbar { display: none; }
  .tabs { gap: 2px; margin-bottom: 16px; }
  .tab-btn { flex: 0 0 auto; white-space: nowrap; padding: 10px 12px; font-size: 14px; scroll-snap-align: start; }
  .dm-filter > *, .pills > *, .tv-chips > * { flex: 0 0 auto; white-space: nowrap; }

  /* thẻ khóa học, đề mẫu: trượt ngang như app */
  .grid:has(> .course), .dm-grid { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 12px; margin-inline: -16px; padding: 4px 16px 10px; }
  .grid:has(> .course)::-webkit-scrollbar, .dm-grid::-webkit-scrollbar { display: none; }
  .grid:has(> .course) > *, .dm-grid > * { flex: 0 0 82%; scroll-snap-align: center; margin: 0 !important; }
  .course .cover { aspect-ratio: 16/7; padding: 12px 14px; }
  .course .cover b { font-size: 1.05rem; }
  .course .lock { top: 26px; right: 26px; font-size: 11px; }
  .course .actions .btn { flex: 1; justify-content: center; padding: 9px 10px; font-size: 14px; }
  .dm-card { padding: 16px !important; border-radius: 16px !important; }
  .dm-card h3 { font-size: 1.05rem; }
  .dm-card .btn { width: 100%; justify-content: center; }

  /* số liệu: lưới 2 cột gọn */
  .grid:has(> .stat) { grid-template-columns: repeat(2, 1fr) !important; }
  .grid:has(> .stat) > * { padding: 12px 8px !important; }
  .stat b { font-size: 1.5rem; }
  .facts { grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 16px 0; }
  .facts div { padding: 10px 12px; }
  .facts b { font-size: 1.2rem; }
  .facts span { font-size: .8rem; }
  .h-intro { padding: 24px 0; }
  .h-intro .sub { font-size: 1.1rem; }
  .h-intro .proof { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .h-intro .proof .sep { display: none; }
  .h-intro .proof > div { background: var(--soft, #f6f6f6); border-radius: 12px; padding: 10px 8px; text-align: center; }
  .proof .num { font-size: 1.25rem; }
  .proof small { font-size: .72rem; line-height: 1.3; }

  /* lối tắt chương trình ở trang chủ: ô vuông 2 cột */
  .h-courses { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }
  .h-courses a { flex-direction: column; min-height: 92px !important; border-radius: 16px; border-color: var(--line); padding: 12px 8px; font-size: 12.5px !important; line-height: 1.3 !important; box-shadow: 0 2px 8px rgba(0,0,0,.04); }
  .h-courses a i { width: 36px; height: 36px; }
  .h-courses a i svg { width: 18px; height: 18px; }

  /* lộ trình & lưới chung */
  .router { gap: 20px; }
  .router-form { grid-template-columns: 1fr 1fr; gap: 10px; }
  .router-form select { padding: 11px 12px; font-size: 14px; }
  .about-img { max-width: 260px; margin-inline: auto; border-radius: 18px; overflow: hidden; }

  /* bảng: trượt ngang trong khung */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 14px; }
  .table-wrap .tbl { min-width: 560px; }
  .tbl { font-size: .85rem; max-width: 100%; }
  .card > .tbl, .card .tbl:not(.table-wrap .tbl) { display: block; overflow-x: auto; }
  .tbl th, .tbl td { padding: 9px 10px; }

  /* ảnh đầu trang chủ: câu trích dẫn nằm trên ảnh (bên trái, vùng nền mờ) như bản máy tính */
  .h-banner { display: block !important; position: relative; }
  .h-banner picture, .h-banner img { width: 100%; height: clamp(250px, 72vw, 340px) !important; object-fit: cover; object-position: 40% 50%; }
  .h-quote { position: absolute !important; left: 0 !important; top: 0 !important; bottom: 0; width: 72% !important; padding: 0 6px 0 14px !important; display: flex; align-items: center;
    background: linear-gradient(90deg, rgba(246,248,243,.82) 0%, rgba(246,248,243,.6) 75%, rgba(246,248,243,0) 100%) !important; }
  .h-quote p { font-size: clamp(10.5px, 3vw, 15px) !important; line-height: 1.55 !important; white-space: nowrap; margin-bottom: .6em !important; }
  .h-quote p.en { margin-bottom: 0 !important; }
  .h-caption { position: absolute !important; right: 10px !important; bottom: 10px !important; top: auto !important; margin: 0 !important; font-size: 12px !important; background: rgba(255,255,255,.88); padding: 3px 9px; border-radius: 999px; }
  .tbl td:first-child, .tbl th:first-child { min-width: 150px; }

  /* thẻ tính năng: biểu tượng nhỏ cạnh tiêu đề thay vì khối tròn lớn phía trên */
  .card.feature { display: grid !important; grid-template-columns: 42px minmax(0,1fr); column-gap: 12px; row-gap: 6px; align-items: center; padding: 14px 16px !important; }
  .card.feature > .nav-ic { width: 42px !important; height: 42px !important; margin: 0 !important; grid-column: 1; grid-row: 1; }
  .card.feature > .nav-ic svg { width: 20px !important; height: 20px !important; }
  .card.feature > h3 { grid-column: 2; grid-row: 1; margin: 0 !important; font-size: 1.05rem; }
  .card.feature > :not(.nav-ic):not(h3) { grid-column: 1 / -1; margin: 0; }
  .card.feature ul { padding-left: 18px; font-size: .92rem; line-height: 1.5; }
  .card.feature .more { font-size: .9rem; }
  a.type { padding: 12px !important; }
  /* thẻ tính năng có màu riêng: dải màu trái, nền nhạt, biểu tượng ô màu, gạch đầu dòng dấu tích, nút "xem" dạng viên */
  .card.feature { --fx: #2563eb; --fx-bg: #eef4ff; position: relative; overflow: hidden; border: 1px solid color-mix(in srgb, var(--fx) 22%, #fff) !important; border-left: 5px solid var(--fx) !important;
    background: linear-gradient(135deg, var(--fx-bg) 0%, #fff 55%) !important; box-shadow: 0 8px 22px color-mix(in srgb, var(--fx) 14%, transparent) !important; border-radius: 18px !important; }
  .grid > .card.feature:nth-child(6n+2) { --fx: #16a34a; --fx-bg: #ecfbf1; }
  .grid > .card.feature:nth-child(6n+3) { --fx: #ea580c; --fx-bg: #fff3ea; }
  .grid > .card.feature:nth-child(6n+4) { --fx: #9333ea; --fx-bg: #f6efff; }
  .grid > .card.feature:nth-child(6n+5) { --fx: #db2777; --fx-bg: #fff0f6; }
  .grid > .card.feature:nth-child(6n+6) { --fx: #0891b2; --fx-bg: #eafaff; }
  .card.feature > .nav-ic { background: var(--fx) !important; color: #fff !important; border-radius: 13px !important; box-shadow: 0 6px 14px color-mix(in srgb, var(--fx) 35%, transparent); }
  .card.feature > .nav-ic svg { fill: currentColor; color: #fff; }
  .card.feature > h3 { color: #151826; font-size: 1.1rem !important; }
  .card.feature ul { list-style: none; padding-left: 0 !important; display: grid; gap: 6px; }
  .card.feature ul li { position: relative; padding-left: 26px; color: #374151; }
  .card.feature ul li::before { content: ""; position: absolute; left: 0; top: .2em; width: 18px; height: 18px; border-radius: 50%; background: color-mix(in srgb, var(--fx) 16%, #fff);
    -webkit-mask: none; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--fx) 45%, #fff); }
  .card.feature ul li::after { content: ""; position: absolute; left: 6px; top: calc(.2em + 4px); width: 5px; height: 8px; border: solid var(--fx); border-width: 0 2px 2px 0; transform: rotate(45deg); }
  .card.feature .more { justify-self: start; display: inline-flex; align-items: center; gap: 6px; margin-top: 4px !important; padding: 7px 14px; border-radius: 999px; background: var(--fx); color: #fff !important; font-weight: 700; font-size: 13.5px !important; box-shadow: 0 4px 10px color-mix(in srgb, var(--fx) 30%, transparent); }

  /* bảng đề thi thử → thẻ từng đề (mobile-app.js gắn .m-cards + nhãn cột) */
  .table-wrap:has(.m-cards) { overflow: visible; background: none !important; border: 0 !important; box-shadow: none !important; }
  .tbl.m-cards { min-width: 0 !important; display: grid !important; gap: 14px; counter-reset: mtest; }
  .tbl.m-cards tbody { display: contents; }
  .tbl.m-cards tr:first-child:has(th) { display: none; }
  .tbl.m-cards tr:has(td) { counter-increment: mtest; display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 8px; position: relative; padding: 16px 14px 14px 18px; background: #fff;
    border: 1px solid #ebe7da; border-left: 5px solid var(--yellow, #fecd0d); border-radius: 16px; box-shadow: 0 6px 18px rgba(20,20,40,.07); }
  .tbl.m-cards tr.m-free { border-color: #b7e4c7; border-left-color: #22a35a; background: linear-gradient(180deg, #f2fbf5 0, #fff 60%); box-shadow: 0 8px 22px rgba(34,163,90,.15); }
  .tbl.m-cards td:first-child b { display: flex; align-items: center; gap: 10px; font: 700 17px/1.25 "Commissioner", sans-serif; }
  .tbl.m-cards td:first-child b::before { content: counter(mtest); flex: 0 0 30px; height: 30px; border-radius: 9px; background: #1f2230; color: var(--yellow, #fecd0d); display: grid; place-items: center; font-size: 14px; }
  .tbl.m-cards tr.m-free td:first-child b::before { background: #22a35a; color: #fff; }
  .tbl.m-cards td:first-child .small { margin: 4px 0 6px 40px; font-size: 13px; }
  .tbl.m-cards td { display: block; padding: 0 !important; border: 0 !important; min-width: 0 !important; background: none !important; }
  .tbl.m-cards td:first-child { grid-column: 1 / -1; padding-right: 120px !important; }
  .tbl.m-cards td.m-badge { position: absolute; top: 16px; right: 14px; }
  .tbl.m-cards td.m-badge .badge { font-size: 11px; padding: 4px 9px; border-radius: 999px; }
  .tbl.m-cards tr.m-free td.m-badge .badge { background: #22a35a; color: #fff; }
  .tbl.m-cards .m-sk { display: flex; align-items: center; justify-content: center; gap: 5px; margin-bottom: 6px; font: 700 13px/1 "Commissioner", sans-serif; color: #1f2230; }
  .tbl.m-cards .m-sk svg { width: 18px; height: 18px; padding: 4px; box-sizing: content-box; border-radius: 8px; background: #fff3c4; color: #1f2230; }
  .tbl.m-cards .btn { display: flex !important; align-items: center; justify-content: center; width: 100% !important; min-height: 0; height: 34px; padding: 0 4px !important; font-size: 13px !important; line-height: 1 !important; border-radius: 9px; white-space: nowrap; border-width: 1.5px; }
  .tbl.m-cards td:first-child .small { margin-bottom: 4px; }
  .tbl.m-cards tr:has(td) { row-gap: 10px; padding-bottom: 12px; }

  /* trang Đăng ký tư vấn: đưa form lên ngay dưới tiêu đề, khung vàng nổi bật; phần giới thiệu xuống dưới form */
  .tv-hero .in { display: flex !important; flex-direction: column; gap: 0 !important; padding-top: 14px !important; }
  .tv-hero .tv-intro { display: contents; }
  .tv-hero .crumbs { order: 1; margin-bottom: 10px !important; font-size: 12px; }
  .tv-hero .tv-eyebrow { order: 2; align-self: flex-start; font-size: 11px; padding: 4px 12px; }
  .tv-hero h1 { order: 3; font-size: 1.5rem !important; margin: 10px 0 6px !important; }
  .tv-hero .lead { order: 4; font-size: 14px !important; line-height: 1.55 !important; margin: 0 0 16px !important; color: rgba(255,255,255,.8); }
  .tv-card { order: 5; margin: 0 0 22px !important; padding: 20px 16px 18px !important; border-radius: 18px !important; border: 2px solid #fecd0d; box-shadow: 0 0 0 6px rgba(254,205,13,.18), 0 18px 40px rgba(0,0,0,.35) !important; }
  .tv-card h2 { font-size: 1.25rem !important; display: flex; align-items: center; gap: 8px; }
  .tv-card h2::before { content: ""; width: 6px; height: 22px; border-radius: 3px; background: #fecd0d; flex: 0 0 auto; }
  .tv-card .tv-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .tv-card input, .tv-card select, .tv-card textarea { font-size: 16px; }
  .tv-card input, .tv-card select { height: 46px; }
  .tv-card button[type=submit], .tv-card .btn { width: 100%; justify-content: center; padding: 14px; font-size: 16px; }
  .tv-hero .tv-perks { order: 6; margin: 0 0 16px !important; }
  .tv-hero .tv-perks li { margin-bottom: 10px !important; }
  .tv-hero .tv-perks b { font-size: 15px; } .tv-hero .tv-perks span { font-size: 13px; }
  .tv-hero .tv-call { order: 7; align-self: stretch; }
  .tv-hero .tv-quote { order: 8; margin: 20px 0 24px !important; padding-top: 18px !important; }
  .tv-quote img { width: 52px !important; height: 52px !important; }
  .tv-quote q { font-size: 14px !important; }
  .tv-below { padding-top: 24px !important; }
  #book-form input, #book-form select { height: 46px; }
  .tv-below h2 { font-size: 1.25rem !important; margin-bottom: 12px; }
  /* quy trình 1-2-3: một thẻ, các bước nối bằng đường dọc vàng */
  .tv-steps { gap: 0 !important; margin-bottom: 20px !important; background: #fff; border: 1px solid #e6e6e6; border-radius: 18px; padding: 6px 16px !important; }
  .tv-steps li { background: none !important; border: 0 !important; border-radius: 0 !important; padding: 14px 0 14px 48px !important; }
  .tv-steps li + li { border-top: 1px dashed #ececec !important; }
  .tv-steps li::before { left: 0 !important; top: 14px !important; width: 32px !important; height: 32px !important; font-size: 14px !important; box-shadow: 0 0 0 4px #fff7d6; }
  .tv-steps li:not(:last-child)::after { content: ""; position: absolute; left: 15px; top: 50px; bottom: -14px; width: 2px; background: #fecd0d; opacity: .5; }
  .tv-steps b { font-size: 15px !important; margin-bottom: 2px; }
  .tv-steps span { display: block; font-size: 13.5px !important; line-height: 1.5; }
  .tv-links a { padding: 14px 16px !important; border-radius: 16px !important; }
  /* hộp liên hệ: biểu tượng và chữ thẳng hàng */
  .tv-cbox { padding: 18px 16px !important; border-radius: 18px !important; }
  .tv-cbox h3 { font-size: 1.1rem !important; margin-bottom: 10px !important; }
  .tv-contact { display: grid; gap: 4px; padding: 0; margin: 0; list-style: none; }
  .tv-contact li { display: flex !important; align-items: center !important; gap: 12px !important; padding: 8px 0 !important; }
  .tv-contact .ci { width: 40px !important; height: 40px !important; flex: 0 0 40px; border-radius: 12px; display: grid; place-items: center; }
  .tv-contact .ci svg { width: 18px; height: 18px; }
  .tv-contact li > div { display: block !important; margin: 0 !important; padding: 0 !important; }
  .tv-contact b { display: block; font-size: 15px; line-height: 1.3; margin: 0 !important; }
  .tv-contact b a { display: inline !important; padding: 0 !important; margin: 0 !important; background: none !important; border: 0 !important; min-height: 0 !important; }
  .tv-contact .t { display: block; font-size: 12.5px; color: #6b7280; margin: 0 !important; padding: 0 !important; }

  /* trang bài học: cột nội dung không được rộng hơn màn hình (trước bị tràn phải, chữ bị cắt) */
  .layout-side { grid-template-columns: minmax(0, 1fr) !important; gap: 14px !important; }
  .layout-side > *, .tab-panel, .split > *, .grid > * { min-width: 0; }
  .tab-panel { max-width: 100%; }
  .formula, pre, code { white-space: pre-wrap !important; word-break: break-word; overflow-wrap: anywhere; }
  .formula { font-size: .82rem !important; padding: 10px 12px !important; }
  .tab-panel h3, .theory h3 { font-size: 1.08rem !important; line-height: 1.35; }
  .q, .quiz .q { padding: 14px !important; border-radius: 14px !important; }
  .q .qt, .qt { font-size: 15px; line-height: 1.5; }
  .opt { padding: 10px 12px !important; border-radius: 12px !important; font-size: 15px; }
  .q input[type=text], .q textarea, .blank { max-width: 100%; box-sizing: border-box; }
  .q textarea { width: 100% !important; }
  .q .blank, input.blank { width: auto; min-width: 0; flex: 1 1 120px; }
  .actions:has(> .btn), .q-foot, [data-grade] { }
  /* mục lục bài học: chuyển xuống dưới nội dung, hiển thị dạng thẻ chip */
  .layout-side > aside.side { order: 2; display: flex !important; flex-wrap: wrap; gap: 6px; padding: 14px !important; border-radius: 18px !important; }
  .layout-side > aside.side h4 { flex: 0 0 100%; margin: 8px 0 2px !important; font-size: 11px !important; letter-spacing: .06em; }
  .layout-side > aside.side h4:first-child { margin-top: 0 !important; }
  .layout-side > aside.side a { display: inline-flex !important; align-items: center; padding: 7px 12px !important; border: 1px solid var(--line, #e6e6e6); border-radius: 999px !important; font-size: 13px !important; line-height: 1.2; background: #fff; }
  .layout-side > aside.side a.active { background: var(--yellow, #fecd0d) !important; border-color: var(--yellow, #fecd0d); }
  .layout-side > aside.side a .dot { display: none !important; }
  .media-slot, .vid-soon { max-width: 100%; }

  /* danh sách video: băng trượt ngang kiểu ứng dụng, thẻ có khung, ảnh 16:9 bo tròn, nút phát nhỏ gọn, thời lượng góc phải dưới, tiêu đề 2 dòng */
  .vid-grid { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 12px !important; margin: 10px -16px 0 !important; padding: 4px 16px 14px !important; scroll-padding-inline: 16px; }
  .vid-grid::-webkit-scrollbar { display: none; }
  .vid-card { flex: 0 0 76%; scroll-snap-align: start; background: #fff; border: 1px solid #ececec; border-radius: 16px; overflow: hidden; box-shadow: 0 6px 18px rgba(20,20,40,.08); }
  .vid-card .media-slot { border-radius: 0 !important; background-size: cover; background-position: center; }
  .vid-card .media-slot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.45) 100%); pointer-events: none; }
  .vid-card .media-slot .play { width: 50px !important; height: 50px !important; margin: 0 !important; background: rgba(254,205,13,.95) !important; box-shadow: 0 6px 18px rgba(0,0,0,.3) !important; }
  .vid-card .media-slot .play::after { border-left: 15px solid #1f2230 !important; border-top-width: 9px !important; border-bottom-width: 9px !important; margin-left: 4px !important; }
  .vid-card .media-slot .tag { top: auto !important; bottom: 8px; left: auto !important; right: 8px; z-index: 1; background: rgba(0,0,0,.72) !important; font-size: 11px !important; font-weight: 600; padding: 2px 7px !important; border-radius: 6px; }
  .vid-card > b { margin: 0 !important; padding: 10px 12px 12px; font-size: 14px !important; line-height: 1.35 !important; display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(2 * 1.35em + 22px); }
  .vid-card > small { display: block; padding: 0 12px 12px; margin-top: -8px; font-size: 12px; }
  .vid-sec h3, .tab-panel h3 + .vid-grid { margin-top: 14px; }

  /* form đăng ký thi Nói: khung nổi bật, đầu form tối có micro, nhóm trường có tiêu đề, ô nhập có biểu tượng */
  #dang-ky-noi .split > .card:first-child { padding: 0 !important; overflow: hidden; border: 2px solid #fecd0d !important; border-radius: 20px !important; box-shadow: 0 0 0 5px rgba(254,205,13,.16), 0 16px 36px rgba(20,20,40,.14) !important; }
  #sp-wrap > h2 { margin: 0 !important; padding: 18px 16px 4px 72px; position: relative; background: #1f2230; color: #fff; font-size: 1.25rem !important; }
  #sp-wrap > h2::before { content: ""; position: absolute; left: 16px; top: 16px; width: 44px; height: 44px; border-radius: 14px; background: #fecd0d url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f2230' stroke-width='2.2' stroke-linecap='round'%3E%3Crect x='9' y='3' width='6' height='11' rx='3'/%3E%3Cpath d='M5 11a7 7 0 0 0 14 0M12 18v3'/%3E%3C/svg%3E") center/24px no-repeat; }
  #sp-wrap > p.muted { margin: 0 !important; padding: 2px 16px 16px 72px; background: #1f2230; color: rgba(255,255,255,.72) !important; font-size: 12.5px !important; line-height: 1.5; }
  #sp-wrap .sp-alert, #book-form { margin: 0 16px; }
  #book-form { padding: 6px 0 18px; display: grid; gap: 12px; }
  #book-form .row { display: grid !important; grid-template-columns: 1fr !important; gap: 12px !important; margin: 0 !important; }
  #book-form .field { margin: 0 !important; }
  #book-form .sp-group { display: flex !important; align-items: center; gap: 8px; margin: 10px 0 0; font: 700 12px/1 "Commissioner", sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #8a6d00; }
  #book-form .sp-group::before { content: attr(data-n); width: 22px; height: 22px; border-radius: 50%; background: #fecd0d; color: #1f2230; display: grid; place-items: center; font-size: 12px; letter-spacing: 0; }
  #book-form .sp-group::after { content: ""; flex: 1; height: 1px; background: #f0e3a8; }
  #book-form label { font: 600 14px/1.3 "Commissioner", sans-serif !important; color: #1f2230; margin-bottom: 6px !important; }
  #book-form input:not([type=radio]), #book-form select, #book-form textarea { width: 100%; height: 48px; border: 1.5px solid #e2e5ea !important; border-radius: 12px !important; background-color: #f8f9fb !important; font-size: 16px !important; padding: 0 14px !important; box-shadow: none !important; }
  #book-form textarea { height: auto; padding: 12px 14px !important; }
  #book-form input:focus, #book-form select:focus, #book-form textarea:focus { outline: none; border-color: #1f2230 !important; background-color: #fff !important; box-shadow: 0 0 0 3px rgba(254,205,13,.45) !important; }
  #book-form .err input, #book-form .err select { border-color: #dc2626 !important; background-color: #fff5f5 !important; }
  #book-form #sp-name { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%238a6d00%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%228%22%20r%3D%224%22/%3E%3Cpath%20d%3D%22M4%2021c1.5-4%204.5-6%208-6s6.5%202%208%206%22/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: 13px center !important; background-size: 20px !important; padding-left: 44px !important; }
  #book-form #sp-phone { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%238a6d00%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%204h4l2%205-2.5%201.5a11%2011%200%200%200%205%205L15%2013l5%202v4a2%202%200%200%201-2%202A16%2016%200%200%201%203%206a2%202%200%200%201%202-2%22/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: 13px center !important; background-size: 20px !important; padding-left: 44px !important; }
  #book-form #sp-email { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%238a6d00%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%2218%22%20height%3D%2214%22%20rx%3D%222%22/%3E%3Cpath%20d%3D%22m3%207%209%206%209-6%22/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: 13px center !important; background-size: 20px !important; padding-left: 44px !important; }
  #book-form #sp-test { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%238a6d00%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%224%22%20y%3D%223%22%20width%3D%2216%22%20height%3D%2218%22%20rx%3D%222%22/%3E%3Cpath%20d%3D%22M8%208h8M8%2012h8M8%2016h5%22/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: 13px center !important; background-size: 20px !important; padding-left: 44px !important; }
  #book-form #sp-date { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%238a6d00%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%2218%22%20height%3D%2216%22%20rx%3D%222%22/%3E%3Cpath%20d%3D%22M3%2010h18M8%203v4M16%203v4%22/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: 13px center !important; background-size: 20px !important; padding-left: 44px !important; }
  #book-form #sp-slot { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%238a6d00%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22/%3E%3Cpath%20d%3D%22M12%207v5l3%202%22/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: 13px center !important; background-size: 20px !important; padding-left: 44px !important; }
  #sp-date, #sp-slot, #sp-test { -webkit-appearance: none; appearance: none; }
  #book-form .checks { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px !important; }
  #book-form .checks label { margin: 0 !important; padding: 11px 10px !important; border-radius: 12px !important; white-space: normal !important; font: 600 13.5px/1.3 "Roboto", sans-serif !important; justify-content: flex-start; }
  #sp-btn { width: 100%; height: 52px; justify-content: center; font-size: 16px !important; border-radius: 14px !important; box-shadow: 0 8px 18px rgba(254,205,13,.45); margin-top: 4px; }
  #sp-btn::before { content: ""; width: 20px; height: 20px; margin-right: 8px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f2230' stroke-width='2.2' stroke-linecap='round'%3E%3Crect x='9' y='3' width='6' height='11' rx='3'/%3E%3Cpath d='M5 11a7 7 0 0 0 14 0M12 18v3'/%3E%3C/svg%3E") center/contain no-repeat; }
  #dang-ky-noi .sp-done { padding: 24px 16px !important; }
  /* cấu trúc bài thi Speaking: thanh thời lượng 3 màu + 3 khối Part có số lớn, biểu tượng, thời gian */
  .sp-struct .timeline { display: grid !important; gap: 10px; padding: 0 !important; border: 0 !important; }
  .sp-struct .timeline::before, .sp-struct .timeline > div::before { border: 0; }
  .sp-struct .sp-bar { display: flex !important; height: 30px; border-radius: 10px; overflow: hidden; margin: 2px 0 6px; font: 700 11.5px/30px "Commissioner", sans-serif; color: #fff; text-align: center; }
  .sp-struct .sp-bar span:nth-child(1) { flex: 4.5; background: #2563eb; } .sp-struct .sp-bar span:nth-child(2) { flex: 3.5; background: #ea580c; } .sp-struct .sp-bar span:nth-child(3) { flex: 4.5; background: #16a34a; }
  .sp-struct .sp-total { display: block !important; font-size: 13px; color: #6b7280; margin: -4px 0 8px; }
  .sp-struct .timeline > div { --c: #2563eb; --bg: #eef4ff; position: relative; padding: 12px 12px 12px 62px !important; margin: 0 !important; border-radius: 14px; background: var(--bg); border: 1px solid color-mix(in srgb, var(--c) 25%, #fff); border-left: 4px solid var(--c) !important; }
  .sp-struct .timeline > div:nth-of-type(2) { --c: #ea580c; --bg: #fff3ea; } .sp-struct .timeline > div:nth-of-type(3) { --c: #16a34a; --bg: #ecfbf1; }
  .sp-struct .timeline > div::before { content: attr(data-n) !important; position: absolute !important; left: 12px !important; top: 12px !important; width: 38px !important; height: 38px !important; border-radius: 11px !important; background: var(--c) !important; color: #fff; display: grid !important; place-items: center; font: 800 18px/1 "Commissioner", sans-serif; box-shadow: 0 5px 12px color-mix(in srgb, var(--c) 35%, transparent) !important; }
  .sp-struct .timeline > div::after { display: none !important; }
  .sp-struct .timeline > div b { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font: 700 15px/1.3 "Commissioner", sans-serif; color: #151826; }
  .sp-struct .timeline > div b i { font-style: normal; font-size: 11.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: #fff; color: var(--c); border: 1px solid color-mix(in srgb, var(--c) 35%, #fff); }
  .sp-struct .timeline > div br { display: none; }
  .sp-struct .timeline > div .muted { display: block; margin-top: 3px; font-size: 13px; line-height: 1.45; color: #4b5563 !important; }

  /* dạng câu hỏi: lưới 2 cột, mỗi ô một màu, số thứ tự nổi, nút Lý thuyết / Luyện tập dạng viên */
  .types { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  .types > .type { --tc: #2563eb; --tb: #eef4ff; display: flex !important; flex-direction: column; gap: 8px; position: relative; padding: 12px !important; margin: 0 !important; border-radius: 16px !important;
    background: linear-gradient(160deg, var(--tb) 0%, #fff 70%) !important; border: 1px solid color-mix(in srgb, var(--tc) 22%, #fff) !important; border-top: 4px solid var(--tc) !important; box-shadow: 0 6px 16px color-mix(in srgb, var(--tc) 12%, transparent); }
  .types > .type:nth-child(4n+2) { --tc: #16a34a; --tb: #ecfbf1; } .types > .type:nth-child(4n+3) { --tc: #ea580c; --tb: #fff3ea; } .types > .type:nth-child(4n+4) { --tc: #9333ea; --tb: #f6efff; }
  .types > .type > .n { width: 32px !important; height: 32px !important; border-radius: 10px !important; background: var(--tc) !important; color: #fff !important; font: 800 15px/32px "Commissioner", sans-serif !important; text-align: center; margin: 0 !important; display: block !important; }
  .types > .type > .m-tic { display: grid !important; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: var(--tc); color: #fff; box-shadow: 0 6px 14px color-mix(in srgb, var(--tc) 35%, transparent); }
  .types > .type > .m-tic svg { width: 23px; height: 23px; }
  .types > .type > .m-tic + .n { position: absolute; top: 8px; left: 40px; width: 20px !important; height: 20px !important; border-radius: 50% !important; font-size: 11px !important; line-height: 20px !important; background: #1f2230 !important; color: #fecd0d !important; border: 2px solid #fff; }
  .types > .type > .m-tic + .thumb { display: none !important; }
  .types > .type > .thumb { width: 100% !important; margin: 0 !important; border-radius: 10px; overflow: hidden; }
  .types > .type > div { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
  .types > .type b { font: 700 14px/1.3 "Commissioner", sans-serif !important; color: #151826; }
  .types > .type p { margin: 0 !important; font-size: 12px !important; line-height: 1.4 !important; color: #5b6170; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .types > .type .lk { display: flex !important; flex-wrap: wrap; gap: 6px !important; margin-top: auto !important; padding-top: 6px; align-items: center; }
  .types > .type .lk a { padding: 5px 10px; border-radius: 999px; font-size: 12px !important; font-weight: 700; line-height: 1.2; text-decoration: none !important; background: #fff; color: var(--tc) !important; border: 1px solid color-mix(in srgb, var(--tc) 40%, #fff); }
  .types > .type .lk a + a { background: var(--tc); color: #fff !important; border-color: var(--tc); }
  .types > .type .lk .muted { position: absolute; top: 14px; right: 12px; font-size: 11px !important; font-weight: 700; color: var(--tc) !important; background: #fff; padding: 2px 8px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--tc) 30%, #fff); }
  .group-title h3 { font-size: 1.02rem !important; line-height: 1.35; }

  /* thẻ giới thiệu khóa học: khối tối nổi bật, giá lớn, nút rõ */
  .course-review .card { display: block !important; padding: 0 !important; overflow: hidden; border: 0 !important; border-radius: 20px !important; background: linear-gradient(150deg, #1f2230 0%, #2c3145 100%) !important; color: #fff; box-shadow: 0 14px 32px rgba(20,20,40,.22); }
  .course-review .media-slot.vid-soon { aspect-ratio: auto !important; display: flex !important; align-items: center; gap: 10px; margin: 14px 14px 0; padding: 10px 12px !important; border-radius: 12px !important; background: rgba(255,255,255,.08) !important; border: 1px dashed rgba(255,255,255,.25) !important; color: rgba(255,255,255,.8) !important; text-align: left; }
  .course-review .media-slot.vid-soon .tag { position: static !important; flex: 0 0 auto; }
  .course-review .media-slot.vid-soon .cap { color: rgba(255,255,255,.75) !important; padding: 0 !important; font-size: 12px; line-height: 1.4; }
  .course-review .media-slot.vid-soon .cap b { color: #fff !important; }
  .course-review .media-slot.vid-soon .cap br, .course-review .media-slot.vid-soon .cap b + br + * { display: none; }
  .course-review .card > div:last-child { padding: 14px 16px 18px; }
  .course-review .eyebrow { color: #fecd0d !important; }
  .course-review h2 { color: #fff !important; font-size: 1.3rem !important; margin: 4px 0 6px !important; }
  .course-review .muted { color: rgba(255,255,255,.72) !important; font-size: 13.5px; }
  .course-review .flex.small { gap: 8px !important; align-items: center; flex-wrap: wrap; }
  .course-review .flex.small > span:first-child { padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.1); color: #fff !important; font-size: 12px; }
  .course-review .flex:not(.small) { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px !important; align-items: center; }
  .course-review .flex:not(.small) > .serif { grid-column: 1; color: #fecd0d !important; font-size: 1.6rem !important; }
  .course-review .flex:not(.small) > a.btn[data-gate] { grid-column: 2; }
  .course-review .flex:not(.small) > .btn { justify-content: center; width: 100%; padding: 11px 8px; font-size: 14.5px; }
  .course-review .flex:not(.small) > .btn.ghost { background: transparent !important; color: #fff !important; border-color: rgba(255,255,255,.35) !important; }

  /* video, danh sách */
  .gt-vid-item { padding: 8px !important; border-radius: 14px !important; }

  /* chân trang gọn */
  .ft-cta { padding: 22px 0 !important; gap: 14px !important; }
  .ft-cta h3 { font-size: 1.2rem; }
  .ft-cta-btns { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
  .ft-cta-btns .btn { justify-content: center; padding: 11px 10px; font-size: 14px; }
  .ft-main { grid-template-columns: 1fr 1fr !important; gap: 20px 16px !important; padding: 24px 0 !important; }
  .ft-brand { grid-column: 1 / -1; }
  .ft-contact { grid-column: 1 / -1; }
  .ft-bottom .container { flex-direction: column; gap: 6px; font-size: 12px; }

  /* thanh tab dưới đáy */
  .vhv-tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
    height: calc(62px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
    background: rgba(255,255,255,.96); -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px);
    border-top: 1px solid rgba(0,0,0,.08); box-shadow: 0 -4px 18px rgba(0,0,0,.05); }
  .vhv-tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: #6b7280; text-decoration: none; font: 600 10.5px/1.1 "Commissioner", system-ui, sans-serif; }
  .vhv-tabbar a svg { width: 23px; height: 23px; }
  .vhv-tabbar a.on { color: #111; }
  .vhv-tabbar a.on .ic { background: var(--yellow, #fecd0d); }
  .vhv-tabbar .ic { display: grid; place-items: center; width: 48px; height: 28px; border-radius: 14px; transition: background .2s; }
  .vhv-tabbar a.go .ic { background: #111; color: var(--yellow, #fecd0d); }
  .vhv-tabbar a.go { color: #111; }
  .vhv-tabbar a:active .ic { transform: scale(.92); }
}

@media (max-width: 360px) {
  .pill-cta { display: none !important; }
  .h-courses a { font-size: 11.5px !important; }
}

/* =========================================================
   Sửa hiển thị trên điện thoại / trình duyệt trong Zalo (03/11/2026)
   - Câu trích dẫn không còn đè lên ảnh: chuyển xuống dải nền sáng ngay dưới ảnh, được xuống dòng.
   - Ảnh căn để thầy nằm trọn ở nửa phải khung.
   - Tiêu đề không ép 1 dòng (Zalo/Android có thể phóng to chữ theo cỡ chữ hệ thống).
   ========================================================= */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (max-width: 760px) {
  .h-banner picture, .h-banner img { height: clamp(230px, 64vw, 320px) !important; object-position: 74% 28% !important; }
  .h-quote { position: static !important; width: auto !important; display: block !important; padding: 18px 20px 20px 46px !important;
    background: #f6f8f3 !important; border-bottom: 1px solid #e6e9e1; position: relative !important; }
  .h-quote::before { content: "\201C"; position: absolute; left: 14px; top: 10px; font: 400 46px/1 "Noto Serif", Georgia, serif; color: #fecd0d; }
  .h-quote p { white-space: normal !important; font-size: 16.5px !important; line-height: 1.55 !important; margin: 0 0 .55em !important; text-shadow: none !important; overflow-wrap: anywhere; }
  .h-quote p.en { font-size: 15px !important; color: #3d4a6b !important; margin: 0 !important; }
  .h-quote p.en::after { content: "\201D"; font: 400 30px/0 "Noto Serif", Georgia, serif; color: #fecd0d; vertical-align: -0.38em; margin-left: .12em; }
  .h-caption { z-index: 2; }
  .h-banner { display: flex !important; flex-direction: column; }
  .h-banner > picture { order: 0; } .h-banner > .h-caption { order: 1; } .h-banner > .h-quote { order: 2; }
  .h-caption { position: absolute !important; top: calc(clamp(230px, 64vw, 320px) - 38px) !important; bottom: auto !important; }
  .h-intro h1, .h-intro h1 span { white-space: normal !important; overflow-wrap: anywhere; }
  .h-intro h1 { font-size: clamp(24px, 6.6vw, 30px) !important; line-height: 1.25 !important; }
  .h-intro .sub { font-size: clamp(16px, 4.6vw, 19px) !important; line-height: 1.35 !important; }
}