/* The reference layout is authoritative. Only brand, logo spacing and native scrolling differ. */
html{scroll-behavior:auto!important}
body.reference-public{--tj-color-theme-primary:#01468c;--tj-color-theme-primary-hover:#012f66}
.reference-public .tj-btn-primary:not(.tj-btn-primary-light):not(.tj-btn-primary-border),.ref-shell .tj-btn-primary:not(.tj-btn-primary-light):not(.tj-btn-primary-border){background:#f5b60a;border-color:#f5b60a;color:#1f1400}
.reference-public .tj-btn-primary:not(.tj-btn-primary-light):not(.tj-btn-primary-border):hover,.ref-shell .tj-btn-primary:not(.tj-btn-primary-light):not(.tj-btn-primary-border):hover{background:#fdd525;color:#1f1400}
.reference-public .site_logo,.ref-shell .site_logo{max-width:205px}
.reference-public .site_logo img,.ref-shell .site_logo img{width:205px;height:auto;max-height:58px;object-fit:contain}
.reference-public .header-bottom,.ref-shell .header-bottom{padding-top:5px;padding-bottom:5px}
.reference-public .footer-logo img,.ref-shell .footer-logo img{width:245px;max-width:100%;height:auto}
.ref-language{padding:10px 13px!important;min-width:42px;margin-inline:8px;font-size:12px!important;align-self:center}
.ref-programs{background:#012f66;border-radius:8px;padding:4px 20px;color:#fff;font-size:23px;font-weight:700;line-height:1.4}
.ref-address{padding:70px 30px;text-align:center;background:#eaf2fc;color:#01468c;font-size:22px;border-radius:20px}
/* 24/09/2026: BỎ rule ép hiện theo lớp .anim-on — hiệu ứng chạy đúng như theme
   gốc; phần cứu nội dung nằm trong gsap-boot.js (lưới an toàn ở giây thứ 6). */
.reference-public .pf-rating,.reference-public .pf-comments{padding:24px;border:1px solid #e6e7eb;border-radius:16px;margin-top:20px}
.reference-public .pf-score{display:flex;gap:10px;align-items:center}
.reference-public .pf-stars{display:flex;gap:8px;align-items:center}
.reference-public .pf-star{border:0;background:transparent;color:#f5b60a;font-size:24px}
.reference-public .pf-comment{padding:15px 0;border-top:1px solid #e6e7eb}
.reference-public .pf-form textarea{width:100%;border:1px solid #e6e7eb;border-radius:10px;padding:15px}
.reference-public .btn{background:#f5b60a;border-radius:40px;color:#1f1400;padding:10px 20px}
.ref-shell{font-family:Manrope,sans-serif;font-size:16px;line-height:1.6;color:#434966}
.ref-shell a{text-decoration:none}.ref-shell .container{padding-block:0}.ref-shell h2{text-transform:none}
.ref-shell .header-area{position:relative}.ref-shell .header-area.header-sticky{position:fixed}
.ref-shell .footer-section{margin-top:0}.ref-shell .header-search-box input{margin:0;border-radius:40px}
.ref-shell .header-search-box form{margin:0}.ref-shell .header-search-box button{border:0;background:transparent}
@media(max-width:575px){.reference-public .site_logo,.ref-shell .site_logo{max-width:172px}.reference-public .site_logo img,.ref-shell .site_logo img{width:172px;max-height:49px}.ref-language{padding:8px 9px!important;margin-inline:3px}.ref-programs{font-size:16px}}

body.reference-public{overflow-x:clip}.reference-public .tj-client-marquee-wrapper{overflow:hidden}.reference-public .site_logo,.ref-shell .site_logo{padding:4px 0}.reference-public .site_logo .logo,.ref-shell .site_logo .logo{max-width:205px}.reference-public .header-bottom,.ref-shell .header-bottom{padding-top:0;padding-bottom:0}.banner-feature-course .course-price del{text-decoration:none}@media(max-width:575px){.reference-public .site_logo .logo,.ref-shell .site_logo .logo{max-width:172px}}

.reference-public #smooth-wrapper{overflow:hidden}

/* 24/09/2026 — nút đổi ngôn ngữ: 2 lá cờ thay chữ EN/VI */
.ref-langs{display:inline-flex;align-items:center;gap:6px;margin-inline:8px;align-self:center;line-height:0}
.ref-lang{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;padding:0;border:1px solid #d7e1ee;border-radius:50%;background:#fff;transition:border-color .2s ease,box-shadow .2s ease,opacity .2s ease}
.ref-lang img{display:block;width:26px;height:26px}
a.ref-lang{opacity:.62}
a.ref-lang:hover,a.ref-lang:focus-visible{opacity:1;border-color:#01468c}
.ref-lang.is-on{border-color:#01468c;box-shadow:0 0 0 2px rgba(1,70,140,.16)}
@media(max-width:575px){.ref-langs{gap:4px;margin-inline:3px}.ref-lang{width:32px;height:32px}.ref-lang img{width:22px;height:22px}}

/* ============================================================
   24/09/2026 — Chữ nghĩa trang công khai
   1. Tiêu đề đổi từ Urbanist sang Manrope: bộ Urbanist tải về KHÔNG có
      subset tiếng Việt (chỉ latin/latin-ext) nên "ế", "ữ", "ạ" phải mượn
      font hệ thống — đó là chỗ tiêu đề trông vỡ dấu. Manrope có subset
      vietnamese sẵn trong assets/reference/external/fonts.gstatic.com.
   2. Cỡ chữ co giãn theo bề ngang màn hình (clamp) thay cho các mốc px
      cứng của theme: h1 70px trên máy tính và 48px trên điện thoại đều quá
      to so với chuẩn đọc.
   3. Chữ đoạn văn đậm và tối hơn cho dễ đọc.
   ============================================================ */
:root{--tj-ff-heading:"Manrope",sans-serif;--tj-ff-urbanist:"Manrope",sans-serif}
:is(body.reference-public,.ref-shell){
  --tj-fs-h1:clamp(1.875rem,1.3rem + 2.2vw,3.125rem);
  --tj-fs-h2:clamp(1.5rem,1.05rem + 1.6vw,2.5rem);
  --tj-fs-h3:clamp(1.3125rem,1rem + 0.8vw,1.875rem);
  --tj-fs-h4:clamp(1.1875rem,0.95rem + 0.6vw,1.625rem);
  --tj-fs-h5:clamp(1.0625rem,0.92rem + 0.4vw,1.375rem);
  --tj-fs-h6:clamp(1rem,0.92rem + 0.22vw,1.1875rem);
  --tj-fs-body:clamp(1rem,0.95rem + 0.2vw,1.0625rem);
  --tj-fs-p:clamp(1rem,0.95rem + 0.2vw,1.0625rem);
  --tj-fs-p2:clamp(1.0625rem,0.98rem + 0.3vw,1.1875rem);
  --tj-color-text-body:#1b2533;
  --tj-color-text-body-2:#1b2533;
  --tj-color-text-body-3:#465166;
}
:is(body.reference-public,.ref-shell) :is(h1,.tj-fs-h1){font-size:var(--tj-fs-h1);line-height:1.14}
:is(body.reference-public,.ref-shell) :is(h2,.tj-fs-h2,.sec-title){font-size:var(--tj-fs-h2);line-height:1.18}
:is(body.reference-public,.ref-shell) :is(h3,.tj-fs-h3){font-size:var(--tj-fs-h3);line-height:1.25}
:is(body.reference-public,.ref-shell) :is(h4,.tj-fs-h4){font-size:var(--tj-fs-h4);line-height:1.3}
:is(body.reference-public,.ref-shell) :is(h5,.tj-fs-h5){font-size:var(--tj-fs-h5);line-height:1.35}
:is(body.reference-public,.ref-shell) :is(h6,.tj-fs-h6){font-size:var(--tj-fs-h6);line-height:1.4}
/* 24/09/2026: tiêu đề đậm hơn một nấc (600 -> 700); Manrope là font biến thiên 200–800 nên không phải tải thêm tệp. */
:is(body.reference-public,.ref-shell) :is(h1,h2,h3,h4,h5,h6,.tj-fs-h1,.tj-fs-h2,.tj-fs-h3,.tj-fs-h4,.tj-fs-h5,.tj-fs-h6,.sec-title){font-weight:700}
:is(body.reference-public,.ref-shell){font-size:var(--tj-fs-body);line-height:1.7}
:is(body.reference-public,.ref-shell) :is(p,li,.banner-desc,.desc,.sec-desc){font-size:var(--tj-fs-p);font-weight:500;line-height:1.7}
:is(body.reference-public,.ref-shell) .sec-subtitle{font-size:clamp(0.8125rem,0.78rem + 0.12vw,0.9375rem)}

/* ============================================================
   24/09/2026 — 4 nút liên hệ nhanh bốc từ giao diện cũ sang.
   Cột nổi bên phải trên máy tính, thanh 4 nút dưới đáy trên điện thoại.
   Giữ nguyên kiểu cũ: nút tròn nền gradient, icon PNG trắng, nhãn hiện khi
   rê chuột, icon rung nhẹ (chủ site cố ý để rung — đừng tự tắt).
   ============================================================ */
:is(body.reference-public,.ref-shell) .floating-contact{
  position:fixed;right:14px;bottom:22px;z-index:99;display:grid;width:48px;gap:10px;
}
:is(body.reference-public,.ref-shell) .floating-contact a{
  position:relative;width:48px;height:48px;padding:0;display:inline-flex;align-items:center;justify-content:center;
  border:0;border-radius:50%;color:#fff;box-shadow:0 6px 13px rgba(28,17,51,.28);
  transition:transform .18s ease,box-shadow .18s ease;
}
:is(body.reference-public,.ref-shell) .floating-contact a img{
  display:block;width:31px;height:31px;object-fit:contain;animation:lp-contact-shake 1s infinite ease-in-out;
}
:is(body.reference-public,.ref-shell) .floating-contact .fc-zalo{background:linear-gradient(180deg,#159cff,#0077e8)}
:is(body.reference-public,.ref-shell) .floating-contact .fc-call{background:linear-gradient(180deg,#22c55e,#15803d)}
:is(body.reference-public,.ref-shell) .floating-contact .fc-test{background:linear-gradient(180deg,#ff1e36,#e90019)}
:is(body.reference-public,.ref-shell) .floating-contact .fc-book{background:linear-gradient(180deg,#ff8126,#ff5b00)}
:is(body.reference-public,.ref-shell) .floating-contact a>span:last-child{
  position:absolute;right:58px;top:50%;width:max-content;max-width:220px;padding:.5rem .72rem;
  color:#fff;background:linear-gradient(135deg,#172554,#012f66);border:1px solid rgba(255,255,255,.7);
  border-radius:999px;box-shadow:0 12px 28px rgba(15,23,42,.2);font-size:.78rem;font-weight:700;line-height:1.2;
  opacity:0;visibility:hidden;pointer-events:none;transform:translate(8px,-50%);
  transition:opacity .18s ease,visibility .18s ease,transform .18s ease;
}
:is(body.reference-public,.ref-shell) .floating-contact a>span:last-child::after{
  content:"";position:absolute;right:-5px;top:50%;width:9px;height:9px;background:#012f66;
  border-top:1px solid rgba(255,255,255,.65);border-right:1px solid rgba(255,255,255,.65);
  transform:translateY(-50%) rotate(45deg);
}
:is(body.reference-public,.ref-shell) .floating-contact a:hover,
:is(body.reference-public,.ref-shell) .floating-contact a:focus-visible{transform:translateY(-3px);box-shadow:0 9px 18px rgba(28,17,51,.32)}
:is(body.reference-public,.ref-shell) .floating-contact a:hover>span:last-child,
:is(body.reference-public,.ref-shell) .floating-contact a:focus-visible>span:last-child{opacity:1;visibility:visible;transform:translateY(-50%)}
@keyframes lp-contact-shake{0%,50%,100%{transform:rotate(0)}10%,30%{transform:rotate(-25deg)}20%,40%{transform:rotate(25deg)}}
@media(prefers-reduced-motion:reduce){:is(body.reference-public,.ref-shell) .floating-contact a img{animation:none}}
:is(body.reference-public,.ref-shell) .mobile-cta{display:none}
@media(max-width:760px){
  :is(body.reference-public,.ref-shell) .floating-contact{display:none}
  :is(body.reference-public,.ref-shell) .mobile-cta{
    position:fixed;left:0;right:0;bottom:0;z-index:99;display:flex;
    padding:0 0 env(safe-area-inset-bottom);box-shadow:0 -8px 22px rgba(15,23,42,.12);
  }
  :is(body.reference-public,.ref-shell) .mobile-cta a{
    flex:1;min-width:0;min-height:52px;padding:.28rem .15rem;border:0;border-radius:0;
    display:flex;align-items:center;justify-content:center;color:#fff;line-height:1;
  }
  :is(body.reference-public,.ref-shell) .mobile-cta a img{display:block;width:28px;height:28px;object-fit:contain}
  :is(body.reference-public,.ref-shell) .mobile-cta .mc-zalo{background:linear-gradient(180deg,#159cff,#0077e8)}
  :is(body.reference-public,.ref-shell) .mobile-cta .mc-call{background:linear-gradient(180deg,#22c55e,#15803d)}
  :is(body.reference-public,.ref-shell) .mobile-cta .mc-test{background:linear-gradient(180deg,#ff1e36,#e90019)}
  :is(body.reference-public,.ref-shell) .mobile-cta .mc-book{background:linear-gradient(180deg,#ff8126,#ff5b00)}
  body.reference-public{padding-bottom:calc(52px + env(safe-area-inset-bottom))}
}

/* 24/09/2026 — tiêu đề khối không bị bẻ đôi oan.
   Theme bó `.sec-heading-center` ở 530px (tiêu đề tiếng Anh gốc ngắn hơn) nên
   câu tiếng Việt vừa đủ chỗ vẫn rớt xuống hàng hai. Nới khung tiêu đề, giữ
   riêng đoạn mô tả ở bề ngang dễ đọc, và dùng text-wrap:balance để khi buộc
   phải xuống hàng thì hai dòng dài bằng nhau thay vì dòng hai cụt lủn. */
:is(body.reference-public,.ref-shell) :is(.sec-heading-center,.tj-blog-section .sec-heading-center){max-width:min(100%,1000px)}
:is(body.reference-public,.ref-shell) :is(.sec-title,.banner-title,.tj-blog-section .sec-title){max-width:none;text-wrap:balance}
:is(body.reference-public,.ref-shell) .sec-heading-center :is(p,.sec-desc,.desc){max-width:680px;margin-inline:auto}

/* 24/09/2026 — chân trang: bỏ 2 huy hiệu Google Play / App Store (site không có
   ứng dụng), logo chuyển lên nằm trên khối "Đăng ký nhận tư vấn lộ trình học".
   Hàng bản quyền còn mỗi dòng chữ nên căn giữa lại cho khỏi lệch. */
:is(body.reference-public,.ref-shell) .footer-widget-subscribe .footer-logo{margin-bottom:22px}
:is(body.reference-public,.ref-shell) .footer-widget-subscribe .footer-logo img{width:230px;max-width:100%;height:auto}
:is(body.reference-public,.ref-shell) .tj-copyright-content-area{justify-content:center;text-align:center}

/* 24/09/2026 — ba chỗ phát sinh sau khi nới bề ngang tiêu đề:
   1. `.tj-client-marquee-wrapper{overflow:hidden}` (rule của chính tệp này, thêm
      hồi migrate để chặn cuộn ngang) cắt ngang bóng đổ 0 15px 30px của các thẻ
      logo → hiện ra một đường kẻ ngang chạy hết bề ngang. Chừa 40px trong vùng
      cắt rồi thu lại bằng margin âm: bố cục y nguyên, bóng không bị cắt.
   2. Tiêu đề đi kèm mũi tên trượt / nút "Xem thêm" nằm chung `.sec-heading-inner`
      (flex, cho phép xuống hàng). Bỏ max-width 530px của tiêu đề khiến nó chiếm
      trọn hàng và đẩy nút xuống dưới — từ 768px trở lên ép cùng một hàng.
   ============================================================ */
:is(body.reference-public,.ref-shell) .tj-client-marquee-wrapper{padding-block:40px;margin-block:-40px}
@media(min-width:768px){
  :is(body.reference-public,.ref-shell) .sec-heading-inner{flex-wrap:nowrap;gap:24px}
  :is(body.reference-public,.ref-shell) .sec-heading-inner .sec-title{max-width:none;width:auto;flex:1 1 auto}
  :is(body.reference-public,.ref-shell) .sec-heading-inner>:last-child{flex:0 0 auto}
}

/* 24/09/2026 — menu con: theme khóa cứng `width:220px` (đủ cho nhãn tiếng Anh),
   mục dài như "Tiếng Anh và y học tế bào" bị bẻ hai dòng. Cho khung ăn theo bề
   ngang chữ, mỗi mục một hàng, vẫn chặn trên để không tràn ra ngoài màn hình. */
:is(body.reference-public,.ref-shell) .mainmenu ul>li>.sub-menu{width:max-content;min-width:220px;max-width:min(92vw,420px)}
:is(body.reference-public,.ref-shell) .mainmenu ul>li>.sub-menu>li>a{white-space:nowrap}

/* 24/09/2026 — nút "lên đầu trang" chuyển sang mép trái cho khỏi chen với cột
   4 nút liên hệ bên phải; trên điện thoại nâng lên khỏi thanh liên hệ dưới đáy. */
:is(body.reference-public,.ref-shell) :is(.back-to-top-wrapper,.back-to-top-btn-show){inset-inline-end:auto;inset-inline-start:24px;bottom:28px}
@media(max-width:760px){
  :is(body.reference-public,.ref-shell) :is(.back-to-top-wrapper,.back-to-top-btn-show){inset-inline-start:16px;bottom:calc(64px + env(safe-area-inset-bottom))}
}

/* 24/09/2026 — thẻ khóa học cao bằng nhau: thẻ kéo dài hết ô, khối giá + nút
   bị đẩy xuống đáy. Riêng thẻ nổi ở banner giữ nguyên vì nó không nằm trong lưới. */
:is(body.reference-public,.ref-shell) .tj-course-item:not(.banner-feature-course){height:100%;display:flex;flex-direction:column}
:is(body.reference-public,.ref-shell) .tj-course-item:not(.banner-feature-course) .tj-course-content{flex:1 1 auto;display:flex;flex-direction:column}
/* 24/09/2026 (sửa lần 2): trước đây dồn toàn bộ phần dư vào một khe trước khối giá
   nên thẻ nào ít chữ trông như bị khoét một lỗ trống. Dùng space-between để phần dư
   chia đều cho mọi khe, thẻ vẫn cao bằng nhau mà không hở một mảng lớn. */
/* 24/09/2026 (sửa lần 3): chia đều phần dư làm cụm chữ nhìn loãng. Giờ giữ
   khoảng cách gốc của theme cho cụm chữ, chỉ đẩy khối giá + nút xuống đáy; để
   phần dư không dồn thành một lỗ to thì cho tiêu đề và dòng thông tin một chiều
   cao tối thiểu bằng nhau (tiêu đề 2 dòng, thông tin 2 dòng). */
:is(body.reference-public,.ref-shell) .tj-course-item:not(.banner-feature-course) .tj-course-content{justify-content:flex-start}
:is(body.reference-public,.ref-shell) .tj-course-item:not(.banner-feature-course) .title{min-height:2.5em}
:is(body.reference-public,.ref-shell) .tj-course-item:not(.banner-feature-course) .course-meta{min-height:3.6em}
:is(body.reference-public,.ref-shell) .tj-course-item:not(.banner-feature-course) .tj-course-price-wrap{margin-top:auto}

/* ============================================================
   24/09/2026 — dọn các chỗ vỡ sau khi đổi cỡ chữ + thêm bản đồ.
   ============================================================ */
/* Khoảng cách giữa các hàng thẻ: theme để margin-bottom trên chính thẻ, mà thẻ
   giờ cao 100% ô nên phần margin đó tràn ra ngoài và hai hàng dính nhau.
   Chuyển khoảng cách xuống ô (padding) để chiều cao ô vẫn ôm trọn cả khe. */
:is(body.reference-public,.ref-shell) .tj_filter_item{padding-bottom:30px}
:is(body.reference-public,.ref-shell) .tj_filter_item :is(.tj-course-item,.blog-item){margin-bottom:0;height:100%}
/* Thẻ bài viết: nút "Đọc bài viết" tụt xuống đáy thay vì lơ lửng giữa khoảng trống */
/* Chỉ áp cho lưới danh sách (trang tin tức, trang chủ có lọc) — KHÔNG áp cho
   khối `.tj-blog-wrap` ở trang chủ vì ở đó theme xếp ảnh trái - chữ phải. */
:is(body.reference-public,.ref-shell) .tj_filter_item .blog-item{display:flex;flex-direction:column}
:is(body.reference-public,.ref-shell) .tj_filter_item .blog-item .blog-content{flex:1 1 auto;display:flex;flex-direction:column}
:is(body.reference-public,.ref-shell) .tj-blog-wrap .blog-item:not(:first-child){flex-direction:row;flex-wrap:wrap;align-items:center}
:is(body.reference-public,.ref-shell) .tj_filter_item .blog-item .blog-btn{margin-top:auto;padding-top:14px}
/* (Đã bỏ 24/09/2026: từng cho ảnh thẻ lớn ở khối tin tức giãn hết phần dư.
   Chủ site muốn giữ nguyên cách trình bày của theme gốc — tỉ lệ ảnh 606/340.) */
/* Cụm số liệu ở đầu trang: theme bó 450px nên ô thứ ba rớt xuống hàng dưới */
:is(body.reference-public,.ref-shell) .tj-counter-wrapper-3{max-width:none}
/* Ô chọn (nice-select): chữ đang dính mép trên vì line-height cố định */
:is(body.reference-public,.ref-shell) .nice-select{display:flex;align-items:center;line-height:1.3}
/* Bản đồ Google ở trang liên hệ */
:is(body.reference-public,.ref-shell) .ref-map{display:block;width:100%;height:clamp(320px,42vw,540px);border:0;border-radius:20px}
:is(body.reference-public,.ref-shell) .ref-address-sm{padding:22px 24px;margin-top:16px;font-size:1.0625rem}
/* 4 nút liên hệ to hơn một nấc */
:is(body.reference-public,.ref-shell) .floating-contact{width:58px;gap:12px;right:16px}
:is(body.reference-public,.ref-shell) .floating-contact a{width:58px;height:58px}
:is(body.reference-public,.ref-shell) .floating-contact a img{width:36px;height:36px}
:is(body.reference-public,.ref-shell) .floating-contact a>span:last-child{right:68px;font-size:.82rem}
@media(max-width:760px){
  :is(body.reference-public,.ref-shell) .mobile-cta a{min-height:58px}
  :is(body.reference-public,.ref-shell) .mobile-cta a img{width:32px;height:32px}
  body.reference-public{padding-bottom:calc(58px + env(safe-area-inset-bottom))}
}

/* 24/09/2026 — chữ trong nút bị cắt dấu: theme khóa `.btn-text{height:19px;
   overflow:hidden}` (đủ cho chữ Latin không dấu, dùng cho hiệu ứng lật hai dòng
   chữ — markup của mình không có `.btn-text-inner` nên không cần khung cứng đó).
   Thả chiều cao ra để dấu "ễ", "ố", "ậ" không bị xén. */
:is(body.reference-public,.ref-shell) :is(.tj-btn-primary,.tj-text-btn,.tj-circle-btn) .btn-text{height:1.45em;top:-1.5px}
/* Mọi biến thể nút của theme đều để padding trên nhiều hơn dưới 3px (canh cho
   khung chữ 19px kiểu cũ). Khung cao lên thì chữ tụt xuống 1,5px so với tâm nút
   — kéo lại đúng 1,5px thay vì sửa padding của từng biến thể. */
:is(body.reference-public,.ref-shell) :is(.tj-btn-primary,.tj-text-btn,.tj-circle-btn) .btn-text-inner span{line-height:1.45}
/* Khung vẫn phải overflow:hidden vì main.js nhân đôi chữ để làm hiệu ứng lật;
   nới khung thì phải nới luôn quãng trượt khi rê chuột, nếu không sẽ lộ nửa dòng. */
:is(body.reference-public,.ref-shell) :is(.tj-btn-primary,.tj-text-btn,.tj-circle-btn):hover .btn-text-inner{transform:translateY(-1.45em)}

/* 24/09/2026 — tiêu đề viết hoa chữ cái đầu MỖI TỪ cho nổi khối.
   Dùng text-transform nên chữ viết tắt sẵn có (IELTS, APTIS, TESOL) giữ nguyên
   dạng hoa, và dữ liệu trong CSDL không bị đụng tới.
   Cố ý KHÔNG áp cho tiêu đề bài viết (.blog-title, .post-title) — đó là câu văn
   của người viết, viết hoa từng từ sẽ đọc rất gượng. */
:is(body.reference-public,.ref-shell) :is(h1,h2,h3,.tj-fs-h1,.tj-fs-h2,.tj-fs-h3,.sec-title,.banner-title,.tj-page-title,.tj-course-item .title,.tj-instructor-item .name){text-transform:capitalize}
:is(body.reference-public,.ref-shell) :is(.blog-title,.post-title,.tj-blog-wrap .blog-item .blog-title,.footer-widget .title,.tj-privacy-content h1,.tj-privacy-content h2,.tj-privacy-content h3,.tj-faq-section h3,.accordion-item h3){text-transform:none}

/* 24/09/2026 — chữ trong danh sách xổ xuống bị lệch lên trên: các dòng chọn là
   thẻ <li>, mà rule chung "p,li{line-height:1.7}" ở trên thắng `line-height:40px`
   của nice-select nên chữ không còn nằm giữa ô cao 40px. Căn giữa bằng flex cho
   chắc, không phụ thuộc line-height. */
:is(body.reference-public,.ref-shell) .nice-select .list .option{display:flex;align-items:center;min-height:40px;line-height:1.35}

/* 24/09/2026 — bản đồ bị bạc màu là do theme đặt `mix-blend-mode:luminosity`
   cho iframe trong `.map-area` (hòa với nền xanh nhạt của `.map`). Trả về bình thường. */
:is(body.reference-public,.ref-shell) .map-area iframe,
:is(body.reference-public,.ref-shell) .ref-map{mix-blend-mode:normal;filter:none}
:is(body.reference-public,.ref-shell) .map-area .map{background-color:transparent}

/* 24/09/2026 — QUY TẮC CHUNG cho tiêu đề khối: không để theme bó ngang.
   Theme đặt max-width 450–600px ở nhiều chỗ (`.sec-heading`, `.sec-heading-center`,
   `.sec-heading-inner-left`, `.tj-blog-section .sec-title`, `.cta-area .sec-heading`…)
   vì tiêu đề tiếng Anh gốc ngắn; câu tiếng Việt dài hơn nên rớt dòng dù còn thừa chỗ.
   Nới khung tiêu đề, riêng đoạn mô tả vẫn giữ bề ngang dễ đọc. */
@media(min-width:768px){
    /* Khối tiêu đề canh trái chạy hết bề ngang để nút đi kèm nằm sát mép phải;
     chỉ khối canh giữa mới cần chặn bề ngang. */
  :is(body.reference-public,.ref-shell) :is(.sec-heading,.sec-heading-inner-left){max-width:none}
  :is(body.reference-public,.ref-shell) .sec-heading-center{max-width:min(100%,1000px)}
  :is(body.reference-public,.ref-shell) .sec-heading-inner-left{max-width:none;width:auto;flex:1 1 auto}
  :is(body.reference-public,.ref-shell) :is(.sec-heading,.sec-heading-center,.sec-heading-inner-left) :is(p,.desc,.sec-desc){max-width:640px}
  :is(body.reference-public,.ref-shell) .sec-heading-center :is(p,.desc,.sec-desc){margin-inline:auto}
}

/* 24/09/2026 — logo to hơn, bỏ khoảng đệm trên/dưới của ô logo. */
:is(body.reference-public,.ref-shell) .site_logo{padding:0;max-width:232px}
:is(body.reference-public,.ref-shell) .site_logo .logo{max-width:232px}
:is(body.reference-public,.ref-shell) .site_logo img{width:232px;max-height:68px}
/* Ô tìm kiếm co lại một chút để hàng đầu trang không bị chật khi logo to lên. */
:is(body.reference-public,.ref-shell) .header-search-box input{max-width:170px}
@media(max-width:575px){
  :is(body.reference-public,.ref-shell) .site_logo,
  :is(body.reference-public,.ref-shell) .site_logo .logo{max-width:196px}
  :is(body.reference-public,.ref-shell) .site_logo img{width:196px;max-height:56px}
}

/* 24/09/2026 — chế độ xem DANH SÁCH của trang khóa học.
   Theme chỉ đặt `display:flex` cho thẻ ở chế độ này (không khai báo hướng), mà
   rule "thẻ cao bằng nhau" ở trên lại đặt `flex-direction:column` nên ảnh và chữ
   xếp chồng thành một cột hẹp. Trả lại hàng ngang và tắt các min-height chỉ dành
   cho chế độ lưới. */
:is(body.reference-public,.ref-shell) .tj-course-wrapper.list-view-active .tj-course-item{flex-direction:row}
:is(body.reference-public,.ref-shell) .tj-course-wrapper.list-view-active .tj-course-item :is(.title,.course-meta){min-height:0}
:is(body.reference-public,.ref-shell) .tj-course-wrapper.list-view-active .tj-course-item .tj-course-content{justify-content:flex-start}
:is(body.reference-public,.ref-shell) .tj-course-wrapper.list-view-active .tj-course-item .tj-course-price-wrap{margin-top:12px}
/* Hàng "trạng thái · học phí".
   25/09/2026 — trước đây cho `flex-wrap:wrap` nên trên thẻ hẹp (lưới 3 cột) cụm
   "Đang tuyển sinh" và học phí rớt xuống hai hàng. Giữ đúng MỘT hàng và thu nhỏ
   hai cụm chữ cho vừa; cụm trạng thái được phép co lại trước. */
:is(body.reference-public,.ref-shell) .tj-course-item .tj-course-price-wrap{flex-wrap:nowrap;gap:4px 10px}
:is(body.reference-public,.ref-shell) .tj-course-item .tj-course-price-wrap .single-rating{min-width:0;flex:0 1 auto;font-size:.8125rem;gap:3px}
:is(body.reference-public,.ref-shell) .tj-course-item .tj-course-price-wrap .single-rating .label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:is(body.reference-public,.ref-shell) .tj-course-item .tj-course-price-wrap .course-price{flex:0 0 auto;font-size:1rem;white-space:nowrap}
@media(max-width:1199px){
  :is(body.reference-public,.ref-shell) .tj-course-item .tj-course-price-wrap .single-rating{font-size:.75rem}
  :is(body.reference-public,.ref-shell) .tj-course-item .tj-course-price-wrap .course-price{font-size:.9375rem}
}

/* 24/09/2026 — thẻ bài viết gọn lại: tiêu đề và mô tả tối đa 2 dòng, quá thì "…".
   Dùng -webkit-line-clamp (Chrome/Safari/Firefox hiện đại đều hiểu). Cho tiêu đề
   một chiều cao tối thiểu 2 dòng để các thẻ trong cùng hàng thẳng nhau. */
/* Lưu ý: `.blog-title`/`.blog-desc` là con trực tiếp của `.blog-content` đang ở
   chế độ flex, mà flex item bị "blockify" nên `display:-webkit-box` trên chính
   nó không ăn (Chrome tính ra `flow-root`) và line-clamp mất tác dụng.
   Vì vậy kẹp dòng ở thẻ <a> bên trong tiêu đề, còn mô tả thì bọc bằng inner span. */
:is(body.reference-public,.ref-shell) .blog-item .blog-title{min-height:2.5em}
:is(body.reference-public,.ref-shell) .blog-item .blog-title>a,
:is(body.reference-public,.ref-shell) .blog-item .blog-desc{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}

/* 24/09/2026 — điện thoại: gom gọn ngăn kéo menu và thu nhỏ nút ở khối đầu trang.
   Theme dựng cho chữ tiếng Anh ngắn nên tiêu đề 22px, ô tìm kiếm cao 60px và các
   khối cách nhau 45–50px; trên màn hình hẹp nhìn rời rạc, cuộn nhiều. */
@media(max-width:767px){
  :is(body.reference-public,.ref-shell) .hamburger-title{font-size:1.0625rem;margin-bottom:12px}
  :is(body.reference-public,.ref-shell) .hamburger-search-area{margin-bottom:20px}
  /* Theme dùng selector dài (`input:not([type=submit])...`) nên phải viết lại đúng
     kiểu đó mới đè được chiều cao 60px. */
  :is(body.reference-public,.ref-shell) .hamburger_search input:not([type=submit]):not([type=radio]):not([type=checkbox]),
  :is(body.reference-public,.ref-shell) .hamburger_search input{height:44px;line-height:44px;font-size:.9375rem;padding:0 46px 0 14px}
  :is(body.reference-public,.ref-shell) .hamburger_search{margin-bottom:22px}
  :is(body.reference-public,.ref-shell) .hamburger_search button{height:44px;width:44px}
  :is(body.reference-public,.ref-shell) .hamburger-text{margin-bottom:18px}
  :is(body.reference-public,.ref-shell) .hamburger-infos{margin-bottom:22px}
  :is(body.reference-public,.ref-shell) .hamburger-infos .hamburger-title{margin-bottom:12px}
  :is(body.reference-public,.ref-shell) .hamburger-infos .contact-info .contact-item:not(:last-child){padding:4px 0}
  :is(body.reference-public,.ref-shell) .hamburger_menu .mean-container .mean-bar{margin-bottom:18px}
  :is(body.reference-public,.ref-shell) .hamburger_menu .mean-container .mean-nav ul li a{padding:11px 0}
  :is(body.reference-public,.ref-shell) .hamburger_menu .mean-container .mean-nav ul li .sub-menu li a{padding:9px 0}
  /* Hai nút ở khối đầu trang nằm chung một hàng */
  :is(body.reference-public,.ref-shell) .banner-content .btn-area{flex-wrap:nowrap;gap:10px}
  :is(body.reference-public,.ref-shell) .banner-content .btn-area>.tj-btn-primary{flex:1 1 0;min-width:0;justify-content:center;padding:12px 10px;font-size:.8125rem;white-space:nowrap}
  :is(body.reference-public,.ref-shell) .banner-content .btn-area>.tj-btn-primary .btn-icon{font-size:15px}
}

/* 24/09/2026 — điện thoại: cụm số liệu xếp 2 ô một hàng cho gọn (theme xếp dọc). */
@media(max-width:767px){
  :is(body.reference-public,.ref-shell) .tj-counter-wrapper{flex-wrap:wrap;row-gap:16px;padding:26px 0}
  
  :is(body.reference-public,.ref-shell) .tj-counter-item .counter-number{font-size:clamp(1.75rem,7vw,2.25rem)}
  /* Thanh 4 nút liên hệ dưới đáy: thêm chữ nhỏ dưới icon */
  :is(body.reference-public,.ref-shell) .mobile-cta a{flex-direction:column;gap:3px;min-height:60px;padding:6px 2px}
  :is(body.reference-public,.ref-shell) .mobile-cta a img{width:26px;height:26px}
  :is(body.reference-public,.ref-shell) .mobile-cta .mc-label{font-size:.68rem;font-weight:600;line-height:1;color:#fff;white-space:nowrap}
  body.reference-public{padding-bottom:calc(60px + env(safe-area-inset-bottom))}
}

/* 24/09/2026 — LỚP GỌN CHO ĐIỆN THOẠI.
   Nguyên tắc chủ site đặt ra: trên điện thoại chữ và khối phải nhỏ - vừa - gọn,
   không bê nguyên cỡ của máy tính. */
@media(max-width:767px){
  /* Nút trong khối đầu trang: padding đã cân đối lại nên bỏ phần kéo chữ lên 1,5px
     (phần bù đó chỉ dành cho padding lệch 3px của theme). */
  :is(body.reference-public,.ref-shell) .banner-content .btn-area>.tj-btn-primary .btn-text{top:0}
  /* Thẻ khóa học: mỗi hàng MỘT thẻ (nhiều chữ: lịch học, học phí, nút) */
  :is(body.reference-public,.ref-shell) .tj_filter_item:has(.tj-course-item){flex:0 0 100%;max-width:100%}
  /* Thẻ bài viết: hai thẻ một hàng cho gọn */
  :is(body.reference-public,.ref-shell) .tj_filter_item:has(.blog-item){flex:0 0 50%;max-width:50%}
  :is(body.reference-public,.ref-shell) .tj_filter_item{padding-bottom:16px}
  :is(body.reference-public,.ref-shell) .tj_filter_item .blog-item{padding:10px}
  :is(body.reference-public,.ref-shell) .tj_filter_item .blog-item .blog-title{font-size:.9375rem;line-height:1.3;min-height:2.6em}
  :is(body.reference-public,.ref-shell) .tj_filter_item .blog-item :is(.blog-desc,.blog-meta,.blog-btn){font-size:.75rem}
  :is(body.reference-public,.ref-shell) .tj_filter_item .tj-course-item{padding:12px}
  :is(body.reference-public,.ref-shell) .tj_filter_item .tj-course-item :is(.course-meta,.author,.tj-cat){font-size:.8125rem}
  :is(body.reference-public,.ref-shell) .tj_filter_item .tj-course-item .course-meta{min-height:0}
  /* Thẻ chương trình học: hai ô một hàng kể cả màn hình rất hẹp */
  :is(body.reference-public,.ref-shell) .row>[class*="col-"]:has(>.tj-categories-item){flex:0 0 50%;max-width:50%}
  /* Mọi cặp nút đều nằm chung một hàng — bắt theo cấu trúc (hai nút cạnh nhau)
     chứ không theo tên lớp, vì theme đặt tên khác nhau ở từng khối. */
  :is(body.reference-public,.ref-shell) :is(.btn-area,div:has(>.tj-btn-primary+.tj-btn-primary)){display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:10px}
  :is(body.reference-public,.ref-shell) :is(.btn-area,div:has(>.tj-btn-primary+.tj-btn-primary))>.tj-btn-primary{flex:1 1 0;min-width:0;justify-content:center;padding:12px 10px;font-size:.8125rem;white-space:nowrap}
  :is(body.reference-public,.ref-shell) :is(.btn-area,div:has(>.tj-btn-primary+.tj-btn-primary))>.tj-btn-primary .btn-text{top:0}
  /* Dải tiêu đề đầu các trang con: bớt cao để thấy nội dung ngay */
  :is(body.reference-public,.ref-shell) .tj-page-header{padding-top:34px;padding-bottom:34px}
  :is(body.reference-public,.ref-shell) .tj-page-header .tj-page-title{margin-bottom:6px}
  /* Cụm số liệu: lưới 2 cột thẳng hàng, bỏ vạch ngăn dọc của theme */
  :is(body.reference-public,.ref-shell) .tj-counter-wrapper{display:grid;grid-template-columns:repeat(2,1fr);gap:20px 10px}
  :is(body.reference-public,.ref-shell) .tj-counter-item{flex:none;max-width:none;border:0}
  :is(body.reference-public,.ref-shell) .tj-counter-item .tj-counter{padding:0;text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px}
  /* Khoảng cách giữa các khối bớt thoáng */
  :is(body.reference-public,.ref-shell) :is(.section-gap,.inner-gap){padding-top:44px;padding-bottom:44px}
  :is(body.reference-public,.ref-shell) :is(.section-gap-bottom,.inner-gap-bottom){padding-bottom:44px}
  :is(body.reference-public,.ref-shell) :is(.section-gap-top,.inner-gap-top){padding-top:44px}
  :is(body.reference-public,.ref-shell) .sec-heading{margin-bottom:18px}
}

/* 24/09/2026 — điện thoại (vòng 2): chữ nhỏ thêm một nấc và các thẻ nằm sát nhau hơn. */
@media(max-width:767px){
  :is(body.reference-public,.ref-shell){
    --tj-fs-h1:1.625rem;   /* 26px */
    --tj-fs-h2:1.375rem;   /* 22px */
    --tj-fs-h3:1.1875rem;  /* 19px */
    --tj-fs-h4:1.0625rem;  /* 17px */
    --tj-fs-h5:1rem;       /* 16px */
    --tj-fs-h6:.9375rem;   /* 15px */
    --tj-fs-body:.9375rem; /* 15px */
    --tj-fs-p:.9375rem;
    --tj-fs-p2:1rem;
  }
  :is(body.reference-public,.ref-shell) :is(p,li,.banner-desc,.desc,.sec-desc){line-height:1.6}
  :is(body.reference-public,.ref-shell) .sec-subtitle{font-size:.75rem}
  /* Khe giữa các thẻ hẹp lại */
  :is(body.reference-public,.ref-shell) .row{--bs-gutter-x:14px}
  :is(body.reference-public,.ref-shell) .row.rg-30{row-gap:14px}
  :is(body.reference-public,.ref-shell) .row>[class*="col-"]:has(>.tj-categories-item){margin-bottom:0}
  :is(body.reference-public,.ref-shell) .tj-categories-item{padding:14px}
}

/* 24/09/2026 — điện thoại: mọi nút (không riêng cặp nút) đều nhỏ lại.
   Padding thành cân đối nên phải trả `.btn-text{top:0}` — phần bù 1,5px chỉ dành
   cho padding lệch 3px của theme ở máy tính. */
@media(max-width:767px){
  :is(body.reference-public,.ref-shell) :is(.tj-btn-primary,.tj-btn-primary-md,.tj-btn-primary-sm,.tj-btn-primary-border,.tj-btn-primary-border-sm,.tj-btn-primary-light){padding:11px 16px;font-size:.8125rem}
  :is(body.reference-public,.ref-shell) .tj-btn-primary .btn-text{top:0}
  :is(body.reference-public,.ref-shell) .tj-btn-primary .btn-icon{font-size:15px}
  :is(body.reference-public,.ref-shell) .tj-text-btn{font-size:.8125rem}
  :is(body.reference-public,.ref-shell) .tj-text-btn .btn-text{top:0}
}

/* 24/09/2026 — điện thoại: khối tin tức ở trang chủ cũng hai thẻ một hàng.
   Theme chuyển lưới về một cột dưới 768px; ở đây trả lại hai cột, bỏ việc thẻ
   đầu chiếm hai dòng và cho hai thẻ phụ về dạng ảnh trên - chữ dưới cho vừa. */
@media(max-width:767px){
  :is(body.reference-public,.ref-shell) .tj-blog-wrap{grid-template-columns:repeat(2,1fr);gap:14px;grid-auto-rows:auto}
  :is(body.reference-public,.ref-shell) .tj-blog-wrap .blog-item:first-child{grid-column:auto;grid-row:auto}
  :is(body.reference-public,.ref-shell) .tj-blog-wrap .blog-item{padding:10px}
  :is(body.reference-public,.ref-shell) .tj-blog-wrap .blog-item:first-child .blog-thumb{aspect-ratio:16/10}
  :is(body.reference-public,.ref-shell) .tj-blog-wrap .blog-item:not(:first-child){flex-direction:column;align-items:stretch}
  :is(body.reference-public,.ref-shell) .tj-blog-wrap .blog-item:not(:first-child) .blog-thumb{width:100%;aspect-ratio:16/10}
  :is(body.reference-public,.ref-shell) .tj-blog-wrap .blog-item .blog-content{padding:10px 2px 0}
  :is(body.reference-public,.ref-shell) .tj-blog-wrap .blog-item .blog-title{font-size:.9375rem;line-height:1.3;min-height:2.6em}
  :is(body.reference-public,.ref-shell) .tj-blog-wrap .blog-item :is(.blog-meta,.blog-btn,.blog-desc){font-size:.75rem}
  :is(body.reference-public,.ref-shell) .tj-blog-wrap .blog-item .blog-btn{margin-top:8px}
}

/* 24/09/2026 — điện thoại: chân trang xếp hai cột cho đỡ dài
   (khối đăng ký nhận tư vấn vẫn chiếm trọn một hàng vì có logo và biểu mẫu). */
@media(max-width:767px){
  :is(body.reference-public,.ref-shell) .footer-widget-wrapper{display:grid;grid-template-columns:repeat(2,1fr);gap:22px 14px;align-items:start}
  :is(body.reference-public,.ref-shell) .footer-widget-subscribe{grid-column:1 / -1}
  :is(body.reference-public,.ref-shell) .footer-widget .title{font-size:1rem;margin-bottom:10px}
  :is(body.reference-public,.ref-shell) .footer-widget :is(li,li a,.footer-info,p){font-size:.8125rem;line-height:1.55}
  :is(body.reference-public,.ref-shell) .footer-widget ul li:not(:last-child){margin-bottom:6px}
  :is(body.reference-public,.ref-shell) .footer-widget-subscribe .footer-logo img{width:190px}
}

/* 24/09/2026 — điện thoại: cụm 3 số ở đầu các trang con nằm gọn trên MỘT hàng
   (cụm 4 số ở trang chủ vẫn 2 ô mỗi hàng vì nhãn dài hơn). */
@media(max-width:767px){
  :is(body.reference-public,.ref-shell) .tj-counter-wrapper-3{grid-template-columns:repeat(3,1fr);gap:10px 8px;padding:18px 0}
  :is(body.reference-public,.ref-shell) .tj-counter-wrapper-3 .counter-number{font-size:1.375rem}
  :is(body.reference-public,.ref-shell) .tj-counter-wrapper-3 .counter-label{font-size:.6875rem;line-height:1.3}
}

/* 24/09/2026 — điện thoại: bộ lọc trang khóa học gom vào một nút biểu tượng nằm
   cùng hàng với ô tìm kiếm (nút do runtime.js chèn). */
:is(body.reference-public,.ref-shell) .ref-filter-toggle{display:none}
@media(max-width:767px){
  :is(body.reference-public,.ref-shell) .tj-top-filter{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
  :is(body.reference-public,.ref-shell) .tj-top-filter>.tj-filter-widget:first-child{flex:1 1 auto;min-width:0;order:0;margin:0}
  :is(body.reference-public,.ref-shell) .ref-filter-toggle{order:1;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;padding:0;border:1px solid #d7e1ee;border-radius:14px;background:#fff;color:#01468c;font-size:18px}
  :is(body.reference-public,.ref-shell) .ref-filter-toggle[aria-expanded="true"]{background:#01468c;color:#fff;border-color:#01468c}
  :is(body.reference-public,.ref-shell) .tj-top-filter>.tj-filter-widget:not(:first-child){order:2;flex:0 0 calc(50% - 5px);max-width:calc(50% - 5px);margin:0}
  :is(body.reference-public,.ref-shell) .tj-top-filter:not(.is-filter-open)>.tj-filter-widget:not(:first-child){display:none}
  :is(body.reference-public,.ref-shell) .tj-top-filter .search-box input{height:46px}
}

/* 24/09/2026 — điện thoại: thu hẹp khoảng cách giữa các hàng BÊN TRONG thẻ khóa học. */
@media(max-width:767px){
  :is(body.reference-public,.ref-shell) .tj_filter_item .tj-course-item .tj-course-content{gap:6px;padding:10px 4px 2px}
  :is(body.reference-public,.ref-shell) .tj_filter_item .tj-course-item .tj-course-content>*{margin-bottom:0}
  :is(body.reference-public,.ref-shell) .tj_filter_item .tj-course-item .title{margin:0;min-height:0}
  :is(body.reference-public,.ref-shell) .tj_filter_item .tj-course-item .author{margin:0}
  :is(body.reference-public,.ref-shell) .tj_filter_item .tj-course-item .course-meta{margin:0;gap:2px 10px}
  :is(body.reference-public,.ref-shell) .tj_filter_item .tj-course-item .tj-course-price-wrap{margin-top:4px;padding-top:8px}
  :is(body.reference-public,.ref-shell) .tj_filter_item .tj-course-item>a.tj-btn-primary,
  :is(body.reference-public,.ref-shell) .tj_filter_item .tj-course-item .tj-course-content>a.tj-btn-primary{margin-top:6px}
  :is(body.reference-public,.ref-shell) .tj_filter_item .tj-course-item .tj-cat-level-wrap{margin:0}
}

/* 24/09/2026 — điện thoại: thẻ "chương trình học" bị hở một khoảng giữa dòng
   "Khám phá" và hàng nút, do theme đặt `.btn-area{margin-top:38px}` (canh cho
   thẻ cao 4 ô một hàng ở máy tính). Thu lại và cho tiêu đề chiều cao tối thiểu
   2 dòng để thẻ 1 dòng và 2 dòng tiêu đề cao bằng nhau. */
@media(max-width:767px){
  :is(body.reference-public,.ref-shell) .tj-categories-item{padding:16px 14px 10px}
  :is(body.reference-public,.ref-shell) .tj-categories-icon{width:48px;height:48px}
  :is(body.reference-public,.ref-shell) .tj-categories-icon i{font-size:24px}
  :is(body.reference-public,.ref-shell) .tj-categories-content .title{margin:10px 0 2px}
  /* Thay vì ép tiêu đề cao 2 dòng (làm thẻ 1 dòng hở ngay dưới tiêu đề), cho
     cả thẻ là cột flex rồi đẩy hàng nút xuống đáy — các thẻ vẫn thẳng hàng. */
  :is(body.reference-public,.ref-shell) .tj-categories-item{height:100%;display:flex;flex-direction:column}
  :is(body.reference-public,.ref-shell) .tj-categories-content{flex:1 1 auto;display:flex;flex-direction:column}
  :is(body.reference-public,.ref-shell) .tj-categories-content .btn-area{margin-top:auto}
  :is(body.reference-public,.ref-shell) .tj-categories-content .courses{font-size:.8125rem}
  :is(body.reference-public,.ref-shell) .tj-categories-content .btn-area{margin-top:12px;padding-top:10px}
}

/* 24/09/2026 — trang chi tiết bài viết: ghim cột phải (tìm kiếm · chủ đề ·
   bài viết mới) khi cuộn. Dùng position:sticky nên không cần JS; cột bootstrap
   đã cao bằng cột nội dung nên phần ghim chạy hết chiều dài bài. */
@media(min-width:992px){
  :is(body.reference-public,.ref-shell) .tj_wpost_sidebar{position:sticky;top:100px}
}
/* 24/09/2026 — điện thoại: bỏ nút "lên đầu trang" (đã có thanh liên hệ dưới đáy). */
@media(max-width:767px){
  :is(body.reference-public,.ref-shell) .back-to-top-wrapper{display:none!important}
}

/* 24/09/2026 — chừa chỗ cho thanh đầu trang đúng bằng chiều cao thật của nó
   (runtime.js ghi vào --ref-header-h), thay cho các con số cứng của theme. */
:is(body.reference-public,.ref-shell) .space-for-header,
:is(body.reference-public,.ref-shell).top-space .space-for-header{padding-top:var(--ref-header-h,77px)}

/* 24/09/2026 — trả lại khoảng thở trên/dưới cho thanh đầu trang: đợt phóng to
   logo đã đặt `.site_logo{padding:0}` + `.header-bottom{padding:0}` nên logo
   dính sát mép, rõ nhất trên điện thoại. Phần chừa chỗ bên dưới tự co giãn theo
   (runtime.js đo lại chiều cao thật vào --ref-header-h) nên không sinh dải trắng. */
:is(body.reference-public,.ref-shell) .header-area .header-bottom{padding-top:7px;padding-bottom:7px}
@media(max-width:767px){
  :is(body.reference-public,.ref-shell) .header-area .header-bottom{padding-top:9px;padding-bottom:9px}
}

/* 24/09/2026 — điện thoại: hai chỗ còn lệch / còn dài.
   1. Cụm số liệu: theme cố ý so le các ô (margin-top 30–50px cho ô thứ 3, 4…)
      để xếp kiểu bậc thang ở máy tính; trong lưới 2 cột thì thành lệch hàng.
   2. Lộ trình học: đưa số thứ tự sang trái, thẻ nội dung nối ngay bên phải,
      bỏ các mũi tên nối vốn vẽ cho hàng ngang ở máy tính. */
@media(max-width:767px){
  :is(body.reference-public,.ref-shell) .tj-counter-wrapper .tj-counter-item{margin:0;padding-top:0;align-self:start}
  :is(body.reference-public,.ref-shell) .tj-career-path-wrapper{display:flex;flex-direction:column;gap:12px}
  :is(body.reference-public,.ref-shell) .tj-career-path-item{width:100%;padding-top:0;display:flex;align-items:center;gap:10px}
  :is(body.reference-public,.ref-shell) .tj-career-path-item :is(.path-arrow,.path-arrow-start){display:none}
  :is(body.reference-public,.ref-shell) .tj-career-path-item .sl-no{position:static;margin:0;flex:0 0 auto;width:44px;height:44px;font-size:.875rem}
  :is(body.reference-public,.ref-shell) .tj-career-path-item-inner{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:10px;padding:12px;text-align:start}
  :is(body.reference-public,.ref-shell) .tj-career-path-item-inner::before,
  :is(body.reference-public,.ref-shell) .tj-career-path-item-inner::after{display:none}
  :is(body.reference-public,.ref-shell) .tj-career-path-icon{flex:0 0 auto;width:40px;height:40px;margin:0;font-size:18px}
  :is(body.reference-public,.ref-shell) .tj-career-path-content{min-width:0}
  :is(body.reference-public,.ref-shell) .tj-career-path-content .title{margin:0 0 2px}
  :is(body.reference-public,.ref-shell) .tj-career-path-content .desc{margin:0;font-size:.8125rem;line-height:1.45}
}

/* 24/09/2026 — ngăn kéo menu trên điện thoại: mũi tên xổ mục con bị lệch sau khi
   thu gọn chiều cao dòng (theme neo nó bằng `top:10px` + `translate(7px,4px)`,
   canh cho dòng cao 18px gốc). Neo lại theo giữa dòng. Mở nhanh hơn: theme để
   `transition-duration:1s`. Logo trong ngăn kéo cũng phóng to cho cân. */
/* `li` không được position nên `top:50%` tính theo cả khối menu -> lệch hẳn xuống;
   quay lại mốc cố định khớp với chiều cao dòng mới (padding 11px + chữ ~24px). */
/* Bỏ hẳn kiểu định vị tuyệt đối cho mũi tên: cho `li` thành hàng flex, mũi tên
   là một ô trong hàng nên luôn nằm đúng giữa dòng chữ, không phụ thuộc con số
   `top` nào của theme (đó là lý do trước đây lệch xuống 3–4px). */
:is(body.reference-public,.ref-shell) .hamburger_menu .mean-container .mean-nav ul li{display:flex;flex-wrap:wrap;align-items:center}
:is(body.reference-public,.ref-shell) .hamburger_menu .mean-container .mean-nav ul li>a:not(.mean-expand){flex:1 1 auto;width:auto;min-width:0}
:is(body.reference-public,.ref-shell) .hamburger_menu .mean-container .mean-nav ul li>a.mean-expand{position:static;flex:0 0 auto;transform:none;width:34px;height:34px;line-height:1;display:flex;align-items:center;justify-content:center;border:0}
:is(body.reference-public,.ref-shell) .hamburger_menu .mean-container .mean-nav ul li>ul{flex:0 0 100%}
:is(body.reference-public,.ref-shell) .hamburger-area,
:is(body.reference-public,.ref-shell) .hamburger_wrapper,
:is(body.reference-public,.ref-shell) .hamburger_bg{transition-duration:.32s}
:is(body.reference-public,.ref-shell) .hamburger_logo img{width:180px;max-width:100%;height:auto;max-height:54px;object-fit:contain}
@media(max-width:767px){
  /* Ngày đăng ở thẻ bài viết: chữ nhỏ, đứng cùng hàng với nhãn chuyên mục */
  :is(body.reference-public,.ref-shell) .blog-item .blog-meta{gap:6px 10px;flex-wrap:wrap;align-items:center}
  :is(body.reference-public,.ref-shell) .blog-item .blog-meta :is(.blog-meta-item,.blog-meta-item span,.blog-category){font-size:.6875rem;line-height:1.2}
  :is(body.reference-public,.ref-shell) .blog-item .blog-meta .blog-meta-item i{font-size:.75rem}
  :is(body.reference-public,.ref-shell) .blog-item .blog-category{padding:3px 8px}
}

/* 24/09/2026 — điện thoại: các ô số liệu nền màu (`.skill-counter-item`) xếp
   2 ô một hàng và thấp lại, thay vì mỗi ô một hàng rất cao. */
@media(max-width:767px){
  :is(body.reference-public,.ref-shell) .tj-counter-wrapper:has(.skill-counter-item){display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
  :is(body.reference-public,.ref-shell) .skill-counter-item{margin:0;padding:14px 10px;border-radius:16px;min-height:0}
  :is(body.reference-public,.ref-shell) .skill-counter-item .counter-number{font-size:1.5rem;margin-bottom:2px}
  :is(body.reference-public,.ref-shell) .skill-counter-item .counter-label{font-size:.75rem;line-height:1.3}
}

/* 24/09/2026 — điện thoại: THU NHỎ MỌI NÚT của theme, không sót biến thể.
   Theme có hàng chục lớp nút (tj-btn-primary-2/-3, -light, -border, -full…),
   mỗi lớp một bộ padding riêng và độ đặc hiệu cao, nên ở đây bắt theo tiền tố
   lớp và dùng !important cho đúng hai thuộc tính kích thước. */
@media(max-width:767px){
  :is(body.reference-public,.ref-shell) [class*="tj-btn"]{padding-top:10px!important;padding-bottom:10px!important;padding-inline:16px!important;font-size:.8125rem!important}
  :is(body.reference-public,.ref-shell) [class*="tj-btn"] .btn-text{top:0;height:1.45em}
  :is(body.reference-public,.ref-shell) [class*="tj-btn"] .btn-icon{font-size:15px}
  :is(body.reference-public,.ref-shell) .tj-btn-full{width:100%}
}

/* 24/09/2026 — điện thoại: ô tìm kiếm ở trang khóa học có `min-width:310px` của
   theme nên nút bộ lọc bị đẩy xuống hàng dưới. */
@media(max-width:767px){
  :is(body.reference-public,.ref-shell) .tj-filter-widget form input[type=search]{min-width:0}
}

/* 24/09/2026 — thẻ bài viết thứ 4 chỉ dành cho điện thoại (lưới 2 cột cần số chẵn);
   máy tính giữ nguyên bố cục 1 thẻ lớn + 2 thẻ nhỏ của theme. */
.ref-mobile-only{display:none}
/* 25/09/2026 — theme có `.tj-blog-wrap .blog-item:not(:first-child){display:flex}`
   (0,3,0) thắng `.ref-mobile-only` (0,1,0) nên thẻ thứ 4 vẫn hiện trên máy tính.
   Viết lại cho đủ mạnh, và bản điện thoại phải mạnh tương đương để bật lại. */
:is(body.reference-public,.ref-shell) .tj-blog-wrap .blog-item.ref-mobile-only{display:none}
@media(max-width:767px){
  :is(body.reference-public,.ref-shell) .ref-mobile-only{display:flex}
  :is(body.reference-public,.ref-shell) .tj-blog-wrap .blog-item.ref-mobile-only{display:flex}
  /* Bỏ mô tả và kéo các dòng lại gần nhau cho thẻ gọn */
  :is(body.reference-public,.ref-shell) .blog-item .blog-desc{display:none}
  :is(body.reference-public,.ref-shell) .blog-item .blog-content{gap:4px}
  :is(body.reference-public,.ref-shell) .blog-item .blog-meta{margin-bottom:2px}
  :is(body.reference-public,.ref-shell) .blog-item .blog-title{margin:0}
  :is(body.reference-public,.ref-shell) .blog-item .blog-btn{margin-top:4px!important;padding-top:0}
}

/* 24/09/2026 — nút "Chỉ đường" thay cho nút Test trong cụm liên hệ nhanh. */
:is(body.reference-public,.ref-shell) .floating-contact .fc-map{background:linear-gradient(180deg,#2aa7ff,#0b7ddb)}
:is(body.reference-public,.ref-shell) .mobile-cta .mc-map{background:linear-gradient(180deg,#2aa7ff,#0b7ddb)}

/* 24/09/2026 — điện thoại: kéo icon sát vào số + nhãn để nhìn ra là một cụm. */
@media(max-width:767px){
  :is(body.reference-public,.ref-shell) .tj-counter-item .tj-counter{gap:2px}
  :is(body.reference-public,.ref-shell) .tj-counter-item .tj-counter>*{margin:0}
  :is(body.reference-public,.ref-shell) .tj-counter-item :is(.counter-icon,.icon){margin-bottom:2px;font-size:20px;line-height:1}
  :is(body.reference-public,.ref-shell) .tj-counter-item .counter-label{margin-top:0}
}

/* 24/09/2026 — điện thoại: biểu mẫu đăng nhập / tạo tài khoản gọn lại
   (theme để khung 43px×48px, ô nhập cao 56px, khoảng cách 25–30px). */
@media(max-width:767px){
  :is(body.reference-public,.ref-shell) .tj-login-form-wrapper{padding:18px 14px}
  :is(body.reference-public,.ref-shell) .login-form-header{margin-bottom:12px}
  :is(body.reference-public,.ref-shell) .login-form-header .desc{margin:4px 0 0}
  :is(body.reference-public,.ref-shell) .login-social{margin-bottom:12px}
  :is(body.reference-public,.ref-shell) .tj-social-login-btn{padding:9px 12px;font-size:.875rem}
  :is(body.reference-public,.ref-shell) .tj-login-form .form-input{margin-bottom:10px}
  :is(body.reference-public,.ref-shell) .tj-login-form .cf-label{margin-bottom:4px;font-size:.8125rem}
  :is(body.reference-public,.ref-shell) .tj-login-form :is(input[type=text],input[type=email],input[type=password],input[type=tel],input[type=search]){height:44px;font-size:.875rem}
  :is(body.reference-public,.ref-shell) .tj-login-form .input-icon-wrap .input-icon{font-size:15px}
  :is(body.reference-public,.ref-shell) .tj-login-form .form-bottom-text{margin-top:10px;font-size:.8125rem}
}

/* 24/09/2026 — điện thoại: nút gửi của biểu mẫu đăng nhập/đăng ký bị theme ép
   `min-height:56px`, nên rule thu nhỏ nút chung không ăn. */
@media(max-width:767px){
  :is(body.reference-public,.ref-shell) .tj-login-form .form-submit .tj-btn-primary{min-height:44px}
}

/* 24/09/2026 — dấu +/× của mục hỏi đáp: theme neo `top:23px` theo cỡ chữ gốc,
   sau khi đổi cỡ chữ và line-height thì lệch so với dòng đầu. Đặt lại mốc cho khớp.
   25/09/2026 — neo cứng theo px vẫn sai khi câu hỏi dài xuống 2-3 dòng: dấu bám
   dòng đầu chứ không nằm giữa hàng. Canh giữa theo chiều cao thật của nút.
   Lưu ý: trạng thái mở có sẵn `rotate(-45deg)` nên phải viết lại cả hai transform,
   nếu không dấu × sẽ mất phần dịch lên. */
:is(body.reference-public,.ref-shell) .tj-accordion-title{padding-top:18px;padding-bottom:18px;line-height:1.35}
:is(body.reference-public,.ref-shell) .tj-accordion-title::after{top:50%;transform:translateY(-50%)}
:is(body.reference-public,.ref-shell) .tj-accordion-title:not(.collapsed)::after{transform:translateY(-50%) rotate(-45deg)}
@media(max-width:767px){
  :is(body.reference-public,.ref-shell) .tj-accordion-title{padding-top:14px;padding-bottom:14px;padding-inline-end:36px}
  :is(body.reference-public,.ref-shell) .tj-accordion-title::after{width:26px;height:26px}
}

/* 24/09/2026 — điện thoại: rút ngắn mọi hiệu ứng chuyển của CSS cho khớp thao tác
   (theme để 0.3–1s). Giữ nguyên `animation` để hiệu ứng rung của cụm liên hệ
   không bị nhanh bất thường. */
@media(max-width:767px){
  :is(body.reference-public,.ref-shell) *,
  :is(body.reference-public,.ref-shell) *::before,
  :is(body.reference-public,.ref-shell) *::after{transition-duration:.22s!important}
  :is(body.reference-public,.ref-shell) .hamburger-area,
  :is(body.reference-public,.ref-shell) .hamburger_wrapper,
  :is(body.reference-public,.ref-shell) .hamburger_bg{transition-duration:.26s!important}
}

/* 24/09/2026 — nút tìm kiếm ở thanh đầu trang trên điện thoại (runtime.js chèn). */
:is(body.reference-public,.ref-shell) .ref-search-btn{
  display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;padding:0;
  border:0;background:transparent;color:var(--tj-color-heading-primary);font-size:19px;line-height:1;cursor:pointer;
}
:is(body.reference-public,.ref-shell) .ref-search-btn:hover{color:var(--tj-color-theme-primary-hover)}
@media(min-width:992px){:is(body.reference-public,.ref-shell) .ref-search-btn{display:none}}

/* 24/09/2026 — điện thoại: cụm biểu tượng bên phải thanh đầu trang sát lại. */
@media(max-width:991px){
  :is(body.reference-public,.ref-shell) .header-right-item{gap:2px}
  :is(body.reference-public,.ref-shell) .ref-langs{margin-inline:2px;gap:4px}
  :is(body.reference-public,.ref-shell) .ref-lang{width:30px;height:30px}
  :is(body.reference-public,.ref-shell) .ref-lang img{width:20px;height:20px}
  :is(body.reference-public,.ref-shell) .ref-search-btn{width:32px;height:32px;font-size:17px}
  :is(body.reference-public,.ref-shell) .header-user .user-btn{width:32px;height:32px;font-size:17px}
  :is(body.reference-public,.ref-shell) .menu_btn{margin-inline-start:2px;padding-inline:4px}
}

/* 24/09/2026 — điện thoại: cụm biểu tượng bên phải thanh đầu trang canh cùng một
   trục và cùng cỡ (cờ, tìm kiếm, tài khoản, menu vốn mỗi thứ một chiều cao). */
@media(max-width:991px){
  :is(body.reference-public,.ref-shell) .header-right-item{display:inline-flex;align-items:center}
  :is(body.reference-public,.ref-shell) .header-right-item>*{display:inline-flex;align-items:center}
  :is(body.reference-public,.ref-shell) :is(.ref-search-btn,.header-user,.header-user .user-btn,.menu_btn){height:34px;align-items:center;justify-content:center}
  :is(body.reference-public,.ref-shell) .header-user .user-btn{width:32px;padding:0}
  :is(body.reference-public,.ref-shell) .menu_btn{display:inline-flex;padding:0 2px}
  :is(body.reference-public,.ref-shell) .menu_btn .bars{display:flex;flex-direction:column;justify-content:center;gap:5px}
  :is(body.reference-public,.ref-shell) .ref-lang{width:30px;height:30px}
}

/* 24/09/2026 — điện thoại: icon tìm kiếm và tài khoản để cùng cỡ với nút menu
   (theme để 17px trong khi vạch menu rộng ~22px nên nhìn bé hơn hẳn). */
@media(max-width:991px){
  :is(body.reference-public,.ref-shell) .ref-search-btn,
  :is(body.reference-public,.ref-shell) .header-user .user-btn{width:34px;font-size:21px}
  :is(body.reference-public,.ref-shell) .ref-search-btn i,
  :is(body.reference-public,.ref-shell) .header-user .user-btn i{font-size:21px;line-height:1}
  :is(body.reference-public,.ref-shell) .menu_btn .bars span{width:22px;height:2px}
}

/* 25/09/2026 — dải số liệu nền navy: vòng tròn sau icon dùng `--tj-color-theme-dark`,
   sau khi đổi bộ màu thương hiệu nó trùng đúng màu nền dải nên icon như trôi lơ lửng.
   Cho nền trắng mờ + viền mảnh để vòng tròn hiện lại. */
:is(body.reference-public,.ref-shell) .tj-counter-section .tj-counter .counter-icon{
  background-color:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.3);
}

/* 25/09/2026 — ảnh thật của Mr.Nha là ảnh dọc 3:4, còn khung thẻ giảng viên của
   theme là hình vuông/tròn. Cắt theo tâm mặt thay vì để tràn xuống dưới. */
:is(body.reference-public,.ref-shell) .tj-instructor-img .mrnha-photo{
  width:100%;height:100%;object-fit:cover;object-position:50% 14%;
}
/* 25/09/2026 — chỉ còn MỘT thẻ nên thẻ canh giữa, câu dẫn chuyển lên ngay dưới
   tiêu đề mục (giữ canh trái cho khớp tiêu đề, chặn bề ngang cho dễ đọc). */
:is(body.reference-public,.ref-shell) .sec-heading>.mrnha-lead,
:is(body.reference-public,.ref-shell) .mrnha-row .mrnha-lead{
  margin:14px 0 0;max-width:62ch;font-size:1.0625rem;line-height:1.7;color:var(--tj-color-text-body);
}
:is(body.reference-public,.ref-shell) .mrnha-row{justify-content:center}
@media(max-width:991px){
  :is(body.reference-public,.ref-shell) .sec-heading>.mrnha-lead,
  :is(body.reference-public,.ref-shell) .mrnha-row .mrnha-lead{font-size:1rem}
}
/* Ảnh đại diện nhỏ ở dòng "Mr.Nha và cộng sự" trên thẻ khóa học/bài viết */
:is(body.reference-public,.ref-shell) .author img{object-fit:cover;object-position:50% 12%}

/* 25/09/2026 — trang Giảng viên: ba ý ngắn + dải "tuyển giảng viên" ở cuối. */
:is(body.reference-public,.ref-shell) .mrnha-points{margin-top:56px}
:is(body.reference-public,.ref-shell) .mrnha-point{
  height:100%;padding:24px;border:1px solid var(--tj-color-border-3);border-radius:18px;
  background-color:var(--tj-color-common-white);box-shadow:0 15px 30px var(--tj-color-shadow-1);
}
:is(body.reference-public,.ref-shell) .mrnha-point-title{margin:0 0 8px}
:is(body.reference-public,.ref-shell) .mrnha-point p{margin:0;line-height:1.7}
:is(body.reference-public,.ref-shell) .mrnha-jobs{
  margin-top:56px;padding:28px 32px;border-radius:18px;
  background-color:var(--tj-color-theme-bg-2,#eef4fd);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;
}
:is(body.reference-public,.ref-shell) .mrnha-jobs h3{margin:0 0 4px}
:is(body.reference-public,.ref-shell) .mrnha-jobs p{margin:0}
@media(max-width:575px){
  :is(body.reference-public,.ref-shell) .mrnha-jobs{padding:22px}
  :is(body.reference-public,.ref-shell) .mrnha-points{margin-top:36px}
}

/* 25/09/2026 — biểu mẫu đăng ký tư vấn: rộng ra và xếp ô theo cặp 50/50.
   Bề ngang bị `public-refine-v1.css` khóa bằng
   `body.site-flat.guest main.container .auth-card{width:min(100%,468px)}` — (0,4,2),
   mạnh hơn mọi selector ngắn, nên phải viết đủ dài mới đè được.
   `.form-row` ở site này là grid chứ không phải flex, nên đặt thẳng
   grid-template-columns thay vì trông chờ vào flex-basis. */
body.site-flat.guest main.container .auth-card.auth-card-wide,
body.guest .auth-card.auth-card-wide{width:min(100%,860px);max-width:860px;padding:2rem 2.25rem;margin-inline:auto}
body.guest .auth-card.auth-card-wide .form-row{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 1.5rem;align-items:start;
}
body.guest .auth-card.auth-card-wide .form-row>div{min-width:0}
@media(max-width:575px){
  body.guest .auth-card.auth-card-wide{padding:1.35rem}
  body.guest .auth-card.auth-card-wide .form-row{grid-template-columns:minmax(0,1fr)}
}

/* 25/09/2026 — nút ở trang công khai thấp bớt cho gọn. Chỉ đụng kích thước dọc,
   giữ nguyên bề ngang/bo góc/màu. Ba điểm đã vấp phải:
   - `:not()` CÓ tính vào độ đặc hiệu, nên rule gốc `[class*=…]:not():not()` (0,4,1)
     nuốt luôn các rule biến thể viết kiểu `:is(.tj-btn-primary-sm,…)` (0,2,1).
     Vì vậy các biến thể phải lặp lại nguyên khuôn của rule gốc rồi mới thêm `:is(…)`.
   - `.tj-btn-primary-2/-3` không có padding ở thẻ ngoài mà ở `.btn-inner`.
   - Chiều cao của `-2/-3` do vòng tròn icon 44px quyết định, không phải padding.
   Điện thoại đã có rule riêng (10px) ở khối 24/09 phía trên, không đụng tới. */
@media(min-width:768px){
  :is(body.reference-public,.ref-shell) [class*="tj-btn-primary"]:not(.tj-btn-primary-2):not(.tj-btn-primary-3){
    padding-top:15px!important;padding-bottom:13px!important;
  }
  :is(body.reference-public,.ref-shell) [class*="tj-btn-primary"]:not(.tj-btn-primary-2):not(.tj-btn-primary-3):is(.tj-btn-primary-md,.tj-btn-primary-border){
    padding-top:13px!important;padding-bottom:11px!important;
  }
  :is(body.reference-public,.ref-shell) [class*="tj-btn-primary"]:not(.tj-btn-primary-2):not(.tj-btn-primary-3):is(.tj-btn-primary-sm,.tj-btn-primary-border-sm){
    padding-top:11px!important;padding-bottom:9px!important;
  }
  :is(body.reference-public,.ref-shell) :is(.tj-btn-primary-2,.tj-btn-primary-3) .btn-inner{
    padding-top:8px!important;padding-bottom:8px!important;
  }
  :is(body.reference-public,.ref-shell) :is(.tj-btn-primary-2,.tj-btn-primary-3) .btn-icon{
    width:34px!important;height:34px!important;font-size:15px!important;
  }
}

/* 25/09/2026 — dải khuyến mãi liệt kê thêm "Mất gốc" và "Giao tiếp" nên chuỗi dài
   gần gấp đôi. Thu cỡ chữ của ô chương trình theo bề ngang màn hình để nó không
   chen vào dòng "Học thử 7 ngày…" và nút "Nhận tư vấn". */
@media(max-width:1599px){
  :is(body.reference-public,.ref-shell) .ref-programs{font-size:19px;padding:4px 16px}
}
@media(max-width:1399px){
  :is(body.reference-public,.ref-shell) .ref-programs{font-size:16px;padding:3px 13px}
}
@media(max-width:1199px){
  :is(body.reference-public,.ref-shell) .ref-programs{font-size:14px;padding:3px 11px}
}

/* =========================================================================
   25/09/2026 — Trang Giảng viên: hồ sơ đầy đủ (học vấn, bằng cấp, hành trình,
   thành tích, khóa học, báo chí, đánh giá). Bố cục mượn instructor-details của
   theme; phần dưới đây chỉ là các khối theme KHÔNG có sẵn.
   ========================================================================= */
:is(body.reference-public,.ref-shell) .mrnha-block{margin-top:48px;scroll-margin-top:calc(var(--ref-header-h,90px) + 80px)}
:is(body.reference-public,.ref-shell) .mrnha-block:first-of-type{margin-top:32px}
:is(body.reference-public,.ref-shell) .mrnha-block>.title{margin:0 0 14px}
:is(body.reference-public,.ref-shell) .mrnha-block h3.title{margin-top:32px}
:is(body.reference-public,.ref-shell) .mrnha-block .desc{margin:0 0 14px;line-height:1.75}
:is(body.reference-public,.ref-shell) .mrnha-note{
  margin:0 0 18px;padding:9px 14px;border-inline-start:3px solid var(--tj-color-theme-primary);
  background-color:var(--tj-color-theme-bg-2,#eaf2fc);border-radius:0 8px 8px 0;
  font-size:.875rem;line-height:1.6;color:var(--tj-color-text-body);
}

/* Bằng cấp / chứng nhận */
:is(body.reference-public,.ref-shell) .mrnha-cert{
  height:100%;margin:0;padding:12px;border:1px solid var(--tj-color-border-3);border-radius:16px;
  background-color:var(--tj-color-common-white);box-shadow:0 15px 30px var(--tj-color-shadow-1);
  transition:box-shadow .3s ease,transform .3s ease;
}
:is(body.reference-public,.ref-shell) .mrnha-cert:hover{transform:translateY(-4px);box-shadow:0 20px 40px var(--tj-color-shadow-2)}
:is(body.reference-public,.ref-shell) .mrnha-cert img{width:100%;height:auto;border-radius:10px;display:block}
:is(body.reference-public,.ref-shell) .mrnha-cert figcaption{display:block;padding:14px 6px 6px}
:is(body.reference-public,.ref-shell) .mrnha-cert-name{margin:0 0 4px}
:is(body.reference-public,.ref-shell) .mrnha-cert-meta{display:block;font-size:.8125rem;line-height:1.5;color:var(--tj-color-text-body-3)}
:is(body.reference-public,.ref-shell) .mrnha-cert-year{
  display:inline-block;margin-top:8px;padding:2px 10px;border-radius:50px;
  background-color:var(--tj-color-theme-bg-2,#eaf2fc);color:var(--tj-color-theme-primary);
  font-size:.75rem;font-weight:700;letter-spacing:.04em;
}

/* Hành trình giảng dạy */
:is(body.reference-public,.ref-shell) .mrnha-timeline{list-style:none;margin:0;padding:0 0 0 26px;position:relative}
:is(body.reference-public,.ref-shell) .mrnha-timeline::before{
  content:"";position:absolute;inset-block:8px;inset-inline-start:5px;width:2px;
  background:linear-gradient(180deg,var(--tj-color-theme-primary),rgba(1,70,140,.12));
}
:is(body.reference-public,.ref-shell) .mrnha-tl-item{position:relative;padding-bottom:26px}
:is(body.reference-public,.ref-shell) .mrnha-tl-item:last-child{padding-bottom:0}
:is(body.reference-public,.ref-shell) .mrnha-tl-item::before{
  content:"";position:absolute;inset-inline-start:-26px;top:7px;width:12px;height:12px;border-radius:50%;
  background-color:var(--tj-color-common-white);border:3px solid var(--tj-color-theme-primary);
}
:is(body.reference-public,.ref-shell) .mrnha-tl-year{
  display:inline-block;margin-bottom:4px;padding:1px 10px;border-radius:50px;
  background-color:var(--tj-color-theme-primary);color:#fff;font-size:.75rem;font-weight:700;letter-spacing:.04em;
}
:is(body.reference-public,.ref-shell) .mrnha-tl-title{margin:0 0 4px}
:is(body.reference-public,.ref-shell) .mrnha-tl-body .desc{margin:0}

/* Thành tích học viên */
:is(body.reference-public,.ref-shell) .mrnha-result{
  height:100%;padding:20px;border:1px solid var(--tj-color-border-3);border-radius:16px;
  background-color:var(--tj-color-common-white);
}
:is(body.reference-public,.ref-shell) .mrnha-result-value{
  display:block;font-family:var(--tj-ff-heading);font-size:2rem;line-height:1.1;
  font-weight:700;color:var(--tj-color-theme-primary);
}
:is(body.reference-public,.ref-shell) .mrnha-result-label{
  display:block;margin:2px 0 8px;font-size:.8125rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--tj-color-text-body-3);
}
:is(body.reference-public,.ref-shell) .mrnha-result .desc{margin:0;font-size:.9375rem;line-height:1.6}

:is(body.reference-public,.ref-shell) .mrnha-awards{list-style:none;margin:0;padding:0}
:is(body.reference-public,.ref-shell) .mrnha-award{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;
  padding:14px 0;border-bottom:1px solid var(--tj-color-border-3);
}
:is(body.reference-public,.ref-shell) .mrnha-award:last-child{border-bottom:0}
:is(body.reference-public,.ref-shell) .mrnha-award-year{
  flex:0 0 58px;font-weight:700;color:var(--tj-color-theme-primary);font-variant-numeric:tabular-nums;
}
:is(body.reference-public,.ref-shell) .mrnha-award-name{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;font-weight:700;
  color:var(--tj-color-heading-primary);
}
:is(body.reference-public,.ref-shell) .mrnha-award-name i{color:var(--tj-color-orange-1)}
:is(body.reference-public,.ref-shell) .mrnha-award-desc{flex:1 1 220px;min-width:0;color:var(--tj-color-text-body);line-height:1.6}

/* Khóa học đã đào tạo */
:is(body.reference-public,.ref-shell) .mrnha-taught-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
:is(body.reference-public,.ref-shell) .mrnha-taught{
  display:flex;align-items:center;gap:14px;padding:14px 18px;
  border:1px solid var(--tj-color-border-3);border-radius:14px;background-color:var(--tj-color-common-white);
}
:is(body.reference-public,.ref-shell) .mrnha-taught-icon{
  flex:0 0 42px;width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background-color:var(--tj-color-theme-bg-2,#eaf2fc);color:var(--tj-color-theme-primary);font-size:18px;
}
:is(body.reference-public,.ref-shell) .mrnha-taught-body{display:flex;flex-direction:column;min-width:0}
:is(body.reference-public,.ref-shell) .mrnha-taught-name{font-weight:700;color:var(--tj-color-heading-primary)}
:is(body.reference-public,.ref-shell) .mrnha-taught-name:hover{color:var(--tj-color-theme-primary)}
:is(body.reference-public,.ref-shell) .mrnha-taught-meta{font-size:.8125rem;color:var(--tj-color-text-body-3)}

/* Báo chí */
:is(body.reference-public,.ref-shell) .mrnha-press-list{display:grid;gap:16px}
:is(body.reference-public,.ref-shell) .mrnha-press{
  padding:20px 22px;border:1px solid var(--tj-color-border-3);border-radius:16px;
  background-color:var(--tj-color-common-white);box-shadow:0 15px 30px var(--tj-color-shadow-1);
}
:is(body.reference-public,.ref-shell) .mrnha-press-top{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 14px;margin-bottom:8px;
}
:is(body.reference-public,.ref-shell) .mrnha-press-outlet{
  padding:2px 10px;border-radius:50px;background-color:var(--tj-color-theme-bg-2,#eaf2fc);
  color:var(--tj-color-theme-primary);font-size:.75rem;font-weight:700;letter-spacing:.04em;
}
:is(body.reference-public,.ref-shell) .mrnha-press-date{font-size:.8125rem;color:var(--tj-color-text-body-3)}
:is(body.reference-public,.ref-shell) .mrnha-press-title{margin:0 0 10px}
:is(body.reference-public,.ref-shell) .mrnha-press-quote{
  margin:0;padding-inline-start:30px;position:relative;line-height:1.7;color:var(--tj-color-text-body);font-style:italic;
}
:is(body.reference-public,.ref-shell) .mrnha-press-quote i{
  position:absolute;inset-inline-start:0;top:2px;color:var(--tj-color-theme-primary);opacity:.45;font-size:18px;font-style:normal;
}

/* Cột phải */
:is(body.reference-public,.ref-shell) .mrnha-side-photo{margin-bottom:16px}
:is(body.reference-public,.ref-shell) .mrnha-side-photo img{
  width:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 14%;border-radius:14px;display:block;
}
:is(body.reference-public,.ref-shell) .mrnha-fact-list{list-style:none;margin:0;padding:0;display:grid;gap:14px}
:is(body.reference-public,.ref-shell) .mrnha-fact-list li{display:flex;align-items:flex-start;gap:12px}
:is(body.reference-public,.ref-shell) .mrnha-fact-icon{
  flex:0 0 34px;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background-color:var(--tj-color-theme-bg-2,#eaf2fc);color:var(--tj-color-theme-primary);font-size:15px;
}
:is(body.reference-public,.ref-shell) .mrnha-fact-body{display:flex;flex-direction:column;min-width:0}
:is(body.reference-public,.ref-shell) .mrnha-fact-body strong{font-size:.8125rem;color:var(--tj-color-text-body-3);font-weight:600}
:is(body.reference-public,.ref-shell) .mrnha-fact-body span{color:var(--tj-color-heading-primary);font-weight:600;line-height:1.45}

@media(max-width:991px){
  :is(body.reference-public,.ref-shell) .mrnha-block{margin-top:36px}
  :is(body.reference-public,.ref-shell) .mrnha-sidebar{margin-top:40px}
}
@media(max-width:575px){
  :is(body.reference-public,.ref-shell) .mrnha-result-value{font-size:1.625rem}
  :is(body.reference-public,.ref-shell) .mrnha-press{padding:16px}
  :is(body.reference-public,.ref-shell) .mrnha-award-year{flex-basis:100%}
}
/* Dòng chức danh dưới tên ở thẻ bên phải: theme dùng `.course-end` (màu đỏ cảnh báo
   cho hạn khóa học), ở đây chỉ là chức danh nên trả về màu chữ thường. */
:is(body.reference-public,.ref-shell) .mrnha-sidebar .course-end{
  color:var(--tj-color-text-body-3);font-weight:600;margin-bottom:14px;
}
:is(body.reference-public,.ref-shell) .mrnha-press-quote{padding:12px 16px 12px 40px;border-radius:10px}
/* Điện thoại: thẻ bằng cấp xếp 2 cột cho trang bớt dài (theme để 1 cột dưới 576px). */
@media(max-width:575px){
  :is(body.reference-public,.ref-shell) [class*="col-"]:has(>.mrnha-cert){flex:0 0 50%;max-width:50%}
  :is(body.reference-public,.ref-shell) .mrnha-cert{padding:8px}
  :is(body.reference-public,.ref-shell) .mrnha-cert figcaption{padding:10px 2px 2px}
  :is(body.reference-public,.ref-shell) .mrnha-cert-name{font-size:.875rem}
  :is(body.reference-public,.ref-shell) .mrnha-cert-meta{font-size:.75rem}
}

/* 25/09/2026 — dải tiêu đề đầu trang con của theme cao 110px trên/dưới, nhìn trống
   và đẩy nội dung xuống quá sâu. Hạ xuống trên MÁY TÍNH & TABLET cho mọi trang
   (trang dựng từ templates/reference/* lẫn trang PHP khách đều dùng chung lớp này).
   Điện thoại đã có rule 34px ở khối 24/09 phía trên nên không đụng. */
@media(min-width:1200px){
  :is(body.reference-public,.ref-shell) :is(.tj-page-header,.tj-page-header-2){padding-top:58px;padding-bottom:54px}
}
@media(min-width:992px) and (max-width:1199px){
  :is(body.reference-public,.ref-shell) :is(.tj-page-header,.tj-page-header-2){padding-top:52px;padding-bottom:48px}
}
@media(min-width:768px) and (max-width:991px){
  :is(body.reference-public,.ref-shell) :is(.tj-page-header,.tj-page-header-2){padding-top:44px;padding-bottom:40px}
}
@media(min-width:768px){
  :is(body.reference-public,.ref-shell) .tj-page-header .tj-page-title{margin-bottom:8px}
  /* Vệt sao trang trí bám theo chiều cao mới, không thò ra ngoài dải. */
  :is(body.reference-public,.ref-shell) .tj-page-header-content .shape img{max-height:64px;width:auto}
}

/* 25/09/2026 — cột phải trang Giảng viên.
   - Theme đặt `.tj-course-sidebar .tj-course-share{text-align:center}` (vốn cho
     cụm "chia sẻ khóa học"), làm "Thông tin nhanh" bị canh giữa. Trả về canh trái.
   - `.tj-socials-2 > li > a` dùng nền `--tj-color-border-8` + chữ `--tj-color-theme-bg-10`,
     cả hai đều nhạt nên icon chìm hẳn vào ô. Đổi thành nền navy, icon trắng. */
:is(body.reference-public,.ref-shell) .mrnha-sidebar .tj-course-share{text-align:start}
:is(body.reference-public,.ref-shell) .mrnha-sidebar .course-widget-title{text-align:start}
:is(body.reference-public,.ref-shell) .mrnha-sidebar .tj-socials-2{justify-content:flex-start}
:is(body.reference-public,.ref-shell) .tj-socials-2>li>a{
  background-color:var(--tj-color-theme-primary);color:var(--tj-color-common-white);
}
:is(body.reference-public,.ref-shell) .tj-socials-2>li>a:hover{
  background-color:var(--tj-color-theme-dark);color:var(--tj-color-common-white);
}

/* 25/09/2026 — cột phải gọn lại để GSAP ghim được khi cuộn (`.tj-sticky-item-2`
   chỉ ghim đúng khi cột thấp hơn màn hình). Tên + chức danh gối lên ảnh, bốn chỉ
   số về một hàng, nút phụ thành liên kết chữ. */
:is(body.reference-public,.ref-shell) .mrnha-profile{padding:14px 14px 18px}
:is(body.reference-public,.ref-shell) .mrnha-side-photo{position:relative;margin:0 0 14px;border-radius:14px;overflow:hidden}
:is(body.reference-public,.ref-shell) .mrnha-side-photo img{
  width:100%;aspect-ratio:5/4;object-fit:cover;object-position:50% 12%;display:block;
}
:is(body.reference-public,.ref-shell) .mrnha-side-overlay{
  position:absolute;inset-inline:0;bottom:0;padding:38px 16px 14px;display:flex;flex-direction:column;
  background:linear-gradient(180deg,rgba(2,24,48,0) 0%,rgba(2,24,48,.5) 45%,rgba(2,24,48,.88) 100%);
}
:is(body.reference-public,.ref-shell) .mrnha-side-name{
  font-family:var(--tj-ff-heading);font-size:1.375rem;font-weight:700;line-height:1.2;color:#fff;
}
:is(body.reference-public,.ref-shell) .mrnha-side-role{
  margin-top:3px;font-size:.8125rem;line-height:1.4;color:rgba(255,255,255,.88);
}
:is(body.reference-public,.ref-shell) .mrnha-side-stats{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-bottom:14px;
}
:is(body.reference-public,.ref-shell) .mrnha-stat{
  display:flex;flex-direction:column;align-items:center;gap:1px;padding:8px 2px;
  border-radius:10px;background-color:var(--tj-color-theme-bg-2,#eaf2fc);text-align:center;
}
:is(body.reference-public,.ref-shell) .mrnha-stat strong{
  font-family:var(--tj-ff-heading);font-size:1.0625rem;line-height:1.1;color:var(--tj-color-theme-primary);
}
:is(body.reference-public,.ref-shell) .mrnha-stat span{font-size:.6875rem;line-height:1.2;color:var(--tj-color-text-body-3)}
:is(body.reference-public,.ref-shell) .mrnha-side-link{
  display:flex;align-items:center;justify-content:center;gap:7px;margin-top:9px;
  font-size:.875rem;font-weight:600;color:var(--tj-color-theme-primary);
}
:is(body.reference-public,.ref-shell) .mrnha-side-link:hover{color:var(--tj-color-theme-dark)}
:is(body.reference-public,.ref-shell) .mrnha-profile .guarantee-text{margin-top:10px;justify-content:center}
:is(body.reference-public,.ref-shell) .mrnha-facts{padding:16px 18px 18px}
:is(body.reference-public,.ref-shell) .mrnha-facts .course-widget-title{margin-bottom:12px;font-size:1.0625rem}
:is(body.reference-public,.ref-shell) .mrnha-fact-list{gap:11px}
:is(body.reference-public,.ref-shell) .mrnha-fact-icon{flex-basis:30px;width:30px;height:30px;font-size:14px}
:is(body.reference-public,.ref-shell) .mrnha-fact-body strong{font-size:.75rem}
:is(body.reference-public,.ref-shell) .mrnha-fact-body span{font-size:.875rem}
:is(body.reference-public,.ref-shell) .mrnha-socials{margin-top:16px;padding-top:14px;border-top:1px solid var(--tj-color-border-3)}
:is(body.reference-public,.ref-shell) .mrnha-socials{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
:is(body.reference-public,.ref-shell) .mrnha-socials>li{margin:0;display:flex;align-items:center;justify-content:center}
/* Ghim thẻ hồ sơ bằng position:sticky (xem ghi chú trong teachers.html). */
@media(min-width:992px){
  :is(body.reference-public,.ref-shell) .mrnha-profile{
    position:sticky;top:calc(var(--ref-header-h,90px) + 16px);
  }
}
/* Ảnh 4:3 cho thẻ thấp hơn, vừa khoảng trống dưới header trên laptop 900px. */
:is(body.reference-public,.ref-shell) .mrnha-side-photo img{aspect-ratio:4/3}
/* `.fix` của theme là `overflow:hidden` — nó vô hiệu hóa position:sticky bên trong.
   `overflow:clip` vẫn cắt tràn nhưng KHÔNG tạo vùng cuộn nên sticky chạy lại. */
:is(body.reference-public,.ref-shell) .mrnha-details{overflow:clip}
/* Hai thứ nữa chặn position:sticky trên trang Giảng viên:
   1) `#smooth-content` (bọc toàn trang trong templates/reference/*) là
      `overflow:hidden` — đổi sang `clip` để vẫn cắt tràn mà không tạo vùng cuộn.
   2) Thẻ hồ sơ chỉ ghim được trong phạm vi thẻ cha; cho cột phải cao bằng cột
      nội dung thì nó mới đi theo suốt trang. */
:is(body.reference-public,.ref-shell) :is(#smooth-wrapper,#smooth-content){overflow:clip}
@media(min-width:992px){
  :is(body.reference-public,.ref-shell) .mrnha-side-wrap,
  :is(body.reference-public,.ref-shell) .mrnha-sidebar{height:100%}
}

/* 25/09/2026 — các cụm tạo uy tín dùng chung trên mọi trang công khai
   (vì sao chọn / cam kết / các bước / kết quả / cột mốc). */
:is(body.reference-public,.ref-shell) .mrnha-sec-lead{
  max-width:64ch;margin:14px auto 0;line-height:1.75;color:var(--tj-color-text-body);
}
:is(body.reference-public,.ref-shell) .sec-heading-center .mrnha-sec-lead{text-align:center}
:is(body.reference-public,.ref-shell) .mrnha-note-center{
  max-width:70ch;margin-inline:auto;margin-top:22px;border-inline-start:0;text-align:center;border-radius:10px;
}
:is(body.reference-public,.ref-shell) .mrnha-commit{
  height:100%;display:flex;align-items:flex-start;gap:14px;padding:20px 22px;
  border:1px solid var(--tj-color-border-3);border-radius:16px;
  background-color:var(--tj-color-common-white);box-shadow:0 15px 30px var(--tj-color-shadow-1);
  transition:box-shadow .3s ease,transform .3s ease;
}
:is(body.reference-public,.ref-shell) .mrnha-commit:hover{transform:translateY(-3px);box-shadow:0 20px 40px var(--tj-color-shadow-2)}
:is(body.reference-public,.ref-shell) .mrnha-commit-check{
  flex:0 0 34px;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background-color:var(--tj-color-theme-primary);color:#fff;font-size:15px;margin-top:2px;
}
:is(body.reference-public,.ref-shell) .mrnha-commit-title{margin:0 0 5px}
:is(body.reference-public,.ref-shell) .mrnha-commit p{margin:0;line-height:1.7}
:is(body.reference-public,.ref-shell) .tj-milestone-section .mrnha-timeline{padding-left:30px}
@media(max-width:575px){
  :is(body.reference-public,.ref-shell) .mrnha-commit{padding:16px}
  :is(body.reference-public,.ref-shell) .mrnha-sec-lead{font-size:.9375rem}
}

/* 25/09/2026 — cụm ngay sau dải "Vì sao chọn" nền navy bị dính vào đáy dải:
   `.tj-features-section` có padding-dưới nhưng padding đó nằm TRONG nền navy,
   nên cụm kế tiếp (chỉ có `section-gap-bottom`) khởi đầu sát mép. Chừa lề trên. */
/* 25/09/2026 (bổ sung) — `.tj-career-path-section` cũng có nền gradient riêng nên
   cụm đứng ngay sau nó dính y hệt. Gom cả hai dải có nền vào cùng một rule. */
:is(body.reference-public,.ref-shell) :is(.tj-features-section,.tj-career-path-section) + section{padding-top:80px}
@media(max-width:991px){
  :is(body.reference-public,.ref-shell) :is(.tj-features-section,.tj-career-path-section) + section{padding-top:56px}
}

/* 25/09/2026 — bốn thẻ "các bước" cao không bằng nhau: theme kéo giãn `.tj-career-path-item`
   nhưng thẻ trắng bên trong (`-inner`) vẫn co theo nội dung. Cho item thành cột flex
   rồi để thẻ trong chiếm hết phần còn lại. */
@media(min-width:992px){
  :is(body.reference-public,.ref-shell) .tj-career-path-item{display:flex;flex-direction:column}
  :is(body.reference-public,.ref-shell) .tj-career-path-item-inner{flex:1 1 auto}
}

/* 25/09/2026 — cột mốc: bên trái trống trơn nên trải NGANG trên màn hình rộng.
   `grid-auto-flow:column` để không phụ thuộc số mốc. Dưới 992px quay lại dọc. */
@media(min-width:992px){
  :is(body.reference-public,.ref-shell) .mrnha-timeline-h{
    display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);
    gap:0 22px;padding:52px 0 0;position:relative;
  }
  :is(body.reference-public,.ref-shell) .mrnha-timeline-h::before{
    content:"";position:absolute;inset-inline:0;top:38px;bottom:auto;width:auto;height:2px;
    background:linear-gradient(90deg,var(--tj-color-theme-primary),rgba(1,70,140,.15));
  }
  :is(body.reference-public,.ref-shell) .mrnha-timeline-h .mrnha-tl-item{
    padding:0;text-align:center;
  }
  :is(body.reference-public,.ref-shell) .mrnha-timeline-h .mrnha-tl-item::before{
    inset-inline-start:50%;transform:translateX(-50%);top:-20px;
  }
  :is(body.reference-public,.ref-shell) .mrnha-timeline-h .mrnha-tl-year{margin-bottom:8px}
  :is(body.reference-public,.ref-shell) .mrnha-timeline-h .mrnha-tl-title{margin-bottom:6px}
  :is(body.reference-public,.ref-shell) .mrnha-timeline-h .desc{font-size:.9375rem;line-height:1.6}
}

/* 25/09/2026 — chỉ có một giảng viên nên cụm Mr.Nha đặt thêm bảng bằng cấp bên
   cạnh thẻ cho đỡ trống và tăng độ tin cậy. */
:is(body.reference-public,.ref-shell) .mrnha-creds{padding-inline-start:8px}
:is(body.reference-public,.ref-shell) .mrnha-creds-title{margin:0 0 6px}
:is(body.reference-public,.ref-shell) .mrnha-creds-lead{
  margin:0 0 18px;font-size:.9375rem;color:var(--tj-color-text-body-3);
}
:is(body.reference-public,.ref-shell) .mrnha-cred-list{
  list-style:none;margin:0 0 20px;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 22px;
}
:is(body.reference-public,.ref-shell) .mrnha-cred-list li{display:flex;align-items:flex-start;gap:10px;min-width:0}
:is(body.reference-public,.ref-shell) .mrnha-cred-icon{
  flex:0 0 28px;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background-color:var(--tj-color-theme-primary);color:#fff;font-size:13px;margin-top:2px;
}
:is(body.reference-public,.ref-shell) .mrnha-cred-body{display:flex;flex-direction:column;min-width:0}
:is(body.reference-public,.ref-shell) .mrnha-cred-body strong{
  font-size:.9375rem;line-height:1.35;color:var(--tj-color-heading-primary);
}
:is(body.reference-public,.ref-shell) .mrnha-cred-body span{
  font-size:.8125rem;line-height:1.45;color:var(--tj-color-text-body-3);
}
:is(body.reference-public,.ref-shell) .mrnha-cred-thumbs{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-bottom:18px;
}
:is(body.reference-public,.ref-shell) .mrnha-cred-thumbs img{
  width:100%;height:auto;border-radius:8px;border:1px solid var(--tj-color-border-3);
  background-color:#fff;display:block;
}
:is(body.reference-public,.ref-shell) .mrnha-creds-link{font-weight:700}
@media(max-width:991px){
  :is(body.reference-public,.ref-shell) .mrnha-creds{padding-inline-start:0;margin-top:8px}
  :is(body.reference-public,.ref-shell) .mrnha-cred-thumbs{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:575px){
  :is(body.reference-public,.ref-shell) .mrnha-cred-list{grid-template-columns:minmax(0,1fr)}
}

/* 25/09/2026 — HỆ QUẢ của việc đổi `#smooth-wrapper/#smooth-content` sang
   `overflow:clip`: các `position:sticky` có sẵn của theme (trước đây nằm im vì
   bị overflow:hidden vô hiệu hóa) nay hoạt động trở lại. Cột bên bài viết đặt
   `top:100px` nên chui xuống dưới thanh menu cố định — neo lại theo chiều cao
   thật của header. Nếu sau này phát hiện khối sticky nào khác bị che, xử lý y hệt. */
:is(body.reference-public,.ref-shell) .tj_wpost_sidebar{top:calc(var(--ref-header-h,90px) + 20px)}

/* 25/09/2026 — biến thể nền sáng của khối "vì sao/điểm nổi bật", dùng khi có hai
   khối liên tiếp (trang Tuyển giảng viên) để không thành hai dải navy chồng nhau. */
:is(body.reference-public,.ref-shell) .tj-features-light{background-color:transparent}
:is(body.reference-public,.ref-shell) .tj-features-light :is(.sec-title,.sec-subtitle){color:var(--tj-color-heading-primary)}
:is(body.reference-public,.ref-shell) .tj-features-light .sec-subtitle{background-color:var(--tj-color-theme-bg-2,#eaf2fc)}
:is(body.reference-public,.ref-shell) .tj-features-light .tj-feature-card{
  background-color:var(--tj-color-common-white);border-color:var(--tj-color-border-3);
  box-shadow:0 15px 30px var(--tj-color-shadow-1);backdrop-filter:none;
}
:is(body.reference-public,.ref-shell) .tj-features-light .tj-feature-card :is(.title,p){color:var(--tj-color-heading-primary)}
:is(body.reference-public,.ref-shell) .tj-features-light .tj-feature-card p{color:var(--tj-color-text-body)}
:is(body.reference-public,.ref-shell) .tj-features-light .sec-subtitle i{color:var(--tj-color-theme-primary)}

/* 26/09/2026 — cột phải trang Giảng viên: trước đây chỉ ghim thẻ hồ sơ nên
   "Thông tin nhanh" cuộn lên trượt chồng vào sau thẻ (icon mạng xã hội lòi qua ảnh).
   Giờ ghim CẢ CỘT thành một khối. `--mrnha-side-top` do js/mrnha-teacher.js tính:
   cột cao hơn màn hình thì top âm → cuộn tới khi đáy cột chạm đáy màn hình mới dính.
   Ảnh: thuộc tính height="533" trong HTML thắng aspect-ratio 4/3 nên ảnh cao vọt;
   trả height:auto để tỉ lệ 4/3 (ghi chú cũ phía trên) có hiệu lực thật. */
:is(body.reference-public,.ref-shell) .mrnha-side-photo img{height:auto}
@media(min-width:992px){
  :is(body.reference-public,.ref-shell) .mrnha-profile{position:static}
  :is(body.reference-public,.ref-shell) .mrnha-sidebar{
    height:auto;position:sticky;top:var(--mrnha-side-top,calc(var(--ref-header-h,90px) + 16px));
  }
}

/* Thu gọn cột cho vừa màn hình laptop (~900px): ảnh 16:10, ô mạng xã hội thấp lại. */
@media(min-width:992px){
  :is(body.reference-public,.ref-shell) .mrnha-side-photo img{aspect-ratio:16/10}
  :is(body.reference-public,.ref-shell) .mrnha-sidebar .mrnha-socials>li{padding:8px 0}
  :is(body.reference-public,.ref-shell) .mrnha-socials{margin-top:14px;padding-top:12px}
  :is(body.reference-public,.ref-shell) .mrnha-fact-list{gap:8px}
}

/* 26/09/2026 — slider cho Báo chí + Học viên nói gì (js/mrnha-slider.js). */
:is(body.reference-public,.ref-shell) .mrnha-slider{
  display:flex;gap:16px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
  scrollbar-width:none;outline:0;
  /* Nới vùng trượt ra hai bên + dưới để bóng thẻ không bị cắt cụt ở mép. */
  padding:8px 14px 26px;margin:-8px -14px -14px;scroll-padding-inline:14px;
}
:is(body.reference-public,.ref-shell) .mrnha-slider>:is(.mrnha-press,.student-reviews-item){
  box-shadow:0 6px 16px var(--tj-color-shadow-1);
}
:is(body.reference-public,.ref-shell) .mrnha-slider::-webkit-scrollbar{display:none}
:is(body.reference-public,.ref-shell) .mrnha-slider>*{flex:0 0 100%;min-width:0;scroll-snap-align:start;margin:0}
:is(body.reference-public,.ref-shell) .mrnha-slider-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:4px}
:is(body.reference-public,.ref-shell) .mrnha-slider-dots{display:flex;gap:6px}
:is(body.reference-public,.ref-shell) .mrnha-slider-dot{
  width:8px;height:8px;padding:0;border:0;border-radius:8px;background-color:var(--tj-color-border-3,#d9e2ef);
  transition:width .25s ease,background-color .25s ease;
}
:is(body.reference-public,.ref-shell) .mrnha-slider-dot[aria-current="true"]{width:24px;background-color:var(--tj-color-theme-primary)}
:is(body.reference-public,.ref-shell) .mrnha-slider-nav{display:flex;gap:8px}
:is(body.reference-public,.ref-shell) .mrnha-slider-btn{
  width:40px;height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--tj-color-border-3);background-color:var(--tj-color-common-white);
  color:var(--tj-color-theme-primary);font-size:15px;transition:background-color .2s ease,color .2s ease;
}
:is(body.reference-public,.ref-shell) .mrnha-slider-btn:hover{background-color:var(--tj-color-theme-primary);color:#fff;border-color:var(--tj-color-theme-primary)}
:is(body.reference-public,.ref-shell) .mrnha-slider:focus-visible{outline:2px solid var(--tj-color-theme-primary);outline-offset:2px}

/* 26/09/2026 — thẻ hồ sơ hai trạng thái (js/mrnha-teacher.js mục 3).
   Bỏ bớt ba lớp padding lồng nhau (sidebar 20 + widget 10 + profile 14) để ảnh rộng hết cỡ. */
@media(min-width:992px){
  :is(body.reference-public,.ref-shell) .mrnha-sidebar{padding:12px}
  :is(body.reference-public,.ref-shell) .mrnha-sidebar .mrnha-profile{margin:0;padding:0 0 16px}
  :is(body.reference-public,.ref-shell) .mrnha-sidebar .mrnha-facts{margin:0;padding:18px 8px 6px}
  :is(body.reference-public,.ref-shell) .mrnha-side-photo img{aspect-ratio:3/4}
}
/* Lật ảnh: mặt trước = ảnh, mặt sau = "Thông tin nhanh" nền navy. */
:is(body.reference-public,.ref-shell) .mrnha-side-photo{overflow:visible;perspective:1400px}
:is(body.reference-public,.ref-shell) .mrnha-flip{
  display:grid;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
:is(body.reference-public,.ref-shell) .mrnha-flip-face{
  grid-area:1/1;position:relative;border-radius:14px;overflow:hidden;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
}
:is(body.reference-public,.ref-shell) .mrnha-flip-face.is-back{
  transform:rotateY(180deg);display:flex;flex-direction:column;justify-content:center;gap:14px;padding:22px 20px;
  background:linear-gradient(160deg,var(--tj-color-theme-primary) 0%,#021830 100%);color:#fff;
}
:is(body.reference-public,.ref-shell) .mrnha-back-who{display:flex;flex-direction:column;gap:2px;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.18)}
:is(body.reference-public,.ref-shell) .mrnha-back-who strong{font-family:var(--tj-ff-heading);font-size:1.375rem;line-height:1.2;color:#fff}
:is(body.reference-public,.ref-shell) .mrnha-back-who span{font-size:.8125rem;color:rgba(255,255,255,.75)}
:is(body.reference-public,.ref-shell) .mrnha-back-title{font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tj-color-theme-secondary,#f4b400)}
:is(body.reference-public,.ref-shell) .is-back .mrnha-fact-list{gap:12px}
:is(body.reference-public,.ref-shell) .is-back .mrnha-fact-icon{background-color:rgba(255,255,255,.14);color:#fff}
:is(body.reference-public,.ref-shell) .is-back .mrnha-fact-body strong{color:rgba(255,255,255,.7)}
:is(body.reference-public,.ref-shell) .is-back .mrnha-fact-body span{color:#fff}
:is(body.reference-public,.ref-shell) .is-back .mrnha-socials{margin-top:0;padding-top:12px;border-top-color:rgba(255,255,255,.18)}
:is(body.reference-public,.ref-shell) .is-back .mrnha-socials>li{padding:6px 0;background:rgba(255,255,255,.1);border-color:transparent}
:is(body.reference-public,.ref-shell) .is-back .mrnha-socials>li>a{background-color:#fff;color:var(--tj-color-theme-primary)}
:is(body.reference-public,.ref-shell) .mrnha-flip-hint{
  position:absolute;top:10px;inset-inline-end:10px;display:inline-flex;align-items:center;gap:5px;
  padding:4px 10px;border-radius:50px;background:rgba(2,24,48,.55);color:#fff;font-size:.75rem;font-weight:600;
  opacity:0;transform:translateY(-4px);transition:opacity .3s ease,transform .3s ease;pointer-events:none;
}
/* Trạng thái ghim: chỉ giữ ảnh + chỉ số + nút tư vấn; phần còn lại nằm ở mặt sau ảnh. */
@media(min-width:992px){
  :is(body.reference-public,.ref-shell) .mrnha-sidebar.is-pinned :is(.mrnha-facts,.mrnha-side-link){display:none}
  :is(body.reference-public,.ref-shell) .mrnha-sidebar.is-pinned .mrnha-profile{border-bottom:0;padding-bottom:4px}
  :is(body.reference-public,.ref-shell) .mrnha-sidebar.is-pinned>*{animation:mrnhaPin .35s ease}
  :is(body.reference-public,.ref-shell) .mrnha-sidebar.is-pinned .mrnha-flip-hint{opacity:1;transform:none}
}
@media(min-width:992px) and (hover:hover){
  :is(body.reference-public,.ref-shell) .mrnha-sidebar.is-pinned .mrnha-side-photo:hover .mrnha-flip{transform:rotateY(180deg)}
}
@media(hover:none){
  :is(body.reference-public,.ref-shell) .mrnha-flip-hint{display:none}
}
@keyframes mrnhaPin{from{opacity:.4}to{opacity:1}}
@media(prefers-reduced-motion:reduce){
  :is(body.reference-public,.ref-shell) .mrnha-flip{transition:none}
}

/* 26/09/2026 — "mrnha-parent": khối Dành cho phụ huynh (trang chủ + Khóa học, vi/en).
   Bên trái: lợi ích cho phụ huynh; bên phải: thẻ "báo cáo tuần" mẫu + trích dẫn phụ huynh. */
:is(body.reference-public,.ref-shell) .mrnha-parent-section{
  background:linear-gradient(180deg,var(--tj-color-theme-bg-2,#eaf2fc) 0%,rgba(234,242,252,0) 100%);
}
:is(body.reference-public,.ref-shell) .mrnha-parent-lead{max-width:56ch;margin:14px 0 24px;line-height:1.75}
:is(body.reference-public,.ref-shell) .mrnha-parent-feats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
:is(body.reference-public,.ref-shell) .mrnha-parent-feat{
  display:flex;gap:12px;align-items:flex-start;padding:16px;border-radius:14px;
  background:var(--tj-color-common-white);border:1px solid var(--tj-color-border-3);
}
:is(body.reference-public,.ref-shell) .mrnha-parent-feat>span:last-child{display:flex;flex-direction:column;gap:4px;min-width:0}
:is(body.reference-public,.ref-shell) .mrnha-parent-feat strong{font-family:var(--tj-ff-heading);color:var(--tj-color-heading-primary);line-height:1.3}
:is(body.reference-public,.ref-shell) .mrnha-parent-feat>span:last-child>span{font-size:.875rem;line-height:1.55;color:var(--tj-color-text-body)}
:is(body.reference-public,.ref-shell) .mrnha-parent-ico{
  flex:0 0 40px;width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:var(--tj-color-theme-primary);color:#fff;font-size:17px;
}
/* Thẻ báo cáo tuần */
:is(body.reference-public,.ref-shell) .mrnha-report{
  position:relative;padding:22px 24px;border-radius:18px;background:var(--tj-color-common-white);
  border:1px solid var(--tj-color-border-3);box-shadow:0 20px 40px var(--tj-color-shadow-1);
}
:is(body.reference-public,.ref-shell) .mrnha-report-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
:is(body.reference-public,.ref-shell) .mrnha-report-tag{
  padding:3px 10px;border-radius:50px;background:var(--tj-color-theme-secondary,#f4b400);color:#1f1400;font-size:.75rem;font-weight:700;
}
:is(body.reference-public,.ref-shell) .mrnha-report-week{font-size:.8125rem;color:var(--tj-color-text-body-3)}
:is(body.reference-public,.ref-shell) .mrnha-report-name{margin:12px 0 14px;font-family:var(--tj-ff-heading);font-size:1.25rem;font-weight:700;color:var(--tj-color-heading-primary)}
:is(body.reference-public,.ref-shell) .mrnha-report-rows{list-style:none;margin:0;padding:0;display:grid;gap:10px}
:is(body.reference-public,.ref-shell) .mrnha-report-rows li{display:grid;grid-template-columns:78px 1fr 32px;align-items:center;gap:12px;font-size:.875rem}
:is(body.reference-public,.ref-shell) .mrnha-report-rows b{text-align:end;color:var(--tj-color-heading-primary)}
:is(body.reference-public,.ref-shell) .mrnha-report-bar{height:8px;border-radius:8px;background:var(--tj-color-theme-bg-2,#eaf2fc);overflow:hidden}
:is(body.reference-public,.ref-shell) .mrnha-report-bar>span{display:block;height:100%;border-radius:8px;background:linear-gradient(90deg,var(--tj-color-theme-primary),#3d7fd1)}
:is(body.reference-public,.ref-shell) .mrnha-report-meta{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:16px;padding-top:14px;border-top:1px dashed var(--tj-color-border-3);font-size:.875rem}
:is(body.reference-public,.ref-shell) .mrnha-report-meta i{margin-inline-end:6px;color:var(--tj-color-theme-primary)}
:is(body.reference-public,.ref-shell) .mrnha-report-meta b{color:#1a8f4c}
:is(body.reference-public,.ref-shell) .mrnha-report-cmt{
  margin:14px 0 0;padding:12px 14px;border-radius:12px;background:#fff8e1;font-size:.875rem;line-height:1.6;font-style:italic;color:var(--tj-color-text-body);
}
:is(body.reference-public,.ref-shell) .mrnha-parent-quote{
  margin:18px 0 0;padding:18px 22px;border-radius:16px;background:var(--tj-color-theme-primary);color:#fff;
}
:is(body.reference-public,.ref-shell) .mrnha-parent-quote p{
  margin:0;color:#fff;line-height:1.7;font-family:var(--tj-ff-body);font-size:1rem;font-weight:500;font-style:italic;
  text-transform:none;letter-spacing:normal;
}
:is(body.reference-public,.ref-shell) .mrnha-parent-quote footer{margin-top:8px;font-size:.8125rem;font-weight:600;color:var(--tj-color-theme-secondary,#f4b400)}
/* Độ tuổi + nút */
:is(body.reference-public,.ref-shell) .mrnha-parent-ages{margin-top:40px}
:is(body.reference-public,.ref-shell) .mrnha-parent-ages-title{margin:0 0 14px;font-size:1.125rem}
:is(body.reference-public,.ref-shell) .mrnha-parent-ages ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
:is(body.reference-public,.ref-shell) .mrnha-parent-ages li{
  display:flex;flex-direction:column;gap:4px;padding:16px 18px;border-radius:14px;background:var(--tj-color-common-white);
  border:1px solid var(--tj-color-border-3);border-top:3px solid var(--tj-color-theme-secondary,#f4b400);
}
:is(body.reference-public,.ref-shell) .mrnha-parent-ages strong{font-family:var(--tj-ff-heading);color:var(--tj-color-heading-primary)}
:is(body.reference-public,.ref-shell) .mrnha-parent-ages span{font-size:.875rem;color:var(--tj-color-text-body)}
:is(body.reference-public,.ref-shell) .mrnha-parent-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;margin-top:28px}
:is(body.reference-public,.ref-shell) .mrnha-parent-cta .btn-area{display:flex;flex-wrap:wrap;gap:12px}
:is(body.reference-public,.ref-shell) .mrnha-parent-offer{margin:0;display:flex;align-items:center;gap:8px;font-weight:600;color:var(--tj-color-heading-primary)}
:is(body.reference-public,.ref-shell) .mrnha-parent-offer i{color:#e0457b}
@media(max-width:991px){
  :is(body.reference-public,.ref-shell) .mrnha-parent-ages ul{grid-template-columns:1fr}
}
@media(max-width:575px){
  :is(body.reference-public,.ref-shell) .mrnha-parent-feats{grid-template-columns:1fr}
  :is(body.reference-public,.ref-shell) .mrnha-report{padding:18px}
  :is(body.reference-public,.ref-shell) .mrnha-report-rows li{grid-template-columns:64px 1fr 28px;gap:8px}
}

/* 26/09/2026 — trang PHP khách có biểu mẫu (tuyển giảng viên / đăng ký tư vấn / test
   trình độ): biểu mẫu bên trái, cột thông tin `.guest-aside` bên phải (app/public-blocks.php
   public_form_aside). Thẻ biểu mẫu vốn bị khóa bề ngang bằng style inline (760px) và
   public-refine-v1.css (0,4,2) → phải dùng !important để thẻ ăn hết cột trái. */
.guest-form-layout{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:28px;align-items:start;max-width:1240px;margin:0 auto}
.guest-form-layout .guest-form-main>:is(.card,.auth-card){width:100%!important;max-width:none!important;margin:0!important}
@media(max-width:991px){
  .guest-form-layout{grid-template-columns:1fr}
}
.ref-shell.guest-aside{display:flex;flex-direction:column;gap:16px}
.ref-shell .guest-aside-card{
  padding:22px;border-radius:18px;color:#fff;
  background:linear-gradient(155deg,var(--tj-color-theme-primary) 0%,#021830 100%);
  box-shadow:0 18px 36px rgba(2,24,48,.18);
}
.ref-shell .guest-aside-kicker{
  display:inline-block;padding:3px 10px;border-radius:50px;background:var(--tj-color-theme-secondary,#f4b400);
  color:#1f1400;font-size:.75rem;font-weight:700;letter-spacing:.03em;
}
/* Theme ép màu navy + Title Case lên h2 trang khách → viết đủ cụ thể để thắng. */
body .ref-shell.guest-aside .guest-aside-card .guest-aside-title{margin:12px 0 0;font-size:1.25rem;line-height:1.35;color:#fff;text-transform:none}
.ref-shell .guest-aside-who{display:flex;align-items:center;gap:12px;margin-top:16px;padding:10px;border-radius:12px;background:rgba(255,255,255,.08)}
.ref-shell .guest-aside-who img{width:56px;height:56px;border-radius:50%;object-fit:cover;object-position:50% 15%;border:2px solid rgba(255,255,255,.5)}
.ref-shell .guest-aside-who>span{display:flex;flex-direction:column}
.ref-shell .guest-aside-who strong{color:#fff}
.ref-shell .guest-aside-who>span>span{font-size:.8125rem;color:rgba(255,255,255,.75)}
.ref-shell .guest-aside-meta{list-style:none;margin:16px 0 0;padding:14px 0 0;border-top:1px solid rgba(255,255,255,.16);display:grid;gap:10px}
.ref-shell .guest-aside-meta li{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;line-height:1.5;color:rgba(255,255,255,.92)}
.ref-shell .guest-aside-meta i{margin-top:3px;color:var(--tj-color-theme-secondary,#f4b400)}
.ref-shell .guest-aside-box{padding:20px 22px;border-radius:18px;background:var(--tj-color-common-white,#fff);border:1px solid var(--tj-color-border-3,#e3e9f3)}
.ref-shell .guest-aside-box h3{margin:0 0 14px;font-size:1.0625rem;color:var(--tj-color-heading-primary)}
.ref-shell .guest-aside-steps{list-style:none;margin:0;padding:0;display:grid;gap:14px;position:relative}
.ref-shell .guest-aside-steps li{display:flex;gap:12px;align-items:flex-start;position:relative}
.ref-shell .guest-aside-steps li:not(:last-child)::after{
  content:"";position:absolute;left:13px;top:30px;bottom:-12px;width:2px;background:var(--tj-color-border-3,#e3e9f3);
}
.ref-shell .guest-aside-no{
  flex:0 0 28px;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--tj-color-theme-bg-2,#eaf2fc);color:var(--tj-color-theme-primary);font-weight:700;font-size:.8125rem;
}
.ref-shell .guest-aside-steps li>span:last-child{display:flex;flex-direction:column;gap:2px;min-width:0}
.ref-shell .guest-aside-steps strong{color:var(--tj-color-heading-primary);font-size:.9375rem}
.ref-shell .guest-aside-steps li>span:last-child>span{font-size:.8125rem;line-height:1.5;color:var(--tj-color-text-body-3,#5b6b7f)}
.ref-shell .guest-aside-points{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.ref-shell .guest-aside-points li{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;line-height:1.5}
.ref-shell .guest-aside-points i{
  flex:0 0 20px;width:20px;height:20px;margin-top:1px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:#e6f6ec;color:#1a8f4c;font-size:10px;
}
.ref-shell .guest-aside-contact{
  display:flex;flex-direction:column;gap:10px;padding:16px 18px;border-radius:18px;background:#fff8e1;border:1px solid #f6e3a6;
}
.ref-shell .guest-aside-contact>span{font-weight:600;color:var(--tj-color-heading-primary)}
.ref-shell .guest-aside-btns{display:grid;grid-template-columns:1fr auto;gap:8px}
.ref-shell .guest-aside-btns a{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 14px;border-radius:50px;
  background:var(--tj-color-theme-primary);color:#fff;font-weight:600;font-size:.9rem;
}
.ref-shell .guest-aside-btns a+a{background:#0068ff}
.ref-shell .guest-aside-btns a:hover{filter:brightness(1.1);color:#fff}

/* 26/09/2026 — ô Email ở footer trên trang PHP khách: public-refine-v1.css đặt
   `body.guest :is(input[type=email],…)` (0,2,2) thắng `.subscribe-form input[type=email]`
   (0,2,1) của theme → mất padding-trái 50px nên icon phong bì đè lên chữ, nền thành trắng.
   Trả lại đúng giá trị của theme với độ đặc hiệu (0,3,2). */
:is(body.reference-public,.ref-shell) .subscribe-form input[type=email]{
  height:56px;padding:10px 60px 10px 50px;color:var(--tj-color-light-3);
  background-color:var(--tj-color-blur-3);border:1px solid var(--tj-color-border-5);
  backdrop-filter:blur(15px);border-radius:80px;box-shadow:none;font-size:inherit;
}
:is(body.reference-public,.ref-shell) .subscribe-form input[type=email]:focus{border-color:var(--tj-color-theme-primary);outline:0}

/* 26/09/2026 (vòng 2) — cột phải quá dài: hộp liên hệ gộp vào thẻ navy, gạch đầu dòng
   chuyển xuống dưới biểu mẫu (cột trái, 2 cột chữ). */
.ref-shell .guest-aside-card .guest-aside-contact{margin-top:16px;padding:14px 0 0;border:0;border-top:1px solid rgba(255,255,255,.16);border-radius:0;background:none}
.ref-shell .guest-aside-card .guest-aside-contact>span{color:rgba(255,255,255,.85);font-size:.875rem}
.ref-shell .guest-aside-card .guest-aside-btns a:first-child{background:#fff;color:var(--tj-color-theme-primary)}
.ref-shell .guest-aside-card .guest-aside-btns a:first-child:hover{color:var(--tj-color-theme-primary)}
.ref-shell.guest-form-points{
  margin-top:20px;padding:20px 24px;border-radius:18px;background:var(--tj-color-common-white,#fff);border:1px solid var(--tj-color-border-3,#e3e9f3);
}
.ref-shell.guest-form-points h3{margin:0 0 14px;font-size:1.0625rem;color:var(--tj-color-heading-primary)}
.ref-shell.guest-form-points .guest-aside-points{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 24px}
@media(max-width:575px){.ref-shell.guest-form-points .guest-aside-points{grid-template-columns:1fr}}

/* 26/09/2026 — khối tài khoản trên header công khai khi đã đăng nhập
   (app/reference-renderer.php public_account_html). */
:is(body.reference-public,.ref-shell) .ref-account{align-items:center;gap:10px}
:is(body.reference-public,.ref-shell) .ref-account-chip{
  display:inline-flex;align-items:center;gap:10px;padding:4px 14px 4px 4px;border-radius:50px;
  border:1px solid var(--tj-color-border-3,#e3e9f3);background:var(--tj-color-common-white,#fff);max-width:220px;
}
:is(body.reference-public,.ref-shell) .ref-account-chip:hover{border-color:var(--tj-color-theme-primary)}
:is(body.reference-public,.ref-shell) .ref-account-face{
  flex:0 0 36px;width:36px;height:36px;border-radius:50%;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;
  background:var(--tj-color-theme-primary);color:#fff;font-weight:700;font-size:.95rem;
}
:is(body.reference-public,.ref-shell) .ref-account-face img{width:100%;height:100%;object-fit:cover}
:is(body.reference-public,.ref-shell) .ref-account-text{display:flex;flex-direction:column;min-width:0;line-height:1.2}
:is(body.reference-public,.ref-shell) .ref-account-text strong{
  font-size:.875rem;color:var(--tj-color-heading-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
:is(body.reference-public,.ref-shell) .ref-account-text small{font-size:.72rem;color:var(--tj-color-text-body-3,#5b6b7f)}
:is(body.reference-public,.ref-shell) .ref-account-out{
  width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--tj-color-border-3,#e3e9f3);color:var(--tj-color-text-body-3,#5b6b7f);font-size:13px;
}
:is(body.reference-public,.ref-shell) .ref-account-out:hover{background:#fdecec;border-color:#f5c2c2;color:#c62828}
:is(body.reference-public,.ref-shell) .ref-account-m .user-btn.ref-account-face{width:38px;height:38px;flex-basis:38px;border:0}
/* Màn hình chưa thật rộng: gọn lại để ô tìm kiếm không bị bóp (đăng xuất vẫn có trong khu học tập). */
@media(max-width:1599px){
  :is(body.reference-public,.ref-shell) .ref-account-text small,
  :is(body.reference-public,.ref-shell) .ref-account-out{display:none}
  :is(body.reference-public,.ref-shell) .ref-account-chip{max-width:170px}
}
@media(max-width:1399px){
  :is(body.reference-public,.ref-shell) .ref-account-text{display:none}
  :is(body.reference-public,.ref-shell) .ref-account-chip{padding:3px}
}

/* 26/09/2026 — "mrnha-ai": khối Chấm bài có AI hỗ trợ (home + practice, vi/en).
   Dùng lại thẻ .mrnha-report và .mrnha-parent-feat của khối phụ huynh. */
:is(body.reference-public,.ref-shell) .mrnha-ai-section{background:var(--tj-color-common-white,#fff)}
:is(body.reference-public,.ref-shell) .mrnha-ai-extra{
  display:flex;gap:10px;align-items:flex-start;margin:18px 0 0;padding:12px 16px;border-radius:12px;
  background:var(--tj-color-theme-bg-2,#eaf2fc);font-size:.9rem;line-height:1.6;color:var(--tj-color-text-body);
}
:is(body.reference-public,.ref-shell) .mrnha-ai-extra i{margin-top:4px;color:var(--tj-color-theme-primary)}
:is(body.reference-public,.ref-shell) .mrnha-ai-card{padding-bottom:26px}
:is(body.reference-public,.ref-shell) .mrnha-ai-badge{
  display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:50px;font-size:.75rem;font-weight:700;
  background:linear-gradient(90deg,#6d4aff,#2b7de9);color:#fff;
}
:is(body.reference-public,.ref-shell) .mrnha-ai-score{position:absolute;top:62px;inset-inline-end:24px;display:flex;align-items:baseline;gap:2px}
:is(body.reference-public,.ref-shell) .mrnha-ai-score strong{font-family:var(--tj-ff-heading);font-size:2.25rem;line-height:1;color:var(--tj-color-theme-primary)}
:is(body.reference-public,.ref-shell) .mrnha-ai-score span{font-weight:600;color:var(--tj-color-text-body-3)}
:is(body.reference-public,.ref-shell) .mrnha-ai-fb{margin-top:16px;padding:12px 14px;border-radius:12px;background:#f4f1ff;border:1px solid #e3dcff}
:is(body.reference-public,.ref-shell) .mrnha-ai-fb-label{font-size:.75rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#6d4aff}
:is(body.reference-public,.ref-shell) .mrnha-ai-fb p{margin:6px 0 0;font-size:.875rem;line-height:1.65;color:var(--tj-color-text-body)}
:is(body.reference-public,.ref-shell) .mrnha-ai-approved{
  display:flex;align-items:center;gap:8px;margin-top:12px;font-size:.875rem;font-weight:600;color:#1a8f4c;
}
:is(body.reference-public,.ref-shell) .mrnha-ai-approved i{
  width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#e6f6ec;font-size:10px;
}
:is(body.reference-public,.ref-shell) .mrnha-ai-sample{
  position:absolute;bottom:-11px;inset-inline-start:24px;padding:2px 10px;border-radius:50px;font-size:.6875rem;
  background:var(--tj-color-common-white,#fff);border:1px solid var(--tj-color-border-3);color:var(--tj-color-text-body-3);
}
@media(max-width:575px){
  :is(body.reference-public,.ref-shell) .mrnha-ai-score{position:static;margin:-6px 0 12px}
}
/* Nhãn tiêu chí tiếng Anh dài hơn ("Task response", "Coherence") → cột nhãn rộng hơn thẻ phụ huynh. */
:is(body.reference-public,.ref-shell) .mrnha-ai-card .mrnha-report-rows li{grid-template-columns:110px 1fr 32px}
@media(max-width:575px){
  :is(body.reference-public,.ref-shell) .mrnha-ai-card .mrnha-report-rows li{grid-template-columns:104px 1fr 28px}
}

/* 26/09/2026 — trang Tuyển giảng viên khi đang đăng nhập: thông báo + nút "Đăng xuất để ứng tuyển" */
.job-logged-in{display:flex;align-items:center;justify-content:space-between;gap:12px 18px;flex-wrap:wrap;margin-top:16px;padding:16px 18px;border-radius:12px}
.job-logged-in p{margin:0;flex:1 1 280px;line-height:1.55}

/* 26/09/2026 — Slide ưu đãi trang chủ (app/services/promos.php; quản lý ở /teacher/banners.php) */
:is(body.reference-public,.ref-shell) .promo-section{padding:36px 0 8px}
:is(body.reference-public,.ref-shell) .promo-slider{position:relative}
:is(body.reference-public,.ref-shell) .promo-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;gap:20px;border-radius:24px}
:is(body.reference-public,.ref-shell) .promo-track::-webkit-scrollbar{display:none}
:is(body.reference-public,.ref-shell) .promo-slide{
  flex:0 0 100%;scroll-snap-align:start;position:relative;min-height:300px;border-radius:24px;overflow:hidden;display:flex;align-items:center;
  background:linear-gradient(120deg,#011e42 0%,#01468c 55%,#0a5faf 100%);color:#fff;
}
:is(body.reference-public,.ref-shell) .promo-slide>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
:is(body.reference-public,.ref-shell) .promo-slide.has-img::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(1,30,66,.92) 0%,rgba(1,30,66,.7) 45%,rgba(1,30,66,.05) 80%)}
:is(body.reference-public,.ref-shell) .promo-body{position:relative;z-index:1;max-width:600px;padding:40px 48px}
:is(body.reference-public,.ref-shell) .promo-badge{display:inline-block;padding:5px 14px;border-radius:50px;background:#f5b60a;color:#1f1400;font-weight:800;font-size:.8rem;text-transform:uppercase;letter-spacing:.04em}
:is(body.reference-public,.ref-shell) .promo-body h3{margin:14px 0 10px;color:#fff;font-size:clamp(1.5rem,3vw,2.3rem);line-height:1.2}
:is(body.reference-public,.ref-shell) .promo-body p{margin:0 0 20px;color:#fff;font-size:1.05rem;line-height:1.6}
:is(body.reference-public,.ref-shell) .promo-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
:is(body.reference-public,.ref-shell) .promo-code{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:12px;border:1.5px dashed rgba(255,255,255,.7);color:#fff;font-weight:600}
:is(body.reference-public,.ref-shell) .promo-code b{color:#fdd525;font-size:1.15rem}
:is(body.reference-public,.ref-shell) .promo-code code{color:#fff;background:rgba(255,255,255,.14);padding:2px 8px;border-radius:6px;font-weight:800;letter-spacing:.06em}
:is(body.reference-public,.ref-shell) .promo-until{display:block;margin-top:14px;color:#fff;font-weight:600}
:is(body.reference-public,.ref-shell) .promo-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:44px;height:44px;border-radius:50%;border:0;background:#fff;color:#01468c;box-shadow:0 8px 20px rgba(0,0,0,.2);display:flex;align-items:center;justify-content:center}
:is(body.reference-public,.ref-shell) .promo-nav.is-prev{left:14px}
:is(body.reference-public,.ref-shell) .promo-nav.is-next{right:14px}
:is(body.reference-public,.ref-shell) .promo-dots{position:absolute;left:0;right:0;bottom:14px;z-index:2;display:flex;justify-content:center;gap:8px}
:is(body.reference-public,.ref-shell) .promo-dots button{width:10px;height:10px;padding:0;border:0;border-radius:10px;background:rgba(255,255,255,.55);transition:width .25s ease}
:is(body.reference-public,.ref-shell) .promo-dots button[aria-current="true"]{width:28px;background:#f5b60a}
@media(max-width:767px){
  :is(body.reference-public,.ref-shell) .promo-body{padding:28px 22px 44px}
  :is(body.reference-public,.ref-shell) .promo-slide{min-height:0}
  :is(body.reference-public,.ref-shell) .promo-slide.has-img::after{background:linear-gradient(180deg,rgba(1,30,66,.55) 0%,rgba(1,30,66,.92) 100%)}
  :is(body.reference-public,.ref-shell) .promo-nav{display:none}
}
:is(body.reference-public,.ref-shell) .promo-body h3{text-transform:none}
:is(body.reference-public,.ref-shell) .promo-nav{top:auto;bottom:18px;transform:none}
:is(body.reference-public,.ref-shell) .promo-nav.is-prev{left:auto;right:74px}
:is(body.reference-public,.ref-shell) .promo-nav.is-next{right:22px}
:is(body.reference-public,.ref-shell) .promo-section .promo-body h3{text-transform:none!important}
/* 26/09/2026 — khối AI gọn lại: ô tính năng thấp, cột phải cân với thẻ minh họa */
:is(body.reference-public,.ref-shell) .mrnha-ai-feats .mrnha-parent-feat{padding:14px 16px}
:is(body.reference-public,.ref-shell) .mrnha-ai-section .mrnha-parent-lead{margin-bottom:18px}
:is(body.reference-public,.ref-shell) .mrnha-ai-section .btn-area{margin-top:22px!important}
/* Kéo slide bằng chuột: con trỏ bàn tay; Swiper (đánh giá) vốn kéo được, thêm con trỏ cho rõ */
:is(body.reference-public,.ref-shell) :is(.promo-track,.mrnha-slider,[data-drag-scroll],.swiper){cursor:grab}
:is(body.reference-public,.ref-shell) :is(.promo-track,.mrnha-slider,[data-drag-scroll]).is-dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto;user-select:none}
:is(body.reference-public,.ref-shell) :is(.promo-track,.mrnha-slider,[data-drag-scroll]).is-dragging *{pointer-events:none}
:is(body.reference-public,.ref-shell) .promo-slide img{-webkit-user-drag:none;user-select:none}
/* Nút sao chép mã */
:is(body.reference-public,.ref-shell) .promo-copy{width:30px;height:30px;margin-left:2px;border-radius:8px;border:0;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.18);color:#fff;font-size:14px;cursor:pointer;transition:background .2s ease}
:is(body.reference-public,.ref-shell) .promo-copy:hover{background:#f5b60a;color:#1f1400}
:is(body.reference-public,.ref-shell) .promo-copy.is-done{background:#16a34a;color:#fff}

/* 26/09/2026 — "Lớp phù hợp theo độ tuổi" dạng timeline (chủ site). Chỉ CSS, giữ nguyên markup ul>li>strong+span. */
:is(body.reference-public,.ref-shell) .mrnha-parent-ages ul{
  position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;counter-reset:age;padding-top:6px
}
:is(body.reference-public,.ref-shell) .mrnha-parent-ages ul::before{
  content:"";position:absolute;left:calc(100%/6);right:calc(100%/6);top:30px;height:4px;border-radius:4px;
  background:linear-gradient(90deg,#f5b60a,#01468c)
}
:is(body.reference-public,.ref-shell) .mrnha-parent-ages li{
  position:relative;counter-increment:age;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;
  padding:0;border:0!important;background:none;box-shadow:none
}
:is(body.reference-public,.ref-shell) .mrnha-parent-ages li::before{
  content:counter(age);position:relative;z-index:1;width:52px;height:52px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;margin-bottom:10px;
  font-family:var(--tj-ff-heading);font-size:1.25rem;font-weight:800;color:#fff;
  background:#01468c;border:5px solid #fff;box-shadow:0 0 0 2px #01468c,0 10px 22px rgba(1,70,140,.25)
}
:is(body.reference-public,.ref-shell) .mrnha-parent-ages li:first-child::before{background:#f5b60a;color:#1f1400;box-shadow:0 0 0 2px #f5b60a,0 10px 22px rgba(245,182,10,.3)}
:is(body.reference-public,.ref-shell) .mrnha-parent-ages li:nth-child(2)::before{background:#3d7fd1;box-shadow:0 0 0 2px #3d7fd1,0 10px 22px rgba(61,127,209,.25)}
:is(body.reference-public,.ref-shell) .mrnha-parent-ages strong{font-size:1.2rem;color:var(--tj-color-heading-primary)}
:is(body.reference-public,.ref-shell) .mrnha-parent-ages li span{
  display:block;max-width:280px;padding:10px 14px;border-radius:12px;background:#fff;border:1px solid var(--tj-color-border-3);
  box-shadow:0 8px 20px var(--tj-color-shadow-1);font-size:.95rem;line-height:1.5;color:var(--tj-color-text-body)
}
:is(body.reference-public,.ref-shell) .mrnha-parent-ages-title{text-align:center;margin-bottom:22px!important}
@media(max-width:767px){
  :is(body.reference-public,.ref-shell) .mrnha-parent-ages ul{grid-template-columns:1fr;gap:18px;padding-left:4px}
  :is(body.reference-public,.ref-shell) .mrnha-parent-ages ul::before{left:29px;right:auto;top:26px;bottom:26px;width:4px;height:auto;background:linear-gradient(180deg,#f5b60a,#01468c)}
  :is(body.reference-public,.ref-shell) .mrnha-parent-ages li{display:grid;grid-template-columns:52px 1fr;column-gap:14px;align-items:start;text-align:left}
  :is(body.reference-public,.ref-shell) .mrnha-parent-ages li::before{grid-row:1 / span 2;margin:0}
  :is(body.reference-public,.ref-shell) .mrnha-parent-ages strong{padding-top:12px}
  :is(body.reference-public,.ref-shell) .mrnha-parent-ages li span{max-width:none}
  :is(body.reference-public,.ref-shell) .mrnha-parent-ages-title{text-align:left}
}
:is(body.reference-public,.ref-shell) .mrnha-parent-ages-title{text-transform:none!important;font-size:1.35rem!important}
:is(body.reference-public,.ref-shell) .mrnha-parent-ages{margin-bottom:12px}
:is(body.reference-public,.ref-shell) .mrnha-parent-cta{margin-top:36px}
.cc-proof-more{margin:6px 0 0;font-size:14px;opacity:.85}
/* 28/09/2026 — lịch học giờ chỉ 1 dòng ("2 buổi/tuần"): bỏ chiều cao giữ chỗ 3.6em làm dòng "8 buổi" cách xa dòng giảng viên */
:is(body.reference-public,.ref-shell) .tj-course-item:not(.banner-feature-course) .course-meta{min-height:0}
/* 28/09/2026 — nhiều nút "Xem ảnh" trong một mốc kinh nghiệm: cách nhau, tự xuống dòng khi hẹp */
.cc-experience-card .cc-evidence-button{margin-right:10px}